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.

Hi ! This tutorial is really useful, I was able to set up a little gallery.
Now, when I open the lightboxes, under the pictures there are 3 rows of text : View image details / Download original and Image x of n. How can I remove those 3 lines and just put the title instead ?
Af for the the border around the thumbnails, I read below that it has to be done through CSS, no other way at all ?
Thanks a lot !

@DADAMO, Yes the borders have to be done in CSS. As for the text in the lightbox, normal users won't see the View image details / Download original image if they haven't got permissions. With Drupal it is a good idea to have 2 seperate browsers with one of them acting as an anonymous user so you can see how most people will see the site. You may want to try Shadowbox rather than Lightbox2 as it has less information and would fit with your theme a bit better.

@Tuttle, that is what I meant, I don't think you can have all the images appear in the lightbox slideshow without the images being on the page to start off with which means the pager would have to disappear. I am sure there probably is a way around it, but not easily within Views.

Followed the tutorial step by step and it doesn't work. Nothing displayed in gallery or even individual content pages after file uploaded. Seems others have the same problem (after reading comments)

If so many people have the problem, please remove and/or update your tutorial until it's sorted out and it doesn't keep happening to so many people.
It could possibly be more unhelpful than helpful at the moment.

@Gary, The tutorial works for the vast majority of people. The reason it doesn't work for you and some of the others will be down to your webserver/drupal configuration. The fact the images don't show even on the individual pages then it is likely imagecache isn't working properly. I imagine your files folder isn't fully writable. Are the images created?

Great tutorial. Thanks for sharing you info and technique. Got it up and running in no time. Thanks James.
For people who can't see an image thumbnail. Most likely cause is that Imagecache is not working. Most common reason for Imagecache not working is that 'Clean URLs' are not enabled. IMPORTANT: for this technique to work, 'Clean URLs' needs to be on (or imagecache won't work, and the gallery won't work). Brillaint!

Hi
The tutorial was good........
But dint work for me... I did all the settings as per the tutorial... But there are no images on the page.. even in the source code there is no html for images... :-(
I have clean urls enabled...
Files folder is writable... I did upload the image before submit...

firstly let me thank you for the great tutorial. Everything works out perfectly. However, when I log out and try to view my gallery as non registered viewer, no pictures appear (The Gallery, called Berlin, appears, just the pictures are not shown).

Neither would be suitable for what you want by the sounds of it. All you need is the imagefield on your blog content type and set up a view pulling out the images. Not sure how you would do rating of an image within a blog post though.

Those struggling with getting the images to appear need to go to the permissions page and look for content_permissions module. Tick the boxes for view field_image (or whatever you named it) and the images will appear. Make sure the other permissions for Lightbox and Imagecache are ticked as well.

thanks sir it is work now ,but now I have a problem with the lightbox 2, after I enabled the module in drupal, it cann't show for the lightbox, I confused it , and the format I have changed it, to lightbox 2-->thumbnail-->lightbox, but it cann't show the picture and the lightbox, and If I changed the format to image links to node, it can show the picture,now what must I do?

ic ,thanks sir for the explanation ^^, I want to ask something sir about how to make drop down menus ,because in my themes is cann't show the drop down menu, and it is my file in page.tpl.php : http://pastebin.org/163734,

yes sir for the menus nice_module is can work on it ^^, but there is something bug in the primary links sir, after I enabled the module nice menus in drupal there are LETTER PRIMARY links in my menus, how to delete the letter PRIMARY Links in my menus sir? this is the nice_module files :http://pastebin.org/167037

I also followed this and did not get any images on my page. I checked the source code and when hovering over the in firebug, it would not load so I checked the path and the folder for "thumbnail" that we created in the Imagecache step was not there. I'm wondering if it was created somewhere else? I'm on a localhost and it won't let me enable clean URLs. Is this the problem? Once I created the folder myself and added the picture, the image loaded on the page, but it was not cropped and scaled.

I also followed this and did not get any images on my page. At the time of attaching a image to the node itself, the image was not shown. It only had shown a thumbnail, but when i tried to preview it or save it, the node was blank. it had no images and so the view also could not retrieve the image. What is the problem admin??? My cleanurl is enabled and i'm working on a localhost.

I'm noticing the tage Image: infront of all my pictures when I browse to www.thunderpunch.net/gallery but when I edit the view the preview does not show these labels. If I go under fields and change the label to widgit default: image then it shows up under the preview. Any ideas?

I think it is necessery to correct an error in this bundle of modules.
installation on native drupal runs without problems, the path to the images-thumbnails created, but on fact such images on the server like the folder structure does not exist. when resized thumbnails, even if the folder structure was created, it is removed. rights to "files" were exhibited and 775 and 777. Sorry for my English.

First of all, thanks for a great tutorial. It has really helped me move forward immeasurably.

Second, in my gallery, I have set up Views exactly as you did and have gone back to re-check about ten times. The images in the gallery are appearing in duplicate and in a vertical column even though I have set everything to horizontal as you have in the tutorial.

I read many tutorials on gallery's and they always seem so overly complicated with views and cck fields. I found the best way is to use just the TinyMCE, IMCE and Lightbox2 modules.
I just create a standard page, insert a table, set it to 100% width and give it a background or what-not then simply click the insert image icon and browse to the image on your harddrive to generate the image (which it automatically crops and creates thumbnails to the users specifications), highlight the thumbnail and click 'insert'. Select the lightbox2 class (which you would have created when installing lightbox2) then click the 'link' icon and link it to the original image. Two minutes later I have a gallery which is fully editable and easily manipulated by anyone I allow...