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.

Comments

pp

Get the most amazing deals, Visit free paypal money online today and explore the best portal witnessed ever.

advanced slideshow with multiple imagefield

While coding many software engineers face issues of how to create an advanced slideshow with multiple imagefield images in a node. This tutorial is so good for us to use for making things easy in our daily work. Also here http://www.queensland-assignment.com/ I read about the best ideas that helps the developers to find the best platforms like this.

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 : http://drupal.org/node/418616
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 : http://mariedelafon.com/drupal-6/fr/work/dessins-de-je-sais-plus-qui

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:

examples:
http://ddblock.myalbums.biz/node/839
http://ddblock.myalbums.biz/node/1795
http://ddblock.myalbums.biz/node/916

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 ?

Hello
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 ( http://drupal.org/project/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 ?
thanks

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

elarifr

Displaying in node with Tapestry theme

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

Thanks

Larry

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: http://drupal.org/node/241559

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.
Example:
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.