Few days ago, I was chatting with EclipseGC about his imagefield gallery module, and the future features that will be implemented for the release of the drupal 6 version. Of course, you can't have two drupal addict like us to talk for more than 2 minutes without having Views 2 mentioned at one point. But this time, Kris described a technique to create an ajax image gallery system using views in a quite simple and awesome way. I think he got this trick from Quicksketch, that himself must have got it directly from god, as it's so simple it's beautiful.
[Screenshots originally included throughout this tutorial.]
I felt really dumb that I never thought about it before, and now it's your turn to feel dumb... here's it how it works:
For this gallery system, you need :
- Drupal 6
- Views 2
- CCK
- Imagefield
- Imagecache (optional... but is imagecache optional, really?) which also needs the ImageAPI module
The concept is the following: having a content type with a multiple value imagefield, that are hidden in the node, and listed in a view block that you can display wherever you want.
CCK
So first, of course, install all the required modules. Once they are all installed and activated, go to /admin/content/types and create a new content type that you can call "gallery" or "album"...or whatever you want really!
Then in 'manage field', add a new field with the type 'image'. This image field should have a number of values set to either 'unlimited' or to at least '2'... obviously... Most of the other settings are up to you. It would make sense to have this field required, but I seam to have missed this when I did this screenshot...
Then, in the 'Display fields' tab, make sure that you set the 'full node' view as <hidden>. We're hiding this field by default because we will be outputting the images in a view block that we will place right beside the node.
Once you've done this, your content type is pretty much ready to go, we now need to create the magic View. Of course, by using a custom content type, you open your gallery to all the flexibility that the CCK module offer!
ImageCache
Imagecache will make sure that your images are resized to the right sizes for the gallery. You have to create two imagecache profile: one to resize the images when viewing them in the gallery, and one to create the gallery thumbnail. First go to /admin/build/imagecache, and click on 'add a new preset'. Pick a name and then add the action to perform. For the viewing profile, I chose the "Scale" action set to a width of 600px, a height of 300px, and optionnaly you can allow upscaling.
For the thumbnail of the gallery, I chose the "Scale and Crop" action, set to 200px by 200px. Of course, you can adapt this settings to your needs, but you need at least these two profiles before mooving on to the view settings.
Views
You now need to create a new view using the Views 2 module. Go to /admin/build/views/add, choose a name and description for your view, and make sure you select 'Node' for the view type. Then click 'next' to set up the view. The important basic settings that you need to have are the followings:
- Style: Unformatted (just to make sure the output is simple)
- Row style: Fields
- Use Ajax: Hell Yeah!
- Use pager: Mini (or full, but you need a pager)
- Items per page: 1
So it should look like this:
[Screenshot of the view settings originally shown here.]
Then you need to select one field to output, so in the filter section, click on the '+' icon, then select the 'content' group. You should see the image field that you created for the gallery content type listed there. Select it, and then click on 'Add'. I usually hide the label of the field. Make sure you select the right imagecache profile to output the image. It should be the 'viewing' profile you set earlier. Also make sure that the image is not as a link, but just as a plain image.
You will also need to Set some filters, so in the "filters" section, click on the + link, and in the node group, add Node: published (set as YES), and Node: Type (set as your gallery content type).
Once you're done, there is a last thing you need to do, it is to set an ARGUMENT. As the view is not the node, it doesn't know which node you'll be viewing. So basically, the idea is to ask the view to check which node we are viewing by looking at the URL of the page. For example, if we are viewing the node number 198, the URL should be like this: /node/198 . If the view knows which node we are viewing, it also knows what images have been attached to the node. The beauty of this is that it works even if you use the Pathauto module, as the view knows if the URL is an alias of the node or not.
So click on the '+' link of the argument section, and select the Node: Nid (node ID) argument. Thanks to the hard work off Merlinofchaos, arguments are now very easy to set up. You are going to tell the view to find the node id in the URL, and that means that you are going to provide the default argument, so select "provide the default argument". Once you selected this, you should see a new list appear. In this list, select the value "Node ID from URL". Once this is done, you only need to check the node type you want to act on, so if your content type is called 'gallery', check the box in front of 'gallery'.
That should be the last default setting you need to set, and you now need to add a 'block' display. The block should get all the default settings you already set. Save the view.
Block and region
You now have a gallery content type, and a block view to display the images, but you also need to place the view block in the appropriate region of the page. I created a region right on top of the content of the page, and dropped the block in it. If you don't know how to create a custom region, read this: http://drupal.org/node/292028#comment-1027837
Test drive
Now you just need to create a new gallery, and when viewing the full node, the view block should now show each image one by one, in the dimensions set through imagecache, and with a nice little ajax pager to browse them. You can now enjoy all the Views 2 theming possibilities to theme your gallery.
A gallery page.
If you need a page that lists all the galleries, you just need to create a page display in the view, and make sure that you override the view default settings, so the page display does not have any argument, and that it lists more than one item of course :) . Maybe you might also prefer to use a 'grid' style to display the albums.
Embedding the view in the node template
Another nice little trick is to actually embed the view in the node template. This way you don't have to create a region just for the gallery system, and it is so simple that it would be a shame not to do it this way! The only thing you need to do is to edit the node template of your theme, and paste a little snippet of code that will tell drupal which view and which display to embed. The code is like this :
<?php print views_embed_view('view_name', $display_id = 'display_id');?>
Just replace the view_name by the name of your view (the name of your view is shown in italic characters in the title of the page when you edit it), and replace display_id by the id of your display. For example, if your display is the first block of the view, its ID is block_1 .
So for my view, this is the snippet I had to paste in the node.tpl.php file of my theme :
<?php print views_embed_view('gallery', $display_id = 'block_1');?>
There you go, you now have an easily themable ajax gallery system on your site ! I wouldn't say it is the perfect solution as I would prefer each image to be nodes, but this would require some module development, and that's not an option when you are a simple designer like me!