Drupal 7 - Create Slideshow inside nodes/articles

This is a small tutorial on how to create an image slideshow inside a node on Drupal 7.

Read this if you want:

• To have an image slideshow inside a node
• Have captions with html tag support

If you are interested in:

• Creating a slideshow for your frontpage
• Making a rotating banner
• Display nodes or content on a slideshow

you should better google for Views slideshow.

Although you may think that finding a module to create such a simple slideshow would be easy, it is not. Drupal 7 no longer supports adding a description for your image that we could use for our caption. So most modules use the title or alt attribute of the image as a caption. But you cannot input long texts in these attributes, let alone add html tags. One solution could be to just download one of the millions eye-candy jquery slideshows out there be done with it. But what if you are building a website for a client and you don't want them to write code inside an article (plus not all people are able to do that). You want to be able to use the already installed power and usability of drupal for your client's slideshows. Well don't despair! There is a very easy and simple solution.

What we need: Drupal 7 of course and two modules. Field Collection and Field Slideshow (you 'll also need their prerequisites entity and jcycle plugin).

For the tutorial I will be creating a new content type but that is not necessary. You could easily follow the steps and add this fuctionality inside your existing content types.

1. Go ahead and install the two modules

2. Create a new content type "Slideshow Article"

Head over to Structure > Content Types > Add content type. Skip this step if you wish. I am going to name my new content type "Slideshow Article"

3. Configure your fields.

Inside your new content type create a field like this:
Label - "Images & Captions"
Name - "images_captions"
Field - Field collection
Widget - Embedded

After creating the Images & Captions field you will be presented with the field settings. Customize them as you like but remember to put the number of values to unlimited!

When that's done head to Structure > Field Collections. You should see your Images & Captions field collection you created earlier. Hit manage fields so we can add fields inside the collection. We are going to create two fields. One image field and one text field for the captions (Slideshow module requires the captions to be simple text or it won't work). I am going to use the already existing field_image for my images and create a new text field for my captions as seen below.

For the Caption field set the maximum length to something you like. I am going to use 600 characters. For the text processing select Filtered text if you want to use html tags in your captions. Go ahead and adjust your image settings as you like. Both fields should have their number of values set to 1. In the Manage Display tab configure your two fields so their labels are hidden.

4. Manage your fields display.

Head back to your content type at the manage display tab. Set the label of Images& Captions to hidden and the format to Slideshow. Hit the configure button next to the format to control the settings of the Slideshow. I won't go over the options presented here to you. Play around with them. The only thing you need to set up to make it work is to select your image and caption field from the drop down menus as shown below.

Hit update and save. Ok we are ready to add some content!

5. You are done!

Now you can take a step even further. You can create some neat css classes to add some style to your slideshow like a transparent bar on the images where the captions will be shown, put some nice icons for the controls etc... You could also create an image style to make sure that whatever image the user may upload the width and height will be fixed so it doesn't break the design of your site. Hope you found this tutorial useful!