How to create an Advanced slideshow with multiple imagefield images in a node

This tutorial gives step by step instructions how to create an advanced slideshow, with multiple imagefield images, inside the node you create.

Creating slideshow functionality
Creating the functionality for advanced slideshows with multiple imagefields is done following these steps:

  1. Install required modules.
  2. Create node gallery content type with imagefield.
  3. Create node gallery content to show.
  4. Create node gallery view.
  5. Embed node gallery view in a node template

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.

Creating a slideshow node

You can create a user role (e.g. slideshow editor) and give users who are allowed to create slideshows in their nodes the role slideshow editor.

The steps a user has to do, to create a slideshow are:

  1. Creates a node gallery node.
  2. Upload the images to the node.
  3. Add a title and a description to the images.
  4. Save the node and the slideshow will be there.

Detailed steps to create the functionality

Note: Links refer to the existing tutorial on this site.

If you are new to creating advanced dynamic display block slideshows you can have a look at the Advanced slideshow tutorial or the Advanced slideshow video tutorial.

Install required module

Follow the Installation instruction page to install and enable the required modules.

Create a content type (e.g node gallery)

Path to create content type

  • 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 - node gallery
    Type - node_gallery
    Description - Node gallery for a Dynamic display block slideshow.
  3. Click the workflow link to open the workflow fieldset.
  4. Uncheck the checkbox: Promoted to front page.
  5. Click the Save content type button.

Add imagefield to a content type

  1. In the list of content types you have, find the node_gallery content type 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 you will see the configuration page of the multiple_image_field field you just made.

Configure multiple_image_field

Configure the following options:

  1. Click the Title text settings link, inside the node gallery settings fieldset to open the Title text Settings fieldset.
  2. Check the checkbox: Enable custom title text, to use this for the title of the slide.
  3. Collapse the Title text Settings fieldset
  4. Click the ALT text settings link, inside the node gallery settings fieldset to open the ALT text Settings fieldset.
  5. Check the checkbox: Enable custom alternate text, to use this for the text of the pager item.
  6. Collapse the ALT text Settings fieldset
  7. Choose for Number of values: Unlimited to enable unlimited multiple image uploads. (You can also choose a maximum value here for the number of images a user can upload per node)
  8. Enable Description field to use this for the text of the slide.
  9. Leave the other default settings.
  10. Click Save field settings button.

Display content type fields

  1. Click on the Display fields tab at the top of the page.
  2. Set Label, Teaser and Full Node Select boxes to: Hidden.
  3. Click the Save button.

Create node gallery nodes

  1. Navigate to Administer > Create content > node gallery.
  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 at least 2 images to show an Advanced slideshow inside your node. Otherwise the slideshow will not work.

  6. Fill in the following text fields:
    Description - Use for the text on the slide.
    Title - Used for the title of the slide.
    Alternate Text - Used for the text on the pager item.
  7. Click Save button.

Create view

Path to create a view

  1. Navigate to Administer > Site building > Views

Create a view (E.g node_gallery)

  1. Click Add button at the top of the page to add a new view.
  2. Fill in the following form fields.
    View name - node_gallery
    View description - Node gallery
    View tag - slideshow (optional)
    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. Click Add button.
  3. Add argument Node: Nid.
  4. 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
  5. Click Update default display.

Add fields

  1. Click plus sign button.
  2. Under Groups select box option choose Content.
  3. Check the checkbox next to Content: node gallery (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 filter Node: Published; check Yes radio button.
  5. Click Update default display.
  6. Configure filter Node: Type; set Operator to Is one of and Node type to: node gallery.
  7. Click Update default display.
  8. Save the view, when you are finished setting the view settings.

Note: You can configure the Basic and Block settings fieldset of the view depending on your requirements.

Create and configure a ddblock instance:

Path to create and configure an instance:

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

Enable content type and views block:

  1. Click on the Settings tab at the top of the page to enable Content types and Blocks.
  2. Check next to node gallery checkbox under Content types.
  3. Check next to views - node_gallery 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 - node_gallery.
  4. Click Add instance button.

Configure the block(ddblock node gallery slideshow):

There are two ways to configure 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.

In the Create and configure instance tutorial page you can find information how to configure the instance .

Download and install Dynamic display block themes:

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

In the Dynamic display block themes tutorial page you can find more information how to install the free ddblock 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 file in the theme you use, which is probably in sites/all/themes/[***your_theme_name***] (e.g sites/all/themes/mygarland).
  2. Save the node.tpl.php 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-node_gallery.tpl.php
  3. Add this following code after <?php print $content ?> in the node-node_gallery.tpl.php file
    <?php
    print '<br /><h1>Related images<h1><br />';
    $block = module_invoke('ddblock', 'block', 'view','[BLOCK_NUMBER]');
    print $block['content'];
    ?>

    Note: If you want the slideshow above the node content, place the code before <?php print $content ?>.

  4. Change [BLOCK_NUMBER] to the block number of the advanced Dynamic display block, so the code example becomes:
    <?php
    $block = module_invoke('ddblock', 'block', 'view','1');
    print $block['content'];
    ?>

    Note:You can find the number of the block when you hover on the configure link in the block administration page.
  5. Save the node.
  6. Add if statement to the preprocess function:

    Note:Add another if statement in both preprocess function for the view you created. In this case we assume that you already had preprocess functions. The following preprocess function code is provided for the default node_gallery_slideshow view and node gallery field being added in the default content type.

    Download preprocess_function_for_node_gallery.zip at the download page and add the if statement code in both preprocess function in your template.php file.

    Information on how to troubleshoot, have a look at the Preprocess functions page.

    You can also watch the DDblock - Advanced Dynamic Display Block Slideshow Video Tutorial (2009) for more detailed instruction on preprocess functions.