May 20, 2009 Information

A fully manageable image slideshow for your home page with Drupal

As my first blog post here, I’d like to start by thanking the Agentic team for their great support of the community, and for letting me to take some time on the side to contribute or work on open source projects like FluidGrid or Basic.Homepage slideshowThis is something that almost every client wants for their landing page nowadays: a nice rotating image slideshow that they can update themselves. And the more I build this, the more I realize that clients expect full control over this, and that most of the solutions out of the box in Drupal aren’t as flexible as they could be.When I say “solutions out of the box in Drupal”, I’m talking about multiple modules that when combined with Views allows you to create a slideshow very quickly. The first ones I can think of are:Views Slideshow – Views Slideshow can be used to create a slideshow of any content (not just images) that can appear in a ViewViews cycle – Views style for using the jQuery cycle plugin.Views Rotator – Views style plugin to display items by rotating through the items displaying one at a time.but so many other exists…When I want to see a full list of these modules, I practically always go through the same process… As I can never find the comparison page on Google (I must be cursed or something), I google ‘katbailey’ to find the blog of my friend and ex-coworker Katherine Bailey, where she posted a link to a page she created on drupal.org, where she compares most of the existing modules that can create a slideshow.I know, I could also bookmark the page in Firefox, or Delicious… but then I wouldn’t be able to talk about Kat’s blog, or the amazing work she does for the drupal community 🙂 !Anyway, after testing ALL of these module, I realized that the only way to get something close to perfection is to not rely on only one module, but to create a system using a combination of several modules working together to create complete awesomeness. The system we’re about to build doesn’t require any code, and will allow you (or your client) to create new slideshow images, re-order them, crop them, and automatically customize the final rendering of the images. It uses the following modules, all of them available for Drupal 6, and some of them already in core of Drupal 7 (so it might be an easy to upgrade solution) :CCK (content) – to customize the content typeFilefield – to be able to use imagefieldImagefield – to add an image field to the content typeImageapi (with GD2)- to be able to use Imagefield Crop and ImagecacheImagefield Crop – to let the user crop the image, also used to restrict the final dimensionsImagecache (optional) – to be able to use imagecache actionsImagecache Actions (optional) – to add a nice overlay if neededViews (with Views UI)- to list the images in a blockViews Rotator – to create the slideshow (of course you can also use some other modules, but I like this one as it’s very simple.)Draggable Views – to let the user rearange he order of the images.I know, this is a scary list of modules, BUT, most of them are used in practically all of the websites we build, so these modules are kinda required anyway, whether you build a slideshow or not.Install modulesThe first thing to do is to obviously install all the required modules in your Drupal site. Installing them from top to bottom of my list shouldn’t cause any trouble. Not much configuration is needed at this point.Create the Content TypeFirst, we’re going to create the content type used to create the images to display in the slideshow. It’s the simplest content type ever, as it doesn’t even require the body, that you can deactivate by deleting the body label when creating the content typeThe only thing it needs is a title (not even actually, as you could use this module (Auto Node Title) to avoid having to enter a title), and an imagefield. After adding the new content type in /admin/content/types/add, go to ‘manage field’ and add a filefield // Image with cropping.When adding this field, the only things you need to edit is The resolution to crop the image onto, that should be set to the final dimension of your slideshow (I set mine to 620×290) and remember to make this field required, in the Global settings.I would suggest as a good practice to always set a path for file fields, but this is not mandatory. Once you create this field, your content type is ready to rock! You might want to tweak the display settings, but it’s not mandatory either. Now that the content type is ready, we need to create a slideshow to display it, and that’s easily done with Views.Create the slideshow block with ViewsI’m assuming here that you already worked with Views, and that you know how to use it. (If not, have a look at the online documentation before going further with this tutorial.)Create a Node listing views, and add a Block that will list Fields. The only field to add is the imagefield of the content type you just created.Make sure that you remove the label, and that the format of the image is ‘image’.Set the style of the view to be Views Rotator, or any other rotating plugin you chose. I set the time to 2 seconds so I can quickly check if the block works. Don’t add any pager or Ajax, but maybe set the limit to 0 (no limit). As usual, set the filters to only published nodes of the appropriate content type.Last but not least, set the Sort Criteria to “DraggableViews: Order” (leave it to ascending). This is to order the images depending on the order set by a second view that we are going to create soon. But before, let’s save the view and add some images to test it a bit.Create some images and test the blockTo be able to tell if the block works, we need some images. When uploading an image, you should see the imagefield crop in action. Crop the image to your preference and save the node. Do this with few other images.You might notice that there is a little clearing bug in the cropping tool, that overlaps the preview. I believe that this will be fixed in the next release, and it’s not that big of an issue here.After creating some images, go to the block setting page, assign the view block you just created to the region of your choice. Once assigned, you should see your slideshow block displaying the images with smooth transitions. Until here, nothing magical, but still, it’s pretty cool.Now we can introduce the magic, and have a ‘re-order’ page for our beloved clients.Create a draggable view to reorder the images in the slideshow.We need to add a new display in the view we created that will be used to reorder the images. Go back to editing the view and add a page display. Do the following in the right order :Give a path to the pageOverride the Fields (click on “Fields”, and then “override”, save.)Remove the imagefield from the fieldAdd a field titleAdd the “DraggableViews: Order” fieldOverride the styleof the display page to “Draggable Table”Set the Order Field to “order”Save the view.Now if you go to the page view, you should see a draggable table. If you change the order of the nodes, it will modify the order of the images on the slideshow block! So you only need to create a link for your client to this page, and he should be able to re-order the images all by himself at any point.Adding AwesomenessAs “Po” said in “Kung Fu Panda” : There is no charge for awesomeness – or attractiveness !You could leave it as is, but here are some minor tweaks you could do to make the system even better.Improvements on the draggable view: More links and an image thumbnailYou will first need to make sure that you have Imagecache installed. A great feature for the draggable view would be to add a preview of the image you’re working with, because if you’re like me, you don’t always give the best descriptions for the uploaded images, and end up organizing “image 2” and “image 3″… not very meaningful. So the easy thing to do is to create an imagecache profile that would create a thumbnail, and display this in the draggable view.To do this, go to the imagecache setting page, add a new preset using “scale and crop” to dimensions like 50×50. Once created, go back to your view, and in the page display, add an imagefield using the newly created imagecache preset (leave the label this time). And of course, you can add as many useful fields as you want! I usually add some useful links like “view”, “edit”, or “delete”.A tiny cup of NirvanaThis last part is my favorite. I’ve recently played a lot with the great Imagecache Action module, and the possibilities are huge! As a quick example, I’m going to show you how to overlay the slides with a nice shadowing effect.For this you will need some extra super power: Photoshop. We need to create a transparent image that Drupal will automatically overlay on each slide. For this example, I just created a simple shadow effect, using the ‘inner-shadow’ effect on a transparent layer. There are billions of ways to do this, so if you don’t know how, ask to the closest designer you can find, who’ll do this in seconds. The only mandatory thing is that the overlay image needs to be at the same dimensions as the one you set in the imagefield crop settings (so for me 620×290).Once you have your overlay ready, create a new imagecache preset using “Add Overlay: file image to canvas (watermark)”. In the settings, set both positions to 0, and opacity to 100%. Then give the path to your PNG image.Go back to editing your view, and for the BLOCK display, change the format of the image field to display using the overlay preset you just created. And… well that’s it ! Now all your slides should have a nice shadowing effect added to them! And of course, as the PNG is blended to the image, it totally works is all browsers, even the ones not supporting PNG transparency (I won’t name any, but you know what I’m talking about…)It doesn’t stop at simple shadowing effects. You can add rounded corners, color shift, black and white etc… Make sure you take a picture of your client when he first discovers what you just built for him :)N.B. : You can find a nice recipe for the mini cakes used for the slideshow here.

Author: Hubert Florin