Revision of How to create an Advanced slideshow with multiple imagefield images in a node from Sat, 05/23/2009 - 13:36

In this tutorial, we assume that you already have enough knowledge about the Advanced slideshow tutorial/Advanced options for creating the Advanced dynamic display block slideshow.

To make this tutorial working, follow the Installation instruction page for installing and enabling the required modules.

Create a content type(E.g Ddblock node gallery slideshow)

Path to create content:

  • Navigate to Administer > Content management > Content types in the admin menu.

Add a content type:

  1. Click the Add content type tab.
  2. Fill in the following form fields.
    Name - Ddblock node gallery slideshow
    Type - ddblock_node_gallery_slideshow
    Description - Node gallery slideshow for a Dynamic display block slideshow.
  3. Click the Save content type button.

Add imagefield to a content type

  1. In the list of content types you have, find the ddblock_node_gallery_slideshow you just made.
  2. Click the manage field link.
  3. Add a new field multiple_image_field.
  4. Fill in the following form fields.
    Label - Multiple image field
    Field name - multiple_image_field
    Field type - File
    Widget type - Image
  5. Click Save button.

Note: After clicking the Save button this would show you the configuration of the multiple_image_field just made.

Configure multiple_image_field:

Configure the following options:

  1. Click on the Title text settings fieldset option.
  2. Check the checkbox option of the Enable custom title text field to be use for the title of the slide and text for the pager item.
  3. Click on the ALT text settings fieldset option.
  4. Check the checkbox option of the Enable custom alternate text field to be use for the text on a slide.
  5. Set to Unlimited in the Number of values select box option to choose for.
  6. Leave the other default settings.
  7. Click Save field settings button.

Display content type fields:

  1. Click on the Display fields button at the top of the page.
  2. In the field Multiple image field you made set the following:
    Label - Hidden
    Teaser - Hidden
    Full node - Hidden

Create a node for Ddblock node gallery slideshow:

  1. Navigate to Administer > Create content > Ddblock node gallery slideshow.
  2. Fill in Title - Used for the title of the full node view.
  3. Fill in Body (optional) - Used for the text of the full node view.
  4. Upload Image - Image used for slide and pager.
  5. Note: Upload atleast 2 images to be use for the Advanced slideshow inside your node in order to cycle the slideshow.

  6. Fill in the following textfield:
    Alternate Text - Used for the text on a slide.
    Title - Fill in Title - Used for the title of the slide and the text of the pager item.
  7. For Publishing options uncheck promoted to the frontpage.
  8. Click Save button.

Path to create a view

  1. Navigate to Administer > Site building > Views

Create a view (E.g ddblock_node_gallery_slideshow):

  1. Click Add button at the top of the page to add a new view.
  2. Fill in the following form fields.
    View name - ddblock_node_gallery_slideshow
    View description - Node gallery slideshow for a Dynamic display block slideshow
    View tag - slideshow
    View type - choose Node
  3. Click Next button.

Add Block display for the view:

  1. Select Block as display type in the select box at the left side of the page.
  2. Click Add display button.

Add arguments:

  1. Click plus sign button under Arguments fieldset.
  2. Add dummy argument Global:NULL.
  3. Click Add button.
  4. Leave the default settings and click Update default display.
  5. Add argument Node: Nid.
  6. Click Add button and set the following:
    Title: leave it empty
    Action to take if argument is not present: Check radio button Provide default argument
    Default argument type: Check radio button PHP Code
    PHP argument code: Type return arg(1)
    Leave the other default settings
  7. Click Update default display.

