Create a simple image gallery in Drupal 6 using CCK and Views

This tutorial will guide you through how to create a simple gallery within Drupal 6 using CCK, Views and a few more custom modules.

This tutorial was written with the following versions of Drupal and modules:

Update: Modules have been updated to the latest versions as of 20 April 2009, version numbers are in brackets after the links above.

Installation

Install Drupal as you normally would and extract each of the modules to the /sites/all/modules directory. You should have a directory structure like the following:

directory_structure

When logged in go to /admin/build/modules and enable the following modules:

  • Content
  • Filefield
  • Imagefield
  • ImageAPI
  • ImageAPI GD2 (unless your server is configured for Imagemagick, then enable the ImageMagick module instead)
  • ImageCache
  • ImageCache UI
  • Lightbox
  • Views
  • Views UI

Once you have ticked the modules, press Save configuration.

Imagecache

We need to create 2 presets for our images, one will be a thumbnail to show in the gallery and a second to show within the lightbox.

Navigate to /admin/build/imagecache and click Add new preset.

Set the preset Namespace to thumbnail. Click Add Scale and Crop, set the width to 180 and the height to 120.

Then create a new imagecache preset with the name lightbox. This time select Add Scale and set the width to 800 and the height to 600.

CCK Imagefield

First we will set up a new content type for our images which we will call Image. Navigate to /admin/content/types and click Add content type.

Set the name to Image and the type to image.  You may enter a description if you wish.

Under Submission form settings, delete the text from the Body field.

Depending on how you want to set up the gallery, you can change the Workflow settings so that images aren’t automatically added but are added to an approval list, for this tutorial we will make all images published, so untick Promoted to frontpage and leave Published ticked.

Under Comment settings, set comments to disabled.

Save the content type.

Next to the Image content type click manage fields. In the Add New field area, set the label to Image and the field name to image (to make it field_image), for the Type of data to store, select File then for Form element select Image.  Press Save.

content_type

Under Global settings, tick the Required box and set the Number of values to 1.  Leave the List field and Description field to Disabled.

imagefield

Then press the Save field settings button.

Now click the Display fields tab at the top of the page.

Set the Label to Hidden and set both the Teaser and Full node to Lightbox2: thumbnail->lightbox.

imagedisplay

Now under /node/add/image we can add an image to go in to our gallery.

newimage

For now create 3 or 4 images.

Under /admin/content/node you should now have some nodes.

nodes

Now we will set up a view to display these nodes in a gallery.

Views

Navigate to /admin/build/views and click the Add tab at the top of the page. Set the view name to something like gallery. Leave View type set to Node.

Set the title to Gallery. For Style set to Grid then chose 4 columns and set Alignment to Horizontal.

For Use pager set to Full pager.  Then for Items per page, set to a multiple of 4, I am going to use 16 to give us a 4x4 grid of images. If you wish, you can set Use AJAX to Yes to stop the whole page being loaded on the pager.

Add the following Filters:

  • Node: Published = On
  • Node: Type = Image

Under Fields select Content: Image (field_image). Set Label to None and change Format to Lightbox2: thumbnail->lightbox.

Under Sort criteria you can set this to what you want.  I am going to set them to newest first. Select Node: Post date and set to Descending.

galleryunsaved

On the left select Page from the drop down and click Add display.

Under Path set to gallery.

viewpage

Press Save.

Now if you navigate to /gallery you can see your gallery in action.

gallery

Once you upload more than 16 images which we set our Items per page to, a pager will appear.

full_gallery

Update: There may be cases where the image isn't uploaded to the image type when a user submits the node add form without uploading the image. This will show up as an empty section within the gallery and the node will be submitted with no image, but Imagefield will not tell the user that this is a problem even if it is a required field.

To stop these empty image types showing in the gallery, you will need to add a relationship for the image and set it to a required relationship. This way the image node will not appear in the gallery unless there is an image attached. You could then set up an additional view to find out which image nodes don't have an image attached.

relationship

Comments

hi
very nice explanation exactly get the result.Thx

Awesome, saved me a ton of time. Thanks for writing this up!

Hello,
First all all I would like to thank you for putting this tutorial together because it has really helped me (a beginner to drupal) to get my gallery site up and running without problems !

