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.

Hai sir , I have some question about this section about Create a simple image gallery in Drupal 6 using CCK and Views, and now after I try it is work on it, but the trouble sir is like this :
in the basic settings in items per page =16, and now after I try on it, it is appear 16 pictures on this page, but the trouble sir, is in lightbox after I click on the picture 16, there is cann't navigation right on to going in picture number 17, only just I must to click navigation paging 2, so it is can start again for the navigation right on the picture, how to solve this problem sir??,

i done all this but when i upload a file there is no image. when i see the fire bug i read the src and when i see there is no folder of lightbox and thumbnail also. i manually create these folder. whats happend. please tell me. and 2nd thing is the images upload here sites/default/files and the thumbnail upload here sites/default/files/imagefield_thumbs. i cant understand what is this happened. please tell me where the problem is

I am having an issue creating separate links to other image galleries from the original gallery. Basically I want to create an album. I did try your album tutorial, but it didn't turn out very well for me. If I could do this, it would be perfect.

It's a good tutorial, i can followed this without any difficulties. But i have problem with the result. The images are shown in actual size instead of in thumbnail size. I wonder where's the problem. Could you please help me with this problem?? Cause i can't find the problem.

Hi James, you kindly pointed me at another one of your tutorials for me to look at how to display a set of images associated with nodes. I'm making progress using this tutorial and have run into a problem that @Sandeep posted. I changed the view to thumbnail -> Original and got that to work. However, I don't see the thumbnails on the page, only the titles as links (which is all I got when I had it set to thumbnail -> lightbox. Any ideas as I don't think it's a memory problem that @Sandeep later posted.

Yep, clean URLs are enabled. Have flushed the cache too, so not quite sure what's going on here as even with changing it to thumbnail -> thumbnail, I'm getting the lightbox effect! Will have another go this evening

Have you looked at the HTML source to see if the thumbnail image URLs are correct? I assume there is nothing in your report log in Drupal? I remember having this problem ages ago on a test site where it had worked before and ended up using Thickbox rather than Lightbox.

Hi James, yes the URLs look as if they're right and I'll check the logs to see if I can pin it down further. With the thumbnail > lightbox set up, the imagecache path was shown but the images aren't being added so might be a permission thing going on preventing them from being saved there. Thanks for the tip about swapping to Thickbox.

Great tutorial, James. Hope one day I can be as effective helping others gain skill by writing comprehensive tutorials.

I am having a slight challenge though. How does one set the path, either for imagecache or Lightbox? Midway through configuring and adding some image content I started to see preview links popping up but all of my links are broken.

The Lightbox part of the URL is the imagecache preset, if this isn't being created automatically then your files directory probably isn't enabled, and/or you haven't got Clean URLs enabled which is required.

Thank you so much for the advice!!!
It worked for me too! My site currently is in development and I experienced the problem with missing thumbnails. I though that this some sort of bug in Image API.
Private uploading method is the solution.

I have gotten to the part where it says "
Set the Label to Hidden and set both the Teaser and Full node to Lightbox2: thumbnail->lightbox." which i have done but i can't seem to find the part where it says "Now under /node/add/image we can add an image to go in to our gallery.
". pls forgive me I am a newbie

Great tutorial.
I have reached the point where I was on managing the the fields where you say "set both the Teaser and Full node to Lightbox2: thumbnail->lightbox."
My Problem is I could get 'Lightbox2: thumbnail->lightbox.' in the drop down menu so I chose Lightbox image for both Teaser and Full node.
When I go forward to upload images I get the following error message.
"
MyAn HTTP error 0 occurred.
/eityconsult/?q=filefield/ahah/image/field_image/0
"

I need to basically do what you did in this tutorial, but instead of linking to a lightboxed image, I need to have the small images link to a page pertaining to that particular image. However, I can't seem to wrap my mind around how you would go about doing that