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.

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

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.

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

For now create 3 or 4 images.

Under /admin/content/node you should now have some 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.

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

Under Path set to gallery.

Press Save.

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

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

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.

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 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?

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 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."

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.

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.

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?

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!

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?

@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.

@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...

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.

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."

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.

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.