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:
- Each image is its own node
- 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):
- ImageCache
- ImageAPI
- FileField
- ImageField
- CCK
- Views
- Views Slideshow
- Transliteration - Not required by ImageCache, per se, but it's helpful.
- Administration Menu - Not related or necessary to the example, but it's my favorite way to quickly navigate the back-end of Drupal.
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
-
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.
- Go to
admin/content/types/add
and enter a Name and Type for your new content type. I used Photo and photo respectively. - Change any of the Submission form settings, Workflow settings, and/or Comment settings, if desired. I just left these at their default settings.
- Go to
-
Add an Image field to your new content type.
- Go to Manage fields at
admin/content/node-type/photo/fields
(if you've used my example naming convention). - Give your new field a Label and Name and click Save. I used Photo and photo respectively.
- I made the field Required since holding an image was the only real purpose of this content type.
- Click Save field settings.
- Go to Manage fields at
-
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. -
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.
- Go to the ImageCache administration page at
admin/build/imagecache
. - Click the Add new preset tab.
- This will be our large image preset so I'm gonna name it large_slideshow.
- Click Save Preset.
- Click Add Scale under the New Actions fieldset.
- Enter 600 in the Width field and 400 in the Height field.
- Click Create Action.
- Now let's create our thumbnail preset. Click the Add new preset tab again.
- Name the preset slideshow_thumb.
- Click Save Preset.
- Click Add Scale And Crop under the New Actions fieldset.
- Enter 50 in both the Width and Height fields.
- Click Create Action.
- I wanted a black and white thumbnail, so I clicked Add Desaturate under the New Actions fieldset.
- Click Create Action.
- Go to the ImageCache administration page at
-
Now let's build our slideshow.
- Go to
admin/build/views
. - Click the Add tab to create a new view.
- Click the + to the right of Filters to filter out which content will be in our slideshow.
- Check the boxes beside Node: Published and Node: Type and click Add.
- Select Yes for Published and click Update.
- Select Photo for the Node type and click Update.
- Click the + to the right of Fields to choose which fields will be displayed in our slideshow.
- Check the box beside Content: Photo (field_photo) and click Add.
- Change the Label to None.
- Choose large_slideshow image from the Format drop-down box.
- Click Update
- Click Unformatted next to Style under the Basic Settings section.
- Choose Slideshow and click Update.
- Change any of the slideshow settings that you'd like to change and click Update.
- Make sure Page is selected from the Add display drop-down box and click Add display.
- Click on None next to the Path label under the Page settings section.
- Enter slideshow and click Update.
- Click on No menu next to the Menu label under the Page settings section.
- Check Normal menu entry.
- Enter Slideshow in the title field.
- Choose Primary links from the Menu drop-down.
- Click Update.
- Click the Save button at the bottom of your view.
- Go to
- 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.
Do you have any examples of implementations? Please share them in the comments here.
Comments
Video
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.
Scott Rouse
http://about.me/scott.rouse
Thank you!
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
Thanks, Nathan. I'll be at ZooTown next Monday for a Co-Working Session if you're available then.
-Scott
Scott Rouse
http://about.me/scott.rouse
Many, many thanks.
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
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
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~
Rick,
Nathan, Jennifer and I started campaigns last week on Facebook and Twitter. We are rooting for your family.
Non -rotating slideshow
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
Also the slideshow rotates when i preview it but wont display on the page in ordinary view
HTML permissions..
When creating the node, did you check to ensure you had full HTML enabled?
non rotating slideshow- still dont work
@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...
@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!
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
No problem using Taxonomy terms to select that. You'll just need to rework the View to make that happen.
Scott Rouse
http://about.me/scott.rouse
Yup - can do
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
Would love to see the end result. Best of luck.
Scott Rouse
http://about.me/scott.rouse
Looks Great, Now to Add Links
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
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.
Scott Rouse
http://about.me/scott.rouse
Still Looking for a Way to Link
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...
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):
<a href="[link-field-name]">[image-field-name]</a>
Let me know how that goes.
Scott Rouse
http://about.me/scott.rouse
I tried this and...
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
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
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?
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
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...
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
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...
...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
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.
Scott Rouse
http://about.me/scott.rouse
Link?
Is there a link I can take a look at it?
Thank you! Yes, here is the
Thank you! Yes, here is the link:
http://www.showitoff.net
Nevermind everyone! I figured
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!
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
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
@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
Scott Rouse
http://about.me/scott.rouse
Another advantage is that
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
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
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.
Doesn't seem to work??
I followed the instructions word for word, but under live preview all I see is
http://i.imgur.com/mAdFATU.jpg
Can someone please help me? What am I doing wrong?