Imagecache

You may wish to create more presets, but for this tutorial we will just create 2, a thumbnail for each image and a larger lightbox image.

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 300 and the height to 200.

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

We will need to create a content type that we will use for our albums. To keep this simple, I am calling mine Album with the machine name album.

Navigate to /admin/content/types and click Add content type.

Under Submission form settings, set the Title field name to Album name and set the Body field label to description.

Save the content type.

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

You may need to set the Permitted upload file extensions. By default mine was set to txt. Change this to jpg gif jpeg png.

Under Global settings, tick the Required box and set the Number of values to Unlimited. Leave the List field disabled and set the Description field to Enabled.

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/album we can add some images to go in to our album.

For now create 3 or 4 albums.

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

Views

Navigate to /admin/build/views and click the Add tab at the top of the page. Set the view name to something like albums, leave the View type set to node and click Next.

Set the title to Albums. For Style set to Grid then chose 3 columns and set Alignment to Horizontal.

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

Set Label to None and change Format to thumbnail image and set the Show value to 1 value. Tick the box that says Link this field to its node, this will allow the image to be clickable. Press Update.

For node body, delete the text in the Label field and press Update. If you have used long descriptions for your albums, you may wish to use the Trim this field to maximum length to limit the length of the description.

For title, delete the Label text and tick the box next to Link this field to its node, press Update.

At the moment Drupal has these fields in the wrong order, so you will need to click the up and down arrow next to the + button on fields.

And reorder the fields in to the following order: Image –> Title –> Body or if you wish you can keep them how they are.

Tick the box that says Require this relationship and set the Delta to 1. This will check to make sure that the album contains at least 1 image. Setting Delta to all will result in odd behaviour in the album due to duplicates.

If you wish you can add some sort criteria so that the newest albums appear first etc.

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

Under Path set to albums.

Press Save.

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

For your album nodes, you can modify them however you want to get the display you are looking for, whether you use Panels or create a custom node-album.tpl.php is up to you.

thanks for this one! i tried the whole thing with a batch-upload (Image FUpload module) and it worked as well by changing every instance of the image-field to an FUpload-field, eg. in the view settings change it to content: FUpload and get the fid of FUpload instead of the image-field.
In node.tpl.php change the call to your created FUpload-field:
$images = $node->field_massupload;
so there will be only pictures shown, that were uploaded by FUpload.

No errors are shown, but if I try to upload more some pictures disappear or something other strange will happen. Actually it's my gf who has the need for hundreds of pictures and she complains that the site doesn't support them - as it does not.

Great tutorial.
When creating the view is it possible to link the image not to the album node but to the lightframe popup window of the album itself? (I want the album to open as a lightframe popup).
All I'm able to do is open that particular image into the lightframe popup, but there is no navigation with the other images belonging to that album.

Thanks for this great tutorial. Everything is working perfectly...when I'm logged in as a user. Unfortunately the images aren't viewable when I'm logged out. How can I go about allowing anonymous users to view the images in my album?

Is there anyway to have the short description field for each image when it is showing them as thumbnails and a longer description field associated with each image when they are opened up in the lightbox frame?

your tutorial seems great but I am a beginner in drupal and i fall after:
Set the Label to Hidden and set both the Teaser and Full node to Lightbox2: thumbnail->lightbox
.Now under /node/add/album we can add some images to go in to our album.
How can I do this last sentence?
Image doesn't appear in the list of contents
Thanks
Phil

Hi, thanks for the tutorial, but I have one question:
How can I sort images inside the album? I only know how to sort all 'albums' overview. I would like to have last uploaded image on the top inside the album.

Thank you for fast reply, but this just changed the preview picture in albums overview. I would like to sort images inside the node of one album.
I can change order manually when editing the album by moving just uploaded pictures to the top with drag&drop, but I think there should be some setting to put uploaded pictures to the top. Any ideas?

@cernuus, depending on how you have done your album grid you will just need to change the order. If you are using the grid code from my other post change the first line to: array_reverse($images = $node->field_images, TRUE);

@Tina, You can go to http://localhost/admin/settings/file-system and change the file system to private and see if that helps. It may be worth asking the question on drupal.org for whichever module is causing it, which I assume is imagecache. Are the images created in the files directory?

Thank you so much for this intresting and detailed tutorial!
I just have a problem. I cannot view the galleries. I point to the view but i just see an empty page! I checked many times all the steps carefully, I tried both enabling and disabling clean urls, I changed the path, I checked permissions, but no luck!
The pages seem to work fine, but when I hover the image in lightbox a bunch of code appears as alt.
Are there any solutions? It is exactly what I wanted and I try days to make a working and compatible gallery.
Thank you so much for your attention!

Thank you so much for your answer!
Unfortunately, I've already done it. I uploaded again photos but nothing.
I've read all comments one to one and tried most of the solutions you provided. If you cannot realize what the problem is, it's ok! Thank you for your time!

"he 3×3 grid is only on the gallery page which displays all the albums. Once you click on the link it goes in to the album where you get the images one after another, that is where you will need to create a node-album.tpl.php file to set up the actual album display you want."

I'd rather leave the gallery page unmolested by the lightbox pop up and instead use lightbox to niftily navigate the individual album pages/pics - like in "Create a simple image gallery in Drupal 6 using CCK and Views."

Or is the latter (using lightbox to niftily navigate the individual album pages/pics) the point of "Creating a grid of images for an album in Drupal 6".

Btw, love the tutorials - a really good intro to some of the possibilities of cck and views.

Thanks heaps for the tutorial. It is all up and working fantastically well. I am wondering how I would implement the following. I have a thumbnail that I do not want to show when light box is triggered. Also all the other images that are part of that Album I do not now want to show as thumbnails. They are only to be viewed in after the thumbnail is clicked. Using your example the user would click on the astin martin thumb that would then show six other large images of the aston martin in lightbox.

@admin i cant get the picture inside the albums to align in a grid just like the albums are aligned in the grid here....
Inside the album they are coming one below the other... any thing done wrong??? or any thing not done?

I put /albums as the path for the view section, however I want the albums to appear in a primary menu item I already have on my site which has the path content/media. But when I put in content/media as the path, nothing shows up there!!!Help please.
thanks in advance, and this tutorial saved me.

isn't possible to create a content type "album" and create a field "field_images", add multiple images this field and just customize the template with node-gallery.tpl.php ?????/ without creating a view....