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.

Comments

@brunorios, yes and no, that is how you will style the individual node display whereas the view is to make a grid of all your albums which users can then click to go in to and view all the images of that album.

I followed these instructions, but I get a blank page... The View title is there, but nothing else. I am using the current version of all the above specified modules. I already had a content type with the imagefield, so I did not create a new one. I went through it to make sure that it was like you specified above. Any suggestions?

Yes, it is... I think it may be something to do with IIS, could that be? I got it working on another setup which runs on Apache. By the way, how do you get them to display one after the other by clicking a next arrow or button? At the moment, the individual images are popping up.

Lightbox should automatically register them all and give you the next buttons. If the image is working in the individual node but not the view, I would check your view again to make sure you haven't missed something out.

Hi. I have sort of the same problem as Harry.
When i create an imagegallery node and upload the picture, it dosn'nt appear on the node when i view it. All i see is a broken link.

The problem is that the image dos'nt automaticly get moved to the correct folder. When i upload the picture, it gets uploaded to the folder "files/gallery".
The broken link on the node, links to "files/imagecache/resize/gallery/image.jpg".

I then have to resize the image manually to a "crop" and a "resize" format, and then move em to "files/imagecache/resize/gallery/image.jpg" and "files/imagecache/crop/gallery/image.jpg" for it to work.

Hi. The files directory is writable. But somehow i can't get clean URLs to work. Think the problem is on the web-server. Im using "Internet Information Services (IIS)" on my web-server. Any idea on what to do, to get it to work?

Thank you admin for response. I haven't hooked into view yet. Any further instruction such as which APIs should I use and how can I pass these images to the flash object? Any article specific about this? many thanks and I do appreciated it a lot.
I would love to start this module and will contribute back to Drupal for sure.

I have never hooked in to the Views API so I don't know how easy it is to do that. As for the block, you just need to display the block using the flash object and the PHP can generate an XML output using views or a custom SQL query to pull out all the images.

As supervisor/superuser the gallery-show functioned properly.
But when I logged out, and became a "regular visitor", I could only see the titles of the albums: Neither thumbnails, nor images were visible.

By chance just before testing as a "regular visitor" (= anonymus user), I had viewed the Permissions in Drupal.
So, not seeing the thumbnails & images, made me realise it was a Permissions-issue.

Just give the anonymous user the Permission to vief the image_field you created according to this tutorial, and anyone can browse the galleries.
(Or at least: this worked for me)

I just started with Drupal, and don't know anything about MySql nor PHP.
I just use the Drupal-interface to generate the website.
So, placing code to get a 3*3 grid for the Photo Albums is not feasable for me (yet).

But I do want users (=visitors) to see the pictures in the Albums in a grid, whilst the editor (the guy that uploads them to the site) can see them in a list on a page, en delete them at will (for him that way, that list has a purpose).

But, is it possible to get the Album in a view (which contains a grid), and so have a view of a view when viewing the gallery ?
Or, another user-friendly solution: Is it possible to start the Lightbox-slideshow of an Album at the moment a user selects that Album from the gallery (tjat is without entering the Album-page) ?

There are ways to get the lightbox to show up without going in to the node, but I haven't looked in to how.

As for getting a grid view without PHP, I have tried to do an override using Views but haven't been successful. One way would be to create the layout as a block, then create a node override using Panels then add that block using the node nid to build the grid but that will still require PHP.

Quote:
"To add more images to existing albums, you can either click the Edit tab when in the album itself, or go to admin/content/node then click edit next to the album that you wish to add the images to."

It's not very userfriendly loading all the uploaded images whenever a user wants to add an image to an existing gallery. It would be a lot better if you could just add images without editing the whole node.

Works fine but 1 little problem I'm having. I can't seem to get the album cover image to display and instead I'm just presented with clickable text links for each album. I've checked my settings against yours and it's matches up 100%. Would appreciate any help, thanks!

Thanks for the tutorial, it helped a lot. I have a multilanguage site. Is there a way to translate the album names? I enabled Multilingual support for the Album content type. I can edit the language in the album node, but the album shows up on all languages. Selecting the language, does not filter out only albums with the required language set. Any ideas to make it work?

I tried the Translate interface feature, but it allowed to change only the page name. The album names do not show up in the Translate interface search option.

I haven't used the translation tools/modules available for Drupal so I am unaware of any potential problems. The bit you are talking about is generated from Views, so that could be your first step to finding an answer.

I'm setting up a Drupal website and I'm wanting to display a gallery of images for a node type. I thought this great tutorial of yours was the answer, but not quite.

I've created a content type called cameras and added a new CCK field called 'associated images' (field_camera_images) with File (type of data to store) and File Upload (Form element to edit the data) so that a user can upload one or more images for that particular content type.

What I'm aiming for is to use Panels to add a gallery of images (grid style, say 3 maximum with pager for more) associated with the camera content type. Is this possible do you know?

I am working on Drupal 6.16 with all the modules you have listed for this tutorial enabled with the addition of Panels 6.x-3.7

Thanks James. I'm trying to set up a view and then add it into a Panel to display on a page. What I can't fathom out is to display a grid of associated images for the node I'm looking at. For example, if looking at /node/5, I only want to see a grid of images for that node.

What do I do if I allready have folders on the server filled with images (eg I use FTP to upload all the images - one folder for each album). Is there some way I can use something like fupload or maybe I could write some code to scan the folders and then add the images to an album.
Does anyone have any ideas or know of something that can do this - I don't want to reinvent the wheel if I can avoid it :)
I have more than 1000 pictures already sorted in folders on the server, so I don't want to reupload everything, and I would very much like to use this album tutorial here as well.

Anders, you should be able to use the Image Import module which is part of the Image module (http://drupal.org/project/image) which allows you to "simplify adding multiple images by importing images from a directory on the server."