Ok now I would like to have my images filtered by category. I had a look online regarding using the Taxonomy module to filter my images, but got lost on the way. I setup taxonomy module but couldn’t get the dropdown menu(to filter my images by category) to appear on my Gallery page. I set the Filters prop. of the Gallery view to NodeType=Image..Please help !!!

thanks

Hi,

Thanks for the tutorial, I searched a lot of them and your gallery looked the best and the instructions the easiest. I made this gallery and it almost works, but when I click on the thumbnail the lightbox doesn't come up; instead a huge dark box appears at the bottom of the page and then the photo shows up underneath! All the modules are up to date, any idea what could cause a problem like that?

Paul
www.kinlayhousecork.ie/gallery

@Paul, it looks like there is a problem with your custom theme somewhere. The lightbox stuff is loading up OK, so I assume it will be something in your CSS.

efyuze,

when you're in Views you need to add your relevant taxonomy vocab in 'filters' and expose it. Once that's done you need to change your 'Exposed form in block:' option form 'no' to 'yes' under the 'basic' settings' menu.

I hope that helps.

Hey.
thanks for the great tutorial, it helped me alot
but,,,,I have a problem in the thumbnails display
as you can see in the link below
http://www.ironi-alef55.org/gallery

the thumbnail are too close to each other.
how can I fix that ?

I have set the path name to /gallery but after saving this when i go to url, browser display this message "Page not found"...
At the time of saving the view browser display this message "Display Page uses a path but the path is undefined."

Plz help me.

Thanks ... nice tutorial

@Shelly, It will be down to your theme, alternatively you can use less images per row to spread them out a bit.

@Kingfisher, Did you definately save the view after setting the path?

Excellent information, thank you.

This was the first tutorial that worked for me as far as Drupal was concerned. But it seems pretty painful to upload a plethora of images. Is there a way to facilitate more images at one time? I've got a lot I need to get up but just uploading the 4 for this demonstration took minutes individually.

Awesome job though.

@Justin, Yes you can upload multiple images at one. You will need to use the Image FUpload module and use that rather than the CCK Imagefield.

Thank you very much for this useful tutorial!!

Paolo

you rock dude. I have been looking for this solution way too hard. node gallery... views attach... gallery2... acidfree... blah. This is the simplest way. I will now use panels 3 to create the style i want. awesome.

Veri good tut for me!

Thank you!

Hi. Having a problem. Under the CCK Imagefield area I was successful until this line: Now under /node/add/image we can add an image to go in to our gallery.
I cannot make that Create Image page appear! Everything else to that point worked fine. Anyone else have that problem?

What did you call your image node? Alternatively, rather than using that URL use the Create content menu item in the navigation menu.

Thanks for giving that kind of clear demo.
:)

Hi - I hear all the great compliments, and so it makes me think I've done something wrong. When I try to display my gallery I get a Fatal error: Call to undefined method views_plugin_cache_none::post_render() in /ftp/pub/skygal/drupal/sites/all/modules/views/includes/view.inc on line 855. In going to line 854-856, I find this:
if ($cache) {
$cache->post_render($this->display_handler->output);
}
Can you point me in the right direction?
Thank you!

@Linda, That will be a problem with your installation. Try downloading and updaing views.

Huh. Would never have thought of that! Thanks - I'll give it a try.

This is a great tutorial. I'm looking for this and a bit more though. I would like to have multiple galleries and a page that lists a thumbnail and a description to access each gallery. Is that possible?

Why are there sooo much complexities to adding a simple gallery in Drupal??

It takes eight modules to do this?

@Brian, Have a look at my Create an album based image gallery in Drupal 6 using CCK and views tutorial on how to do that.

@nexus74, No, it doesn't take 8 modules to get a simple gallery in Drupal. It takes 8 modules to create a simple gallery using this method which allows a lot of customisation. There are modules that do galleries in Drupal with one module, but this allows flexibility and can be changed to work in many different ways.

Thanks! - found it, and will give it a whirl this evening. Is there a link to the result? Is the section after - http://jamestombs.co.uk/2009-06-25/creating-a-grid-of-images-for-an-albu... necessary, or can the grid view be modified via the view?