Add fields:

  1. Click plus sign button.
  2. Under Groups select box option choose Content.
  3. Check the checkbox option next to Content: Ddblock node gallery slideshow (multiple_image_field).
  4. Click Add button.
  5. Uncheck Group multiple values (DON'T GROUP THE IMAGES, YOU WANT SEPARATE ROWS).
  6. Set Label to none.
  7. Set format to Image.
  8. Click Update default display.

Add filters:

  1. Click plus sign tab.
  2. Add the following:
    Node: Published
    Node: Type
  3. Click Add button.
  4. Configure Gallery ddblock: Configure filter Node: Published and check Yes radio button under Published.
  5. Click Update default display.
  6. To configure Gallery ddblock: Configure filter Node: Type, set Operator to Is one of and Node type to Ddblock node gallery slideshow.
  7. Click Update default display.

Note: You can configure the Basic and Block settings fieldset of the Block display view depends on your desired requirements that fits your needs.

Create and configure an instance:

Path to create and configure an instance:

  1. Navigate to Administer > Site configuration >Dynamic display block.

Enable content type and block view:

  1. Click on the Settings tab at the top of the page to enable Content types and Blocks.
  2. Check next to Ddblock node gallery slideshow checkbox under Content types.
  3. Check next to views - ddblock_node_gallery_slideshow: Block checkbox under Blocks.
  4. Click Save configuration button at the bottom of the page.

Create an instance:

  1. Click the Instances tab at the top of the page.
  2. In the Add Instance fieldset type the name of the Instance title (e.g Ddblock node gallery slideshow)
  3. For Block type choose views - ddblock_node_gallery_slideshow.
  4. Click Add instance button.

Configure the block(Ddblock node gallery slideshow):

There are two ways to coonfigure the block:

  1. Navigate to Administer > Site building > Block, find the block you made in the disabled region and configure.
  2. Navigate to Administer > Site configuration > Dynamic display block, find in the list of block instance you have the block you just made and configure.

For more information on how to configure the block instance and other settings for the Advanced dynamic display block option follow Create and configure instance tutorial page.

Download and install Dynamic display block themes:

Note: If you already have the dynamic display block free themes installed in your drupal installation you dont need to do this steps.

Follow the Dynamic display block themes tutorial page to give you more information on how to install the free themes in your drupal installation.

Download dynamic display block free themes at the Download page.

Add the instance to the node-[***content-type_name***].tpl.php:

  1. Create a copy of the node.tpl.php which is probably from sites/all/themes/[theme_name] (e.g sites/all/themes/mygarland the theme you use.
  2. Save the node template as node-[***content-type_name***].tpl.php, in this case using the default content type from this tutorial this should be name as node-ddblock_node_gallery_slideshow.tpl.php
  3. Add this code after  print $content in the node-ddblock_node_gallery_slideshow.tpl.php file

    print '<br /><h1>Related images<h1><br />';
    $block = module_invoke('ddblock', 'block', 'view','[BLOCK_NUMBER]');
    print $block['content'];

  4. From the code print 'Related images'; -- Here you can add text for your block slideshow inside the node.
  5. Change [BLOCK_NUMBER] to the block number of the advanced Dynamic display block.
  6. Note: You can find the number of the block when you hover on the configure link in the block administration page.

  7. Save the node.
  8. Add if statement to the preprocess function:

    Note: Only add another if statement in both preprocess function using other view name for the Advanced dyanamic display block slideshow, in this case we assume that you already had the preprocess function working and installed in your installation. The following preprocess function code is provided for the default ddblock_node_gallery_slideshow view and Ddblock node gallery slideshow field being add in the default content type.

    Download preprocess_function_for_ddblock_node_gallery_slideshow and add the if statement code in both preprocess function in your template.php file.

    For more information on how to troubleshoot if you have another view name and field names for the content type other than the default view and fieldname name from this tutorial, have a look at the Preprocess functions page.

    Also watch this DDblock - Advanced Dynamic Display Block Slideshow Video Tutorial (2009) for more detailed instruction.


Slideshow for multiple image fields within a single node

I have to setup a content type allowing users to create their own slideshow, by uploading their images into multiple image fields within a single node (each node define a slideshow). Then the node has to "automatically" display the multiple image fields as a slideshow. Just like lightbox do, in fact, but in the html flow instead of in a overlay.

I tried to find the best choice using this sliders comparison :
I tested "fancy slide" that do it almost, but after creating a new node and uploading all the images, users still need to define and setup a new slideshow for this new node, and that of course, each time a new node is created. That is not what I want.

Then I felt down on this tutorial that seemed a possible solution (this is what it is for btw), and indeed, it is a bit heavy to setup, but once setup is done, there is nothing else to do, only upload images and it works as I wanted. It is very efficient, many thanks for it.

But in my case I wanted to use prev-next mode. And the prev-next links are displayed but links are not working ... did I miss something ?
Here is a link to my test page :

I wanted also not to automatically run the slideshow (just use prev-next links to browse). Is there any setting for this ?

Another thing is I don't want to resize the images to a constant container size. I want to display images as they are, according to the imagecache preset I applied to the field (resizing images to a maximum width/height instead of a fixed width/height). I don't want vertical images to be stretched to fit the horizontal frame of the slideshow container.
Is there a way to setup ddblock for that ?

Or maybe ddblock is not quite appropriate for all that purpose... if not, please let me know and also if you have a suggestion for a maybe less powerfull but more dedicated module for that ?

Thanks for any help.

Re: Slideshow for multiple image fields within a single node

Answer on your issues:

1.) prev next pager.
Probably you use an older version of the slideshow themes with a newer version of the ddblock module. the id for the prev/next (id="prev2") is changed to (class="prev"), same for next pager-item.

2.) not automatically run slideshow
You can set the timeout for the slideshow to 0, this way is will not slide automatically

