Creating a Simple Photo Slideshow in Drupal

scottrouse's picture

Drupal has taken it pretty hard regarding its image handling abilities. I won't say that it's not warranted. Drupal 7 has really made some improvements to image handling. The instructions here are for building a simple photo slideshow in Drupal 6. The process would be different (read "easier") in Drupal 7.

Background Info

There are two main schools of thought as to how images can be handled in Drupal:

  1. Each image is its own node
  2. A single node (such as a gallery or portfolio) contains multiple images

There is no correct choice for all situations. For most of my Image or Photo Gallery use cases, I prefer option 1 above. There are a number of reasons, but I find it very helpful to have each image existing as its own individual node.

Basic Installation

Download Modules and Themes

I used a basic install of Drupal 6 along with the following basic modules for my presentation (in no particular order):

It's up to you, of course, but I used the 960 Robots theme for a change of pace.

In my demo, I used Drush to speed up the downloading and installation of modules and themes, but you can always do it the old-fashioned way.

drush dl imagecache imageapi filefield imagefield cck views views_slideshow transliteration ninesixtyrobots admin_menu

Enabling Modules

I enabled the following modules in Drupal:

  • Administration Menu
  • Content
  • FileField
  • ImageField
  • Text - I enabled this, but I didn't end up using it in my demo.
  • ImageAPI
  • ImageAPI GD2 - You have to enable either this or ImageAPI ImageMagick, but not both.
  • ImageCache
  • ImageCache UI
  • Transliteration
  • Views
  • Views Slideshow
  • Views Slideshow: SingleFrame
  • Views Slideshow: ThumbnailHover
  • Views UI

If you're using Drush, drush en admin_menu content filefield imagefield text imageapi imageapi_gd imagecache imagecache_ui views views_slideshow views_slideshow_singleframe views_slideshow_thumbnailhover views_ui will do take care of the above.

