Ddblock-module - Advanced slideshow

Uit DeVliegendeWiki

Ga naar: navigatie, zoeken
5. ddblock-instellingen
Voorbeeld chromatic-blue10l-theme
Voorbeeld chromatic-blue20l-theme
Voorbeeld chromatic-blue40l_0-theme
Voorbeeld gradient-blue3-p-theme
Voorbeeld gradient_green10p-theme
Voorbeeld gradient-green20p-theme
Voorbeeld gradient-green30p-theme
Voorbeeld gradient-green40p-theme
Voorbeeld gradient-green50p-theme
Voorbeeld modest-grey10p-theme
Voorbeeld modest-grey20p-theme
Voorbeeld modest-grey30p-theme
Voorbeeld modest-grey40p-theme
Voorbeeld modest-grey50p-theme
Voorbeeld plain-list30l-theme

Zie ook ddblock-module en ddblock - Advanced slideshow - Creëer view.

Aanmaken van een geavanceerde ddblock-slideshow met afbeeldingen gaat in de volgende stappen:

  1. Installatie van modules;
  2. Creëer content-type;
  3. Creëer nodes;
  4. Creëer view;
  5. Configureer ddblock-instellingen;
  6. Creëer ddblock-instantie;
  7. Plaats block;
  8. Configureer ddblock-instantie;
  9. Installeer template;
  10. Installeer preprocess-functies
  11. (Pas styling aan mbv. CSS);
  12. Permissies configureren

Inhoud

1. Installatie van modules

Download de volgende modules:

Plaats deze modules onder /sites/default/modules.

Activeer de volgende modules:

  • CCK - Content
  • CCK - Content copy
  • CCK - FileField
  • CCK - Text
  • CCK - ImageField
  • ImageCache - ImageAPI
  • ImageCache - ImageCache
  • ImageCache - ImageAPI GD2
  • ImageCache - ImageCache UI
  • Dynamic Display Block
  • jQuery Update
  • Views
  • Views Exporter
  • Views UI

2. Creëer content-type

Creëer met behulp van CCK een passend content-type, dat in ieder geval de volgende velden kent:

  • Title of a slide and title of full node view: title (standard with a content type);
  • Text of a pager_item: pager_item_text (new text field);
  • Text on a slide: slide_text (new text field);
  • Slide image and pager image: image (new imagefield);
  • Text of full node view: body (standard with a content type).

De makkelijkste manier is waarschijnlijk door de definitie van dit type (News Item genaamd), te extraheren uit het al eerder genoemde bestand Export_Files_V1.4.zip, en te importeren via 

Administer > Content management > Content types: Import

Bron: http://ddblock.myalbums.biz/node/751

3. Creëer nodes

Maak minimaal twee nodes aan van het News item-content-type.

Bron: http://ddblock.myalbums.biz/node/752

4. Creëer view

Zie artikel ddblock - Advanced slideshow - Creëer view

5. Configureer ddblock-instellingen

Ga naar 

Administer > Site configuration > Dynamic display block: Settings

en activeer:

  • Content types: News item
  • Blocks: Views: News item slideshow

6. Creëer ddblock-instantie

Ga naar 

Administer > Site configuration > Dynamic display block: Instances

Voer een naam in (ddblock-News item slideshow in dit voorbeeld) en klik Add instance.

Gesugerreerde instellingen:

  • Display Method: Cycleblock

Bron: http://ddblock.myalbums.biz/node/754

7. Plaats block 

Let op: Het gebeurt makkelijk dat je per ongeluk de view plaatst ipv. het ddblock.

Bron: http://ddblock.myalbums.biz/node/769

8. Configureer ddblock-instantie

Nu er een ddblock-instantie is aangemaakt, moet deze nog geconfigureerd worden.

Ga naar 

Administer > Site configuration > Dynamic display block > List > Configure block

9. Installeer template

De essentie van een advanced ddblock slideshow ligt vermoedelijk in het gebruik van templates of sjablonen om de vormgeving van een ddblock te kunnen bepalen en om te specificeren hoe de verschillende onderdelen van een ddblock geplaatst moeten worden. Je kunt overigens ook zonder sjabloon een advanced slideshow aan de praat krijgen, zei het dat de vormgeving dan dezelfde is als voor een basis ddblock slidehow. Deze mogelijkheid is in ieder geval handig voor debugging.

Om een diapresentatie met afbeeldingen zonder sjabloon aan de praat te krijgen, ga naar de ddblock-configuratie-pagina en stel in:

  • Display Method: Cycleblock;
  • Geen advanced settings;
  • Content container: img;
  • Use page: Allebei de opties werken

De makers van ddblock stellen een aantal sjablonen gratis ter beschikking. Ook kunnen ze in opdracht betaalde sjablonen vervaardigen. Gratis sjablonen vindt je op http://ddblock.myalbums.biz/download. In de mapstructuur van zo'n sjabloon vind je een afbeelding van het betreffende sjabloon. Daarnaast wordt dit beschreven in het bijbehorende README.txt-bestand.

Te doen:

  • Download een sjabloon. In dit voorbeeld gebruik ik het modest-grey-30p-sjabloon;
  • Het gedownloade sjabloon bevat een map custom. Copiëer deze met bijbehorende submappen en bestanden naar je theme-map, vermoedelijk zoiets als sites/all/themes/MijnTheme;
  • Ga naar