Thanks for your well documented tutorials and quick responses!

@Brian, I think you can do it through the view, but you would have to look for some sort of node override within Views. The grid using PHP is a way to do it, but like with most things Drupal there are many ways to most things. Sorry, no link to a demo, it should look very similar to the simple gallery except with the description/gallery title under/above the image.

@admin, thank you for your response. I thought there would be one module as well. However, when I tried this before I knew about this tutorial, It seems like I still had to download one module after another...

I'll look into it more.

Nice tutorial.... easy to learn basic concept

So I finally did my upgrade and the gallery magically appeared! Still needs work, but at least I have something to work on, now. Thanks so much for the help!

Excellent Tutorial, Easy to follow!

Few follow up queries about added functionality..

How hard is it to create multiple galleries? Rather than having just 1 big Gallery i would like it that my user could create a gallery and then stipulate which gallery they can upload the files to.

Another query is, what is involved in having a comment box, much like this one, where users can comment on single images?

Whoops. noticed my first question is answered in another tutorial on this site! How silly of me.

hey, why there is a broken link of images appeared in my page..I cant see the imgae I have uploaded.

@sam, make sure you have write permissions to your files directory.

Great, great, great...

Tks a lot!!!

Thanks so much for this tutorial, I'm going to look into the album based one now!

I have one problem though, I don't get the previous/next links in the Lightbox popup.

Thanks for the tutorial - the output is exactly what I was looking for, and easy to theme for my website.

BUT, I have a problem - the images I uploaded when into /default/files and /default/files/imagefield_thumbs instead of under imagecache. The thumbnails, etc are generated correctly but put into the wrong directory. I've been through the tutorial twice. Any thoughts?

@Jeff, I have looked at your site and your images are being created in the imagecache directory. When you upload an image using CCK Imagefield it is placed in your files directory unless you specifiy another directory within the CCK field settings. Copies of the image are created in the Imagecache folder with the settings applied to the image.

Any ideas on how to get captions to show up, either in the main gallery or in the Lightbox popup?

@admin - regarding the path problem: my fault, I didn't see there were older pages of comments. The changing of the file system to "private" fixed it on my test system. Thanks!

I got everything to work correctly; however, there is no paging going on. Pager is set to full, ajax enabled and 9 items per page.

There are around 45 images total and all are viewable in admin/content and all show up if I set total number per page to 45.

It just seems page 2-5 (with my current 9 img per page setting) won't load.

Any thoughts? Oh, and thanks for the outstanding tutorial!

@bstrange, I can only assume it is down to your theme. Try setting it to Garland and see if the pager shows up properly.

Sir i want to help, while using this image gallery i encountered with the some problem .I m anable to create new preset.while on clicking add new preset it showing the following warning

"warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'imagecache_ui_preset_add_form' not found or invalid function name in D:\Apache\xampp\htdocs\drupal-6.15\includes\form.inc on line 372."

please help me out

the theme *IS* actually garland with heavily modified graphics to give the appearance of a custom theme. No significant changes to css or additional files added.

Lol, boy are you the smart one :) It *was* the theme...well sortof. I modded all the graphics to give Garland a black background....

(cough) pager numbering is black (cough)

Boy do I feel stupid :P

Thanks again for the GREAT tutorial and help figuring this out!

Ok this is probably a stupid question, but do you have any idea how I would place a very thin border w/padding around the thumbnails? I am pretty sure it would be done through css, but I'm not sure where to start.

@sheta gusain, looks to be an issue with Imagecache. Make sure the correct version is installed for your Drupal installation.

@bstrange, depends on what you called your view etc, but the following css should work:

.view-gallery .views-field-field-image-fid img { border: 1px solid #c00; padding: 5px; }

That will add a 1px red border with 5 pixels of padding between the thumbnail and the border.

check out the instructions on post 12 on this forum post.

once you do follow those steps, you need to have the field in your view use "Lightbox2 iframe: thumbnail->node page". then, copy the page-node-lightbox.tpl.php into your theme and take out all the wrapper stuff.

When I klick on an Image in the example gallery, two different interactive (Javascript?) galleries pop up. Rather strange.

Pages