The Steps

  1. Create a content type to contain our photos.

    Since each image will be a node in our example, we'll need to create a content type of which all image nodes will be. I chose to create a content type called Photo.

    1. Go to admin/content/types/add and enter a Name and Type for your new content type. I used Photo and photo respectively.
    2. Change any of the Submission form settings, Workflow settings, and/or Comment settings, if desired. I just left these at their default settings.
  2. Add an Image field to your new content type.

    1. Go to Manage fields at admin/content/node-type/photo/fields (if you've used my example naming convention).
    2. Give your new field a Label and Name and click Save. I used Photo and photo respectively.
    3. I made the field Required since holding an image was the only real purpose of this content type.
    4. Click Save field settings.
  3. Create some content.

    Go to node/add/photo and create as many photo nodes as you'd like. I created five in my example, but as long as you have two or more, you'll be able to continue with the exercise.

  4. Build ImageCache presets in order to display your images uniformly.

    Since we may need to display both large versions of the images and thumbnails, we're going to create two ImageCache presets.

    1. Go to the ImageCache administration page at admin/build/imagecache.
    2. Click the Add new preset tab.
    3. This will be our large image preset so I'm gonna name it large_slideshow.
    4. Click Save Preset.
    5. Click Add Scale under the New Actions fieldset.
    6. Enter 600 in the Width field and 400 in the Height field.
    7. Click Create Action.
    8. Now let's create our thumbnail preset. Click the Add new preset tab again.
    9. Name the preset slideshow_thumb.
    10. Click Save Preset.
    11. Click Add Scale And Crop under the New Actions fieldset.
    12. Enter 50 in both the Width and Height fields.
    13. Click Create Action.
    14. I wanted a black and white thumbnail, so I clicked Add Desaturate under the New Actions fieldset.
    15. Click Create Action.
  5. Now let's build our slideshow.

    1. Go to admin/build/views.
    2. Click the Add tab to create a new view.
    3. Click the + to the right of Filters to filter out which content will be in our slideshow.
    4. Check the boxes beside Node: Published and Node: Type and click Add.
    5. Select Yes for Published and click Update.
    6. Select Photo for the Node type and click Update.
    7. Click the + to the right of Fields to choose which fields will be displayed in our slideshow.
    8. Check the box beside Content: Photo (field_photo) and click Add.
    9. Change the Label to None.
    10. Choose large_slideshow image from the Format drop-down box.
    11. Click Update
    12. Click Unformatted next to Style under the Basic Settings section.
    13. Choose Slideshow and click Update.
    14. Change any of the slideshow settings that you'd like to change and click Update.
    15. Make sure Page is selected from the Add display drop-down box and click Add display.
    16. Click on None next to the Path label under the Page settings section.
    17. Enter slideshow and click Update.
    18. Click on No menu next to the Menu label under the Page settings section.
    19. Check Normal menu entry.
    20. Enter Slideshow in the title field.
    21. Choose Primary links from the Menu drop-down.
    22. Click Update.
    23. Click the Save button at the bottom of your view.
  6. That's it. Go visit your new slideshow.

More

There's lots more that can be done with Views Slideshow and ImageCache. If I get a chance, I'll try to put together a brief screencast of the process I spelled out above.

Here are a few examples of other Views Slideshow implementations I've done:

  • The header image as well as the News and Blogs rotators on the front page of http://www.allenacademy.org/
  • The upcoming workshop image and info rotator at http://paworkshops.net/Not there any more...
  • The front page photo slideshow and all portfolio slideshows at http://cdstuderphotography.com/

Do you have any examples of implementations? Please share them in the comments here.

Comments

Video

scottrouse's picture

I've created a brief screencast of the technique described above. It is available at http://vimeo.com/16100791.

If you haven't already, be sure and join our Vimeo Group at http://vimeo.com/groups/wmtdrupal.

Thank you!

groundswell's picture

Scott thanks again for a fantastic training on this yesterday. I really was very impressed with how well you your presentation skills are sharpening over the course of the classes. Both Andy and you were very sharp yesterday and your skills for training others is obviously getting honed in well. Cheers my friend.

P.S. I missed the views training and could use some help with this sometime. I'd love to sit down and geek out with Andy and you sometime if you two can manage some time in the near future.

Thanks

scottrouse's picture

Thanks, Nathan. I'll be at ZooTown next Monday for a Co-Working Session if you're available then.

-Scott

Many, many thanks.

opegasus's picture

Scott absolutely sensational followup to last nights meeting. You certainly filled in the missing parts for me. I can't wait for a free hour or six to redo all my attempted Views I made over the past few weeks.

I especially appreciate the Screen Cast you did in Vimeo as it goes hand in hand with this documentation. Your super extra effort will set a lot of us free to create some terrific sites.

I am one of the lucky ones to live in your area. With you and Andy Laken, the Drupal community here can't help but grow and prosper.

Cheers,

Christopher

Thanks and Please Help MJ

relMT's picture

I totally agree Christopher and Nathans comments!!!

Many of you who were at the meetup received information about my daughter's need for a operation that insurance does not cover. My wife and I are just beginning the process of raising $75,000 for that operation.

We can really use some help with this. Right now the most important issue is getting the message about this need out into the community. People cannot help if the don't know about the need.

So I am asking you all to help out in the social media, Facebook, Twitter, etc. Your comments and "Likes" are critical to getting the word out.

There is more information here: http://www.facebook.com/MJFund

Nathan found this excellent article about Facebook:
http://www.thedailybeast.com/blogs-and-stories/2010-10-18/the-facebook-n...

If you have any fundraising ideas or would like to do more please let me know. We need all kinds of help with this project.

Thanks,
Rick

How do you link a slideshow to an existing Page

jpholmes's picture

I'm VERY new to Drupal. Not a technical person at all. I learned by trail and error how to change pics on an existing slideshow on the front page of our website. However, I would like to create a slideshow for another page on our website. How do I link the slideshow to an existing page?

Done and done~

opegasus's picture

Rick,

Nathan, Jennifer and I started campaigns last week on Facebook and Twitter. We are rooting for your family.

Non -rotating slideshow

zanrick's picture

I am a newbie to drupal, I followed steps of the tutorial but for some reason the when i finish defining the slideshow it wont rotate its stuck on the first photo

Non -rotating slideshow - cont'd

zanrick's picture

Also the slideshow rotates when i preview it but wont display on the page in ordinary view

HTML permissions..

opegasus's picture

When creating the node, did you check to ensure you had full HTML enabled?

non rotating slideshow- still dont work

zanrick's picture

@opegasus , at first i didn't but i delete all photos and the photo content type, and recreated them, still didn't work , same error

In class...

opegasus's picture

@Zanrick

In our class on Drupal we all did those exact steps and we all had functioning (if not styled-pretty) slideshows. If you are using Drupal 6 (that is what these instructions are for) then these instructions work. I haven't attempted these instructions (steps) for Drupal 7 yet.

If you are using Drupal 7 and haven't built your site too far then I would recommend going to Drupal Gardens and building the core of your site (free) with the media module they have, move the site to your server and complete the build and adding modules, etc. They have a fully functioning Gallery-slideshow.

As of last look, Drupal 7 media has some glitches (not many) but Aquia's Drupal Gardens works just fine. (http://www.drupalgardens.com/).

If you have a big build on your current site I could take a little time to check it out before you go crazy. I am fairly new into Drupal but who knows, sometimes a second set of eyes on the project-module may help. If you would like to have me look, let me know here and I will reply with my info so you can create an account.

thanks for the tutorial!

hbecker's picture

I can't wait to try this ... just need to get views_slideshow installed and plan for many slideshows to be created. Is there any reason I can't use a taxonomy to select which photos to display in each slideshow?

Taxonomy is Fine

scottrouse's picture

No problem using Taxonomy terms to select that. You'll just need to rework the View to make that happen.

Yup - can do

hbecker's picture

We use taxonomy for other views so no problem. This looks easy for me to set up and document for our photo editor. I'll need to figure out about captions but they could just go in the node body as a teaser. I'll try it and post a link in a few weeks if it comes out ok.

Great

scottrouse's picture

Would love to see the end result. Best of luck.

Looks Great, Now to Add Links

greenpaisley's picture

Thank you for posting such clear instructions! This was very easy to implement. I would like to link the images in the slideshow to other pages. I am going to fiddle around with things to try to make it happen, but if you already know how to do it, would you mind posting some instructions for me?

Thanks again!

Views

scottrouse's picture

You bet. In Views, you have the option to customize links for items shown in the View. So, go into your settings for the slideshow View and alter the image link locations.

Still Looking for a Way to Link

greenpaisley's picture

I've done a lot of searching within the settings for the slideshow view and with the fields and settings for the "photo" content type. In "fields", I was able to create a link under the slideshow that led to the photo node or when the image is clicked to have it link to the photo node, but what I am really looking for is to be able to click the photo from the slideshow and have that link to whatever url I enter in as I am creating/editing the node. So, I am trying to figure out how to add link box to the node creation form.

I'm not sure if that is clear and now I think it may be unrelated to your demo above. If you can help, I would appreciate it.

Thanks again!
Jules

My Take...

scottrouse's picture

You're right. The two built-in link options Views provides is the image itself or the content to which it's attached. To link the image to a completely custom link, I'd follow (roughly) these steps (some of which you've probably already done):

  1. Create a field on the node containing the image where the link is entered
  2. Include that field in the View, but check the Exclude from display checkbox (make sure this field is listed before the image field in the View)
  3. For the Image field in the View, check the Rewrite the output of this field checkbox
  4. Referring to the Replacement Patterns provided to you by Views, construct the output of the image field. It will look something like this (depending on what your fields are named):
    <a href="[link-field-name]">[image-field-name]</a>

