Sunday, 29 January 2012

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!

64 comments:

  1. Thank you for this tutorial, I did have an issue with the jcycle plugin.
    found the solution here http://www.bentedder.com/jquery-slideshow-in-drupal-7-screencast/
    In case someone else runs with the same issue.
    My problem was that Drupal was not recognizing the script. Also the jcycle plugin needs to be saved as jquery.cycle.all.min

    ReplyDelete
  2. Didn't encounter any similar problem. Downloaded the jquery.cycle.all.js and droped it into sites/all/libraries/jquery.cycle/jquery.cycle.all.js
    If you get it wrong you can see the error on the status report page saying the that it could not locate the /jquery.cycle/jquery.cycle.all.js

    ReplyDelete
    Replies
    1. Yes that was exactly the error I was getting. Maybe it was just me, it worked with the file name change.

      Delete
  3. Great tutorial! The exact same approach can also be used to make a Clickable slideshow. Follow the instructions here, but also add a Link field named "Link" to the "Images & Captions" field collection. You may wish to rename it "Images, Captions and Links". Set the link field to only have one value, just like Captions.

    Then in the Fields display options from step 4, you set the Link dropdown to: "Field Collection Field: Link".

    Now each slideshow frame can have its own custom link, as well as a caption.

    ReplyDelete
    Replies
    1. Note that you *have* to have the link module installed and be using the field type "link" for the link to show up in the Link drop down. Once you do, you are there.

      Delete
  4. When I try to create the content type it dosent appear "Field collection" has a field. Do I need some extras? Thanks for the help.

    ReplyDelete
    Replies
    1. Have you installed and enabled the Field Collection module?

      Delete
  5. I got following error

    Notice: Undefined index: in field_slideshow_field_formatter_view() (line 529 of /Applications/MAMP/htdocs/dtest/sites/all/modules/field_slideshow/field_slideshow.module).

    ReplyDelete
    Replies
    1. I´m having same issue in the line 597 after creating the slideshow.

      No clue :(

      Also I don´t know how to include the slideshow INSIDE an article :(

      begginer problems....

      Delete
    2. This comment has been removed by the author.

      Delete
    3. You should use same kind of image (for example "thumb") in Structure > Field Collections as in Strucute > Content type > your_content_type.

      Delete
    4. I'm having the same problem. I think I'm missing something with the above reply. Can someone clarify?

      Delete
  6. Is there a way to get these to open up into a lightbox>

    ReplyDelete
    Replies
    1. I don't think you can easily do it. Nevertheless try this:
      - Install the lightbox module
      - Go to your field collection that has the image field
      - At the manage display tab select the lightbox format you like

      Hope it works. If not then you should probably create a simple javascript to add the rel attribute to your images to make them work with lightbox module.

      Delete
  7. How do you set the default popup size - the problem is that- the popup uses the exact dimensions of the image and cuts off the borders etc

    ReplyDelete
    Replies
    1. Are you talking about lightbox?
      From what I recall if you head over to the "Manage Display" tab you have a lot of options like:
      lightbox: thumbnail -> large

      That means your image is shown as a thumbnail in the node but when clicked it opens up in the large image style.

      If you head over to "admin/config/media/image-styles" you can create your own image style to use in the lightbox popup.

      Delete
  8. Thank you for great tutorial, very usefuly

    ReplyDelete
  9. Thank you. Useful, briefly but clearly.
    Everything works but when i press "upload" for an image i have

    Warning: Invalid argument supplied for foreach() in file_field_widget_submit() (line 760 of .../public_html/modules/file/file.field.inc).
    Warning: array_values() [function.array-values]: The argument should be an array in file_field_widget_submit() (line 767 of .../public_html/modules/file/file.field.inc).

    and i press "save" - so, everything fine.
    any idea?

    ReplyDelete
    Replies
    1. Sounds like a problem with field collection. I used to receive them too. Try using the latest dev version and if the problem persists try filing an issue to the field collection module.

      Delete
    2. Here's the solution that worked for me:
      http://drupal.org/node/1468686

      Delete
  10. Hi, have you had any issue with the pager not showing up?
    i just want a number pager so i can replace it with bullets similar to http://sampler.drupalgardens.com/



    ive selected pager and -> slider number.

    do i have to create a field for slide number?

    ReplyDelete
    Replies
    1. No, what you are doing is correct. Pager -> Slide Number is the way to add the pager. If you are not seeing it maybe you are facing other problems with the slideshow?
      Check your the source page to see if the pager is added in the html. If not something 's wrong.

      Delete
  11. Thanks for these directions.

    This works perfectly and is just what I need, BUT - I cannot make the images adaptive. Is this possible with this method? I am using the AIS image module, which works fine with Flexslider in other cases.

    ReplyDelete
  12. OK, I think I got it working by fiddling back and forth between content type and field collection display settings. Very confusing, esp. since I am testing a number of different gallery modules :-)

    ReplyDelete
    Replies
    1. Don't see why adaptive images shouldn't work. You might also want to check flexslider for a responsive slideshow module. http://drupal.org/project/flexslider

      Delete
  13. Great tutorial, but I can´t see any image field, and any caption field when I manage display. It´s empty.
    I have this modules enabled: Colorbox and Display suite.
    Could be there a confict between them?

    Thanks

    ReplyDelete
    Replies
    1. Did you install Field Collection module? I have not used Colorbox so I am not sure if it has support for Field Collection.

      Delete
  14. Thanks so much for this!

    Got it all working now.

    In the content type:
    Images & captions set to Field Collection, using the embedded widget AND set the display of the field to Flexslider (Slideshow, as recommended above, did not work as responsive images).

    In Field Collections, manage fields:
    set caption to Text
    set Image to Image with the Image widget

    Dan

    ReplyDelete
  15. In #4. Manage your fields display.

    I do not see the image and caption field i created, in the drop down?!

    ReplyDelete
  16. # 4 is confusing.

    Why do you have a slideshow option in, structure > Field collections > manage display ?!

    That does not do anything.

    ReplyDelete
    Replies
    1. I do not have something like that. #4 section is about structure > Content Types > manage display.

      #3 is about structure > Field collections.

      See the steps from the start in case you missed something.

      Delete
  17. I get an warning when i upload a image

    Warning: Invalid argument supplied for foreach() in file_field_widget_submit() (line 756 of /nfs/c10/h02/mnt/XXXXXXX/domains/XXXXXXXXXXX.com/html/modules/file/file.field.inc).
    Warning: array_values() expects parameter 1 to be array, null given in file_field_widget_submit() (line 763 of /nfs/c10/h02/mnt/XXXXXX/domains/XXXXXXXXXX.com/html/modules/file/file.field.inc).

    ReplyDelete
    Replies
    1. This is an issue of Field Collection. Check the issue queue of the module and you will definitely find something. I believe it can be fixed with a newer version of the module. Nevertheless the slideshow should still work even with this warning.

      Delete
  18. Anybody have a working demo online? I'd love to see it.

    ReplyDelete
  19. Great tut, works, but sometime my captions are cut off, depending on the aspect ratio of the image, seems that the image pushes the caption out of frame... Anyone know of a fix?

    ReplyDelete
  20. Yes: danmurano.com/photography - but I am not happy with it because of the huge gap left between photos and captions when showing horizontal images. If I could have clickable images, this would not be as big an issue, but the only instructions I found for that were not clear enough and I spent several hours working on that to achieve nothing.

    ReplyDelete
  21. when is Field Collection going to be updated to a stable release? I'm tired of waiting

    ReplyDelete
  22. This comment has been removed by the author.

    ReplyDelete
  23. Hi and thanks for the help ! It work great for me ^^

    I've just a question, is it possible to have a plupload widget in the field ?

    I try to put plupload in the field collection, image value 10 and imge value 1 in my content type but it doesn't work..

    Thanks if you know

    ReplyDelete
    Replies
    1. Sorry but I am not aware. Try asking in the issues queue list of plupload and field collection.

      Delete
  24. Please Can you Tell me, how can i open my post(pages/article) images in jquery frame(when clicked)...?

    I am searching for this for a long time, but still failed..:(


    Please ...!!!!!

    ReplyDelete
    Replies
    1. Read the documentation of lightbox (http://drupal.org/project/lightbox2)

      Delete
  25. Really nice and great tutorial..... Thank you Admin, keep posting.!!!!!

    ReplyDelete
  26. hi Perisdr...!!

    I have another query about slide show..., Please give me idea...


    I want to create a view, where i can show some social network image logo, and link them to url, which is provided by user, in link field....for example, if a user post an classified ad, and enter facebook url in facebook-url field, then, on their ad page, i can show facebook logo, g+ logo and their picture, and linked with provided url by user,
    And, i also wan to hide all images from post page, and show images in onther block on the same page,( in slide show)..is this possible, if yes, please provide solution...!!!!!!
    Please, please, Please

    ReplyDelete
  27. Hi,

    i have a multilingual site, this is working for one language, when i click translate page i have to upload everything again.. is it possible to use this approach in a multilingual site?

    ReplyDelete
    Replies
    1. It would be probably be better to check the issue queue list of field collection to see if they have multilingual support. I don't believe this is something to do with field sideshow.

      Delete
  28. One thing to point out: Only Text Field, and NOT Text Area, can only be seen by Slideshow options Caption dropdown

    ReplyDelete
  29. Found this to add Text Area for caption, let's hope it works!
    http://drupal.org/node/1366226
    comment #11

    ReplyDelete
  30. Thank you for this -- wasn't immediately apparent when I had installed both modules.

    ReplyDelete
  31. Thanks for this wonderful tutorial, my question is: Can we use Media Atom Reference field for image in Slideshow from Scald Media Management module instead of using field type Image?

    ReplyDelete
    Replies
    1. I have not used this module but supposedly field collection module can create a collection of fields. So if Scald Media Management module creates fields then you probably can use them inside a field collection.

      But If Field Slideshow supports this I cannot be sure. Best way to do it is to give it a try.

      Delete
  32. This is a great tutorial, and I got it working fine within the standard content type. However, I'm using CCK Blocks module to move fields around and place them in different regions on the page. When I transfered the field types for this into the CCK Block structure, the whole instance broke down on me, and show out some error messages: (line 625 of C:\Users\Amie\Sites\acquia-drupal\sites\all\modules\field_slideshow\field_slideshow.module). Have you used this module with CCK Blocks before?

    Thanks for any advice you can give!

    ReplyDelete
  33. Great tutorial! I had to use same type of image style in slideshow and field collection. Also, I use colorbox to enlarge pictures. Thanks a lot.

    ReplyDelete
  34. I had got the slide show working. Now after some time (and updates later) - i am instead of slide show getting the following:
    QUOTE
    Images & Captions: Images & Captions 1 (Edit|Delete)Images & Captions 2 (Edit|Delete)Images & Captions 3 (Edit|Delete)
    Please add images and caption from the event
    UNQUOTE
    Can somebody help where things are going wrong?

    ReplyDelete
  35. After reading your instructive tutorial I became able to create a beautiful looking slideshow. Thanks a lot for proper description, it helps me a lot.

    drupal developers india

    ReplyDelete
  36. Unfortunately I am not getting the slideshow effect at all. The images and captions just appear one after the other. In fact I don't think that jcarousel and jcycle are being used (there is no link in the head to the files anyway).

    Can anyone explain please? I've been working on this for hours and followed the instructions to the letter but with no success.

    ReplyDelete
    Replies
    1. I too am facing the same problem. Ffnch, did you get it working?

      Delete
    2. Today it started working!

      I thought I followed all steps of this article correctly. However in my earlier attempt, the first screen of step 4 did not have field "Image field" above "Image style". I thought this could be because of any differences in the module versions. You get to this screen if go via admin menu "Structure"->"Field Collections". When navigated to a similar screen today via admin menu "Structure"->"Content Types" -> "" and then "MANAGE DISPLAY" tab and after clicking settings wheel against "Image & Captions" field, I found extra field "Image field". When I selected value 'Field Collection field: Image" and saved, the slideshow started working! Hope this helps others.

      Delete
  37. I've now gone back and reviewed the settings, where Images & Captions were not set as slideshow. I set the field as slideshow and now I'm getting this error:

    Notice: Undefined index: in field_slideshow_field_formatter_view() (line 623 of /home/mysite/public_html/jml/sites/all/modules/field_slideshow/field_slideshow.module).
    Notice: Undefined index: in field_slideshow_field_formatter_view() (line 624 of /home/mysite/public_html/jml/sites/all/modules/field_slideshow/field_slideshow.module).
    Notice: Undefined index: in field_slideshow_field_formatter_view() (line 625 of /home/mysite/public_html/jml/sites/all/modules/field_slideshow/field_slideshow.module).
    Notice: Undefined index: in field_slideshow_field_formatter_view() (line 623 of /home/mysite/public_html/jml/sites/all/modules/field_slideshow/field_slideshow.module).
    Notice: Undefined index: in field_slideshow_field_formatter_view() (line 624 of /home/mysite/public_html/jml/sites/all/modules/field_slideshow/field_slideshow.module).
    Notice: Undefined index: in field_slideshow_field_formatter_view() (line 625 of /home/mysite/public_html/jml/sites/all/modules/field_slideshow/field_slideshow.module).

    I've read your answer to a similar post but I'm not clear what you mean by "use same kind of image" - I'm using "Image" which is the only type of image I have. Can you please help me????

    ReplyDelete
  38. Drupal devs - your non-standard configurations don't save time or maintenance without documentation!!! drupal

    ReplyDelete
  39. Hi
    Great tutorial. Got it all working. Just a quick question, if I may - is there any way to easily replace the previous/next text with arrows?

    ReplyDelete
    Replies
    1. The easiest way would be to use css to create the style you want. You can pick a few ideas from here if you don't know a lot about css https://drupal.org/node/691984

      Delete
  40. Great tutorial. This work perfectly for my website. All I need is to view its slideshow node using pop up frame. Any suggestion?

    ReplyDelete
  41. Thanks a lot for your tutorial. Could you perhaps explain how to add some css classes ? For example, how can I remove the bullets of the li ? Also I would like to add a frame around the gallery and a nice title in it. Thanks in advance.

    ReplyDelete