For an upcoming Drupal website project, the client requested that they would like a Photo Gallery on their site that would contain a number of Galleries in one section, with each gallery easy to navigate through an be accessible from each other, without having to get lost going back and forth between them.
Previous Drupal Photo Galleries I have done have been quite simple and look great. Usually with each image in a gallery shown as thumbnails on a page which open in a Lightbox or Thickbox window. But with this new project I needed something a little different, and after searching around I remembered a website that had recently launched using Drupal, which had a great Photo Gallery that would be perfect for what I needed…. The Whitehouse’s new website http://www.whitehouse.gov/photogallery.
After checking out their Photo Gallery, it didn’t take long to realise the Photo Gallery could be easily replicated with just a few Drupal Contrib Modules. Don’t get me wrong though, I’m not saying the the Whitehouse’s Photo Gallery is simple and they just threw together a couple of modules and they had a Gallery. It looks like they have done some very nice work on it and added their own customisation to get it the way they wanted it. All I’m saying is that the basic functionality of the Gallery can be achieved with some Contrib Modules and a little bit of configuring and CSS.
I will split this Tutorial into two posts. This post I will go though how to setup the gallery, the next post I will run through how to display a listing of galleries with Ajax navigation and filters at the bottom of your Photo Gallery, similar to the Whitehouse’s Gallery – http://www.whitehouse.gov/photogallery.
Step 1. Download and install the following Contrib Modules.
- Galleria
- jCarousel
- cck (with ImageField + FileField)
- ImageCache
*Note: Check for additional required modules for any of the modules listed above to function, and download and install them also as instructed. Also, this Tutorial is based on Drupal 6 so you will need to download the 6x version of each module.
Step 2. Setting up the Galleria Module
- Create or choose an existing content type that will display the Galleria.
- Add an ImageField (called FileField in the “Data type” drop-down) to the content type in the “Manage fields” section.
- Set your desired configuration as per standard ImageField settings.
- Click the “Display fields” section for the content type.
- Change the output formatter for “Full node” and/or “Teaser” to display “Galleria”.
- Create a node of the content type you used in the previous step, upload a few images (say 10 or so) and view your node. The node should load displaying a large image with thumbnails with navigation.
Step 3. Setting your Galleria Gallery to us ImageCache
Now we want to use ImageCache to set how we want to display the large image and the thumbnails in our Gallery.
- Create a thumbnail preset to how you would like your thumbnails to look. Cropping, resizing etc.
- Create a image preset for your large image. Cropping, resizing etc.
- Go to the configuration settings for the Galleria Module at ‘admin/settings/galleria’.
- Under the section ‘ImageCache integration’, use the Dropdown to select the preset you created for the Large image and the thumbnails. Save.
- View your Gallery, it should now be displaying the images as per your presets. You may need to tweak your presets so have a play until you are happy.
Step 4. jCarousel
Now that we have our Gallery set up displaying a main image with thumbnails underneath which we can click and navigate through, we want to change it so that all the thumbnails display in a carousel which will enable a large number of thumbnails to be easily visible, like the Whitehouse’s Gallery – http://www.whitehouse.gov/photogallery.
- Go to the configuration settings for the Galleria Module at ‘admin/settings/galleria’.
- Under the section ‘jCarousel integration’ we can configure how we want the jCarousel to work. Set it to ‘enabled’, the other settings you will need to play with as it will depend on how many thumbnails you will want to show in your gallery and how you’ve setup you thumbnail preset.
- Save your changes.
Viewing your gallery – your thumbnails should now be using the jCarousel. If not, make sure you have added enough images to your gallery or check over your settings. You will most likely need to play around with the ‘jCarousel integration’ settings and also your thumbnail ImageCache presets and your CSS to get your gallery looking the way you need it to.
Hopefully, once you have finished playing with your settings etc. your gallery should now look similar to the Whitehouse’s Gallery – http://www.whitehouse.gov/photogallery.
Let me know if you have any questions about this tutorial and keep an eye out for Part 2 which I will post soon. Part 2 of this post can be found here – Adding a nice navigation to your Drupal Gallery
About Erin
Hi there
Thanks for the details steps. But I am lost, how do you display the gallery ???
Steps would be appreciated. Not technical minded here.
Thanks ?
Hi Al,
In Step 2. Setting up the Galleria Module, you will have created a new content type (or used an existing one) and in the last point created a node using that content type. If you then view that node after you created it, you should see your gallery of uploaded images.
Will this load all the images attached to the node at page load? What if I have 30 high res images in one gallery node? Is there any way to use ajax to load the images as needed?
Thanks for your post.
Unfortunately yes, all images (including thumbnails and the main images) will load. This Drupal Module is missing some support for the latest Galleria options. The module does however provide a preprocess hook and template files so it may be possible to implement what you are asking.
Hope you find a solution, as that would be a good thing to have. You can try and post your issue against the module on drupal.org and someone may have been thinking the same thing and could provide you with a solution.
thank you for this its help me an lot get an nice gallery on my drupal website i cant wait for part 2
Glad you found it helpful Martin, to view part two of this post please see http://www.ireckon.com/web-dev/cms/drupal/adding-a-nice-navigation-to-your-drupal-gallery/
Hi,
Which version of the Galleria module did you use?
I tried the dev version.
I wasn’t able to do the step 4, as enabling jcarousel in the Galleria settings doesn’t seem to make a difference. I cannot restrict the number of thumbnails and get the arrows.
Thanks,
Julien
Hi Julien,
6.x-1.x-dev was the Galleria version I had used, but this was over a year ago now so the current dev version is probably different. Enabling the Galleria settings should work, what version of jCarousel and what version of Galleria are you using? As jCarousel 2.x is not compatible with Galleria so this may be the issue you have encountered?
FYI – found a fix (sort of – still working on the fine tuning) @ http://drupal.org/node/984852#comment-3949404
Hi Jamie,
Thanks for the useful instruction. Btw, do you know how to integrate Galleria theme with the galleria module? I have been going through a few discussions on Drupal forum, but still cannot figure this out.
Cheers,
Borort
Hi Borort,
Sorry but I haven’t tried to implement any Galleria themes. I have only styled the gallery to suit the styling of the site it is being integrated into. Sorry I can not be of further help. If I do find anything I will post it here.
Cheers
Very nice writing. Do you know how to implement Galleria on Drupal 7?
Hi Beta, I haven’t tried implementing it for Drupal 7 yet. Galleria for Drupal 7 is still in development, but the best place to check if you are wanting some information about it would be the Galleria Drupal project page – http://drupal.org/project/galleria or the Galleria website – http://galleria.aino.se/
Hope that helps.
I really like this article about how to set up a gallery, but I’m stuck at the very beginning already. You say:
Create a node of the content type you used in the previous step, upload a few images (say 10 or so) and view your node. The node should load displaying a large image with thumbnails with navigation.
But the only way I can upload multiple images is when I create multiple nodes. 1 node per image. You say “view your node”.
Should I make a field for each image or sth? Hope you’re still checking out the comments here cos so far this seems the best/easiest way to make a gallery!
Hi Tim. In the settings for your image field on your content type, under ‘Global Settings’, there should be a field called ‘Number of values’. You can set this to ‘unlimited’ to allow as many images as you need to be uploaded per node.
Thanks man, a very helpful explanation. The original documentation is down, so this is just what I needed to get me going. Karma +1