Let me know how that goes.

I tried this and...

PaschalHackler's picture

I'm getting a link displayed above the image field in the slideshow despite the "exclude from display" option being checked. I really want the slide itself to be the link, just not to the image node itself. Any help would be greatly appreciated.

"If the computer gives you any back talk, pour some well-sugared office coffee into its evil little silicon brain."

– Edward Abbey

OK, I figured it out

PaschalHackler's picture

In case anyone else was having the same problem as I was, all I did was to check the box "Display field as link" and in the box write [field_link]

"If the computer gives you any back talk, pour some well-sugared office coffee into its evil little silicon brain."

– Edward Abbey

Not Displaying Properly on Homepage

toepick83's picture

Hi Scott!

I created the slideshow as a block to display at the top of my homepage, in the main content area on my site. Since putting it there, it's not sitting above the other posts I have on there, but rather fighting over the top spot WITH the other post I have. They're sitting side by side in the center of the page. Do you know how I might edit the code to fix this problem?

Adding clear?

groundswell's picture

Did you try adding a clear to the CSS style?

clear:right; or clear:both or clear:left; depending on which side needs to clear.

I tried to do that, but I

toepick83's picture

I tried to do that, but I don't know if I'm in the right CSS file. Having a hard time pinpointing if I need to adjust the views slideshow css stuff, or my main theme css?

Firebug for Firefox...

opegasus's picture