Op het ddblock-instantie-configuratie-scherm lijkt een sjabloon niet te gebruiken te zijn in combinatie met de img-tag. Waarschijnlijk moet je hier iets meer-omvattenders hebben, zoals div.slide, en waarschijnlijk moet je daarvoor de code van je theme aanpassen.

Bronnen:

10. Installeer preprocess functions

De ddblock-module gebruikt twee preprocess functions om velden van van View te vertalen naar sjabloon-variabelen: Een voor de gehele diapresentatie-sjabloon, en een voor het pager-sjabloon.

De preprocess-functies moeten geplaatst worden in bestand template.txt dat bij het theme hoort. Daarbij moet in beide functies de naam van het theme ingevuld worden. Dat stelt weinig voor.

Afmetingen en vormgeving aanpassen

De belangrijkste aspecten aan de vormgeving van een ddblock, vind je als een verzameling parameters in het css-bestand dat bij een theme hoort, bv.: 

sites/all/themes/<theme-naam>/custom/modules/ddblock/<ddblock-theme-naam>/<ddblock-theme-name>.css

De dimensies van de afbeeldingen: 

div.ddblock-cycle-gradient-green30p div.slide-inner img{height:303px;margin:0!important;padding:0!important;width:478px;}

Breedte van het gehele object: 

div.ddblock-cycle-gradient-green30p div.container{background-color:#E4C144;width:460px;

Bronnen

Content Container

Op de ddblock-instantie-configuratiepagina kun je een waarde opgeven voor de Content container of slides. Oftewel: Welke tags worden gebruikt om de slide te identificeren?

Voorkomende waarden:

  • div.slide
  • div.views-row
  • img

De Upright-verzameling van sjablonen, gebruikt div.slide als tags. Vandaar dat deze waarde al is voorgedrukt. Als je geen sjablonen gebruikt, kun je de diapresentatie aan de praat krijgen door img als tag in te vullen. Dan wordt waarschijnlijk alleen de kale afbeelding afgebeeld.

Cycleblock

Bij de configuratie van een ddblock-instantie, kun je bij Display method kiezen uit Default en Cycleblock.

Mijn ervaring wijst uit dat Cycleblock direct werkt (zonder advanced settings, met img als content container). Met Default krijg ik ongeformatteerde output, en de afbeeldingen die ongeschaald onder elkaar staan.

ImageCache

Uiteraard kun je ImageCache gebruiken in combinatie met advanced ddblock slideshows (geavanceerde ddblock-diapresentaties).

ImageCache-gerelateerde instellingen kun je beheren in het ddblock-configuratiescherm.

Bronnen:

Permissies configureren

Ga naar 

Admin > User management > Permissions

Hier hebben we de volgende drie onderdelen geactiveerd voor anonieme gebruikers (misschien kan het ook met minder items):

  • view field_image
  • view field_pager_item_text
  • view field_slide_text

'Read more...' werkt niet

Eén van de onderdelen van de slide-overlay is de Read more...-knop. Deze knop toont de volgende slide, in plaats van linken naar de eigenlijke pagina.

Antwoord: http://ddblock.myalbums.biz/node/1780

Slide-overlay

Met slide-overlay bedoel ik alles wat over de afbeelding heen getoond wordt.

Theme: modest-grey30p

README.txt-bestand van theme modest-grey30p: 

************************************************************
* Dynamic display block module theme: modest-grey30p       *
* Copyright(c) 2009 P. Blaauw All rights reserved.         *
* Version 1.3(26-JUL-2009)                                 *
* License: GPL                                             *
************************************************************

Information
-----------

* Horizontal layout.
* Configurable slide and slidetext effects.
* Slide text configurable at top, left, bottom or right side.
* Pager configurable on left or right side.
* Number Pager contains links to the slides.

Theme directory structure
-------------------------

The modest-grey30p theme contains the following directories and files:

modest-grey30p3.jpg
template.php.txt
README.txt
custom/
--modules/
----ddblock/
------ddblock-cycle-block-content.tpl.php
------ddblock-cycle-block-content-modest-grey30p.tpl.php
------ddblock-cycle-pager-content.tpl.php
------ddblock-cycle-pager-content-modest-grey30p.tpl.php
------images/
--------readmore.png
--------readmore-hover.png
--------transparent_bg.png
------modest-grey30p/
--------ddblock-cycle-modest-grey30p.css

Installation
------------

1.) Copy the custom directory with all sub directories to the theme directory of the theme you use.
    (which is probably at sites/all/themes/[YOUR_THEME_NAME]/)
    
You can find other Installation information in the Advanced dynamic display block tutorial at:
http://ddblock.myalbums.biz/node/747
    

Configuration
-------------
1.) Goto the dynamic display block configuration screen.
2.) Choose custom for the template 
3.) Type modest-grey30p as the custom template name

You can find other configuration settings in the Advanced dynamic display block tutorial at:
http://ddblock.myalbums.biz/node/747

Support
-------
Frequently asked questions about the Dynamic display block module and the themes can be found at:
http://ddblock.myalbums.biz/faq
http://themes.myalbums.biz/faq

Information about installation and configuration of the themes can be found in the Advanced dynamic display 
block tutorial at: http://ddblock.myalbums.biznode/747

You can find and report issues with the dynamic display block module on drupal.org at:
http://drupal.org/project/issues/ddblock
Teruggeplaatst van "http://www.devliegendebrigade.nl/wiki/index.php/Ddblock-module_-_Advanced_slideshow"
Persoonlijke instellingen