Quick configuration in 10 steps

Your Ad Here
  1. DDblock module and Required Modules
    1. Dynamic display block module.
    2. Views module.
    3. jquery.cycle plugin.
      1. Download the full version (NOT the Cycle Lite version) of the jquery cycle plugin from http://malsup.com/jquery/cycle/download.html
        (use jquery.cycle.all.min.js (packed version) or jquery.cycle.all.js, tested till version 2.99)
      2. Install the jquery cycle plugin in /sites/all/libraries/jquery.cycle/
  2. Slideshow themes
    The module has a default slideshow theme without a pager. 6 free example slideshow themes with different pagers, can be downloaded from: http://ddblock.myalbums.biz/download (ddblock-upright10p-60p-v7-1-3.rar)
    Extract the “custom” folder from the ddblock-upright10p-60p-v7-1-3.rar file and its content into the drupal theme directory of the Drupal theme you use: sites/all/themes/[your_theme]/custom. The Drupal theme which is set as default in the drupal themes configuration page is [your_theme]. The directory structure should now be: sites/all/themes/[your_theme]/custom/modules/ddblock/....
    Important note: After installing the slideshow themes, clear the cache so the Drupal theme system picks up the new .tpl.php files.
  3. MODULES - Installation modules
    1. Copy required modules to: sites/all/modules.
    2. Enable the required modules.
    3. Enable the ddblock module.
    4. Goto: Administration > People > Permissions.
    5. Give permissions which roles can administer and/or view dynamic display blocks.
    6. Save permissions.
  4. CONTENT TYPES - Create Content Type
    Create a content type for the slideshow.
    Fields which can be included are:
    • Title – Title of a slide and title of full node view (standard with a content type).
    • Image – Slide image and pager image (new imagefield).
    • Slide text – Text on a slide (new text field).
    • Body – Text of full node view (standard with a content type).
    • Pager image - Image of a pager_item when another image needed. (new imagefield)
    • Pager item text – Text of a pager_item (new text field).
  5. Note: For using different sizes of the same image in the slide and the pager, just use one image and add this imagefield twice to the view to give different styles.

  6. CONTENT - Create Nodes
    Create at least two nodes to make the slideshow work.
    1. Navigate to Administration > Content > Add content [your content type].
      • Fill in Title – Used for the title of a slide and the title of the full node view.
      • Upload Image – Image used for slide and pager.
      • Fill in Slide text – Used for the text on a slide.
      • Fill in Body – Used for the text of the full node view.
      • Upload pager image - Used for the image of a pager item.
      • Fill in Pager item text – Used for the text of a pager item.
    2. Click Publishing options and check Published.
    3. Click Save button.
  7. VIEWS - Create View
    Create a view for your content type and add the fields for the slideshow.
    • Filter on your content type and only display published nodes.
    • Add the fields for the slideshow; Title, image, slide_text, pager_text, path or link (for readmore button.)
    • Set maximum number of slides to show in the slideshow.
    • Sort on publication data. (optional)
    • Create a block display.

    Notes:

    • When adding a path (aliased path to node) for the readmore button, you need to rewrite the path field in the view and use <a href="[path]">Read more...</a> to add the link.
      Another option is to use a link field in the content type so a link can be added to any page and each slide can have a different title on the button.
    • For the pager item don't use a link to the node. The css used for the pager does not support the link and wil look broken. Removing the link will show the pager correct.

  8. DDBLOCK - Enable content type and view for ddblock (SETTINGS TAB)
    1. Navigate to Administration > Structure > Dynamic display block.
    2. Click the Settings tab.
    3. Select the checkbox next to: [your content type].
    4. Select the checkbox next to: [views – block display of your view].
    5. Click Save configuration button.
  9. DDBLOCK - Create Dynamic display block instance of [your view] (INSTANCE TAB)
    1. Navigate to Administration > Structure > Dynamic display block.
    2. Click the Instance tab.
    3. Type a unique instance title in the Instance Title textfield.
    4. Select [your view] in the Block type.
    5. Click the Add Instance button.
  10. DDBLOCK - Configure the block (LIST TAB)
    1. Navigate to Administration > Structure > Dynamic display block.
    2. Click the List tab.
    3. Click on the configure block link. (You can also do the same thing from Administration > Structure > Blocks).
    4. Configure the block as follows:
      Display method:
      When default setting are used nothing has to be done here, otherwise:
      • Choose Cycleblock radio button to use the jQuery cycle plugin functionality.
      • Use advanced settings.

      Template:

      • You can choose any of these slideshow themes: Upright10 Upright20 Upright30 Upright40 Upright50 Upright60. Note: When the slideshow themes don't show up in the select list, check if they are installed in the right place and read permissions are given on the filesystem.
      • When custom themes are installed they can also be chosen here.
      • When a slideshow theme supports sizes files click the "get template sizes" button to be able to chose the available sizes. If no sizes files are available the only choice is default.

      Mappings:
      Map the "views fields" to the "slideshow theme fields".
      notes:

      • The same image for the slide and pager can be used. If an additional pager image field is available, that field can be used for the pager image.
      • Don't use a link in the pager text or the pager image.

      Slideshow settings:
      When default setting are used nothing has to be done here, otherwise:
      Choose transition effect, Speed, Timeout, Sort Order, Pause and Next.
      Prev/next Pager settings:
      Check the checkbox: Prev/Next Pager to enable a prev/next pager on the slideshow. (by default images will be used for the prev/next pager.
      When default setting are used nothing has to be done here, otherwise:

      1. Choose pager event.
      2. Type text for prev and next pager if no images are used, or you require text on the image
      3. Choose if you want to Hide Prev/Next Pager when no slide available.

      Pager settings:
      Check the checkbox: Use Pager to enable a pager for the slideshow.
      When default setting are used nothing has to be done here, otherwise:

      1. Pager type will be chosen automatically.
      2. Choose Pager position.
      3. Choose Pager event.
      4. Choose other available pager settings.

      Slide text settings:
      Check the checkbox: Use slide text to enable the slide-text for the slideshow.

      1. Choose the slide-text position.
      2. Choose the slide-text container. (can be left on default setting in most cases)
      3. To enable slide-text effects click on Use jQuery effects for text of a slide.
        When default setting are used nothing has to be done here, otherwise:
        1. Choose Slide text position.
        2. Choose Before Effect.
        3. Choose Speed Before Effect.
        4. Choose After Effect.
        5. Choose Speed After Effect.

      Custom jQuery Cycle Plugin settings:
      To enable custom settings for the cycle plugin, you can add lines here in json format, see helptext.

  11. BLOCKS - enable the ddblock instance in a region
    1. Navigate to Administration > Structure > Blocks.
    2. Place your newly created ddblock instance in a region of your theme. Note:Use the ddblock instance instead of the block display of the view.
    3. Save

Your slideshow should be working now!

Important notes

  • If the slideshow does not work, please have a look in the issue queue for similar issues. (Also search the closed ones.)
  • When there are no similar issues in the issue queue, create a new one.
  • Give enough information, what you did, how it can be replicated, a link to your site, etc, so you can get accurate answers on your issues.
  • Please only post comments here to improve the tutorial.
  • Please post support requests, feature requests, bug reports for the module in the issue queue .

Comments

Can't get pager to work on custom theme

I created a new theme based on upright10p and it works just fine except for the pager. I copied and renamed the ddblock-cycle-pager-content--upright10p.tpl file to ddblock-cycle-pager-content--mythemename.tpl, but when I go to edit the block the pager positions drop-down only offers 'left' and 'right', neither of which are supported by my pager file. The pager type also defaults to 'scrollable pager'.

It seems the system isn't recognising my ddblock-cycle-pager-content--mythemename.tpl file, even after clearing the cache. What am I doing wrong here?

Slide page links

Great tutorial! Is there a way to make each slide a link to a different page when they click on that slide?

Re: Slide page links

Yes, you can by adding a link or text field to the content type for the url and rewrite the image field in the view like:

<a href="[link-field-token]">[image-field-token]</a>

Replace the tokens with the real field names you use (see replacement patterns under rewrite of a field)

note: The link or field with the URL must be before the image field to be able to use the link token. You can exclude the link field from display.

Hope this helps you further.

Image size

I understand that this free theme...
In terms of functionality - Is it possible to change button "get template sizes" to choose your own size in the future?

Re: Image size

The "get template size" button can already be used when different size css files are available. The functionality was already incorporated with views_slideshow_ddblock for drupal 6. For this module the size files are explained in http://ddblock.myalbums.biz/node/1845. In the future I will distribute the free themes with different size files for 460px, 700px and 940px wide slideshows. With these example size files it will be easier to create a custom size file.

Image size

Oh! great news!
Thanks!

Not working when "Aggregate and compress CSS files" turned on...

After I followed all the instructions on this article, DDBLOCK did not display correctly on my front page. The displayed DDBLOCK its like PAGER at the top, followed by main IMAGE below it, then OVERLAY TEXT below the IMAGE. I tried to solve this problem by checking everything and removing most of the modules without correcting this issue. At last, I turned off "Aggregate and compress CSS files" under Performance and this problem solved.

If we shouldn't be turning on "Aggregate and compress CSS files", this should be noted on the document above. Otherwise, should this open another ticket for future fixes???

thx!

thanks very much

excellent tutorial, only bit that confused me was whether i should be creating a block in views or a page but apart from that really good. thanks.

Доброго дня. Після виконання

Доброго дня. Після виконання всіх кроків мені видало помилку:
Notice: Undefined variable: pager в функции include() (строка 24 в файле /var/www/sokrda/data/www/nordbess-news.cv.ua/themes/bartik/custom/modules/ddblock/ddblock-cycle-pager-content.tpl.php).
Notice: Undefined variable: delta в функции include() (строка 30 в файле /var/www/sokrda/data/www/nordbess-news.cv.ua/themes/bartik/custom/modules/ddblock/ddblock-cycle-block-content.tpl.php).
Notice: Undefined variable: pager в функции include() (строка 32 в файле /var/www/sokrda/data/www/nordbess-news.cv.ua/themes/bartik/custom/modules/ddblock/ddblock-cycle-block-content.tpl.php).
Notice: Undefined variable: pager в функции include() (строка 38 в файле /var/www/sokrda/data/www/nordbess-news.cv.ua/themes/bartik/custom/modules/ddblock/ddblock-cycle-block-content.tpl.php).
Notice: Undefined variable: pager в функции include() (строка 59 в файле /var/www/sokrda/data/www/nordbess-news.cv.ua/themes/bartik/custom/modules/ddblock/ddblock-cycle-block-content.tpl.php).
Notice: Undefined variable: output_type в функции include() (строка 67 в файле /var/www/sokrda/data/www/nordbess-news.cv.ua/themes/bartik/custom/modules/ddblock/ddblock-cycle-block-content.tpl.php).
Notice: Undefined variable: output_type в функции include() (строка 81 в файле /var/www/sokrda/data/www/nordbess-news.cv.ua/themes/bartik/custom/modules/ddblock/ddblock-cycle-block-content.tpl.php).
Notice: Undefined variable: output_type в функции include() (строка 89 в файле /var/www/sokrda/data/www/nordbess-news.cv.ua/themes/bartik/custom/modules/ddblock/ddblock-cycle-block-content.tpl.php).

Як її виправити???

First I would like to thank

First I would like to thank you for the module. But I have a question.

I have installed the module(ddblock-7.x-1.0-rc1.tar.gz) and the extra themes.
I also downloaded the jquery file and put under the libraries folder.
I followed the basic 10 steps to setup a block.

Now the basic theme work, though looks odds. looks like this
[ ] [ ]
[ ] [ ]
[ ]
-------
| |
| |
-------
The top five are the thumbnail and the bottom large is the image.

I tried to configure with the extra theme. But I can't find following options as you said in your tutorial
* Display method
* Template
* Mappings

Can you give me some hint that where I might make a mistake? thank you. And I am debugging my site on local server, thus won't be able to send you a link.

Thanks again.

D7 Themes installation

Thanks for the tutorial and the clarity of the steps.

Can you please add a little detail to installation of the free themes? I'm using 7.x-1.0-rc1.

In my case, I have the site theme installed in /sites/[mysitename]/themes, rather than /sites/all/themes. In that case, should the custom folder be put in the tree under the [mysitename] structure, or must the site theme be placed in /sites/all/themes and the custom folder added there?
Secondly my theme is using a sub-theme, so does that alter the location of the custom folder in any way?

Many thanks for your help.

D7 themes installation

The slideshow "custom" directory should be placed in the theme used.
In your case the subtheme of the theme.
/sites/[mysitename]/themes/[subthemename]

d7 theme specific emplementation

hello,
i have tried to implement this module using Zen D7, Sky D7 and Fusion D7.
i have followed your tutorial to the letter and yet nothing comes out ( no images or any other content , only the php error that the ddb theme is not loading, e.g. modest-grey40p), only the title of the block is rendered;
also, i have to mention that there is no clear documentation as to what directory exactly custom theme's files should be installed into, (not the "custom" folder that comes with .rar download).
please share your insight.
it looks like a nice candy ...
i would like to have
cheers all

Re: D7 theme specific emplementation

There are no free drupal 7 slideshow themes yet, besides the upright10-60 example slideshow themes.
Commercial slideshow themes are available at http://themes.myalbums.biz/theme, choose (ddblock_7.x) as supported module.
Other slideshow theme layouts can be developed on request

The slideshow theme you try to use is for drupal 6.

Please make issues in the issue queue of the module. The issue queue is monitored daily!!!

Thank you!!!

Great tutorial (D7), great module. Many thanks for your work.

Thanks for the short

Thanks for the short tutorial. If time permits, could you please be a little bit more specific on how to create the view in 6.
Again thanks for this nice module.

Re: Thanks for short

Thank you for your comment.
Added some steps to the create views part.

Views

I got the basic slideshow to work but I am stuck on the advanced slideshow. For some reason I cant get views to cooperate. Is there anyway you can either do a video demo of how to set it up in Views or break down some of the steps? I am an advanced views user but just dont understand how you want it done. Ty.

Re: views

Which steps to create the view are not clear?

pager

The pager not working.

For the pager item don't use a link to the node. The css used for the pager does not support the link and wil look broken. Removing the link will show the pager correct.

what is that? the pager not linked to the content? i want my $20 back.

do not buy it!!!

do not buy it!!!!!!!!!!!!!!!!!!!! not working!!!!!

Sorry

Sorry. I take that back. It works like a charm. Really, really sorry. Thank you.

it does work and it's free...

I managed to get this working. BUT please remember to clear cache as at first nothing happened for me. Clear the cache twice even! Also clear the view cache to cover all caching.

However, can you provide methodology for setting up different sizes for the slide show. Is it the same as for Drupal 6 'Create slideshow theme'. In drupal 7 the custom themes (upright10p etc.) don't use the 'views-slideshow...' tpls format?

ddviews

Hi,I have read this tutorial but I have returned this:http://img88.imageshack.us/img88/4056/catturatr.png with no style...
what is wrong?
Thanks

Re: ddviews

Please create an issue in the issue queue at http://drupal.org/project/issues/ddblock