Get the Firebug for Firefox add on (or Firebug lite for Chrome, if that's your flavor) and learn to use 'inspect element'. A great tool for helping locate all kinds of code. It isn't perfect but it does vastly narrow down the places to look. Also 'View Source' on that page could give you some clues. I have a feeling Nathan has a good handle on what to do CSS wise (or maybe a Div float issue and remember you can only use 100% of the page...some folks have 51% and 50% next to each other...or forget to add the % or pixels of padding and borders).

Thanks opegasus! I just

toepick83's picture

Thanks opegasus! I just downloaded Firebug, but I'm still trying to get used to the whole interface. I was able to highlight the problem areas, but I can't find the same bit of code in my css or template files so that I can actually save the changes... It's still a bit confusing to me.

Cool...

opegasus's picture

...you are using the Fusion theme, no? If so did you read the handbook on placing blocks and all that? http://drupal.org/project/fusion Plus make sure the dimensions of the slideshow aren't larger than the block area. I am totally guessing here but one 'could' set the dimensions at, say...95% (slideshow or slideshow block) and make sure the region you are placing that block into can accommodate the size. If that works out then you can gradually move the percentage up until it breaks the template (goes wonkers like it is now) and then you will know the percentage or size you can actually use. One can also do it by pixels (use a smaller pixel size to start with...increase the number with each successful test) but if you are using a fluid style template, hard coding sizes vs. percentages...and floats, not so good.

Granted it is much better to quietly figure out the code and size requirements for that area instead of playing with it...pen to paper if that's what it takes.

Also there is the block php files to check out in addition to the template CSS...again guessing without seeing the actual files/template files.

I see you are using the fluid aspect, no?

Plus a quick check of your images shows you are using the 'large' slideshow...may be part of your problem?
http://www.showitoff.net/sites/default/files/styles/large_slideshow/publ...

But if you work out the block sizing and percentage...? Again, one would need to look at your files/backend (at least I would) to see what is being asked (code wise) of the template-blocks and what the slideshow is demanding (size wise and placement) to get a better idea. I apologize if I am confusing you on this.

My colleagues are correct

scottrouse's picture

My colleagues are correct here. If there is a link we can look at, one of us could quickly identify the issue, I'm sure.

Link?

groundswell's picture

Is there a link I can take a look at it?

Thank you! Yes, here is the

toepick83's picture

Thank you! Yes, here is the link:

http://www.showitoff.net

Nevermind everyone! I figured

toepick83's picture

Nevermind everyone! I figured it out. Opegasus, I found that there was a setting in the grid that was at 50%. When I switched that to 100%, everything fell in line like it was supposed to. Thanks for the tip!

Awesome!

opegasus's picture

Forget everything that I replied with above...well, meaning you got to the issue and corrected it. The info is good to keep in mind thought if a site/template 'breaks...' meaning something 'inside' is larger or calling for larger real estate than the block (or node) it's parked in.

Glad you nailed it...can be rather frustrating when we click a button and stuff seems to have a mind of it's own and does anything but what we had envisioned.

question: I realize this is

thumbslinger's picture

question: I realize this is specifically Drupal-based learning/techniques, but with all the installs, configuring, then setting it all up...and I'm very new to Drupal, I can't believe there is any advantage to this than coding it yourself.

It's really not that much easier or quicker... if one isn't really a developer, then just copy/paste using a jquery plug-in and entering the appropriate code in a block would be pretty darn fast.

Updating, changing, adding/removing images etc, is just a matter of uploading the images which can still be done via the Drupal interface if need be.

I'm just wondering if there is some advantage I'm not seeing. I mean, it's not just to "keep it all Drupal" for that sake, right?

@thumbslinger: Great

scottrouse's picture

@thumbslinger:

Great point.

If your goal is to build a simple, relatively static site with a slideshow and other content, there are certainly some readily-available tools to help you with that and avoid Drupal altogether:

(Just to name a few of the dozens of solid tools, templates, and frameworks out there.)

The goal of this exercise, however, was to show how to incorporate your Drupal site's content into a slideshow. Drupal is, admittedly, not the easiest CMS to learn. In fact, I can honestly say that it can be downright infuriating at times. That being said, its complexity comes from its flexibility.

Perhaps the advantage you're not seeing is that once this slideshow is set up by a site builder, the person who manages the content on the site will now be able to easily add, remove, or edit the content of the slideshow without digging into any code or any Drupal configuration. Just create, edit, or delete nodes as needed.

Hope that helps.

-Scott

Another advantage is that

hbecker's picture

Another advantage is that once you have it set up, you can easily clone it to work with another set of slides and change the settings if other details would be better for the new slideshow.

Changing images in slideshow

linda howard's picture

I have a slideshow of 7 images. I would like to replace some of the existing images with new ones. I can not figure out how to get view the images that I already have and change them. Please assist.

Go to the page the slideshow

thumbslinger's picture

Go to the page the slideshow is on. Login at that page. If you hover over the slideshow, you may get a little "Edit node" in the top left of the slide show.

If not, try looking under admin/pages and see if the slideshow is on a page there. If so, in the variants to the left, click "preview" and then hover over the slideshow and you should get the "edit node" if indeed it is an actual view generating the slideshow.

You can also check under the Content Types and just choose Content under admin and then filter accordingly.