3.) Image sizes
Don't know what exactly the requirements are here, but for flexible sizes you would need to change the css of the images in the slideshow theme.

Thanks for your answers

Thanks for your answers :
1) Indeed, after uploading the genuine themes, it works !
2) Works well too
3) Yes, I realised that what I need is just a more basic theme with no image resizing. And that can indeed be achieved by creating my own theme (ddblock-cycle-block-content-mybasictheme.tpl.php and mybasitheme/ddblock-cycle-mybasictheme.css) ... perfect !
Thanks a lot.

Drupal 7 alternate text and views

In drupal 7 seems that the optional title- and alt-fields of an image can not be shown in views, as a consequence it can't be mapped in the Dynamic display block configuration, Can you suggest any workaround, to make title and description to be displayed in a node multiple imagefield environment?

Preprocess functions

I'm not very well versed in PHP so I'm not sure where in the preprocess functions this additional code for the node_gallery should be placed. Perhaps someone could help me out? Thanks.

Re: Preprocess functions

You can search this site and the issue queue of the module to find similar questions and answers:


Hope this helps you further.

_node_gallery code

Sorry ignore the last comment I made -- beautiful code works like a charm.

_node_gallery code

Just wanted to make a note that your posted code for _node_gallery preprocessor function contains some syntax errors. Though the logic works the syntax errors are very basic, func brackets-- maybe characters got lost when you were converting to txt.

How about making it a CCK widget

thanks for article - I will try to do it

can you please in how to convert this idea to CCK widget

as this way too much time and effort

Re: How about making it a CCK widget

If making a as you call it: "a CCK widget", is more easy and quicker to make, please let me know how I do that?
I am very interested in other, quicker and easier ways.

ddblock with imagefield_extended displayed inside node ?

as you said :
Note: You can also use an existing content type and just add the imagefield to upload multiple images and show these images as an advanced dynamic display block slideshow inside the nodes of the existing content type.
Is there a way to use ddblock + imagefield_extended ( )
to set for each image fields for
- main title
- pager title
- text to display
- url link
- button text
something that will work like a basic slideshow inside the node itself without the need to create view / block and just need to add some code in the content template to display the slide ?

RE: ddblock slideshow with imagefield_extended

Thank you for your question.

Did not know the imagefield_extended module existed, but surely one to look at in combination with ddblock.

No direct answer but will let you know when I tried it out and know some more.

Thanks again.

hope we'll see soon some application

to make a Basic Content Slideshow from multiple imagefield in same node :)

somethink like the setting to display lightbox2 in cck display field widget but that will allow ddblock as a target


Displaying in node with Tapestry theme

Tapestry theme does node use node.tpl.php so where do i place the code?



Re: Displaying in node with Tapestry theme

Whenever a theme does not provide a specific default template file, the theming engine (phptemplate, in this case) provides a 'default template' for use. You can find the engine's default template files in the themes/engines/phptemplate folder of your drupal install. You should copy the node.tpl.php file from this folder into your theme folder, and then modify this copy.

This is a copy of the answer in issue:

In your case copy the node.tpl.php file to your theme
Create the node-node_gallery.tpl.php file and add the code for the slideshow

Hope this helps you further, please let me know.

How do I receive the node's ID in the view when I use a panel?

Thanks for the great module!

I followed the steps and got it working, but I want to display the node in a panel on my frontpage. Just the teaser, which is then the slide show without the article. Clicking on "Read More" button shall then deliver the whole content.

This fails, because in views, "return arg(1)" does not return anything if the node is displayed in a panel pane. So I need the node's id that called the dynamic display block.

I tried the following:

  1. in the default argument code, I inserted "global $node;", but that was NULL
  2. in the node template, I defined a new variable $node_id, but that wasn't available in the default argument code neither.

Any suggestions how to implement that? Thanks a lot!

very good!

very good!

Drupal has evolved in a way

Drupal has evolved in a way that there is not really a need for modules like Panels or Content Template anymore. ConTemplate I use for reference but no need to actually have it running/installed on your production site. You have way more control and flexibility by simply using node-custom.tpl.php and page-custom.tpl.php files.
Use an e.g. grid.css file for any type of content display. Your node/page content can be all over the page in any position. Don't need no Panels here.