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.

I have seen more than twenty tutorials since last week because i am looking for the gallery solution for my site I don't want to use the gallery modules because most module are still in development phase and some good modules has no support or frozen. anyway this is another good example expalining HOW TO CREATE SIMPLE (single image upload) GALLERY. Looks to me that everyone keen to explain simple way which is most of the time easy too (so don't think we need too many tutorials) but not necessarily effective, but they try to explain multi upload issue in the comment because so many like me want to know. I don't understand why someone is not trying to write a tutorial on multiupaload image gallery. Is it really too complicated? correct me if I am wrong. Thanks

@kaay, Not complicated in the sense that it is near impossible, but complicated enough that a fair few people can't do it easily. When I get some time I will try and write up a multiupload image gallery.

Hi,
I have one question regarding a distance between an images in the gallery. In your example http://gallery.jamestombs.co.uk/gallery I see that images have more space surround.
Could you tell me how to do this?

[...] Category: Development This tutorial is an addition to my previous tutorial on creating a simple gallery in Drupal 6 using CCK and views. This tutorial will enable users to create galleries containing multiple images per node with [...]

Secondly, I followed the tutorial and also experienced the problem with the thumbnails and images not showing up.

After looking at the html that was outputted, I realised that the thumbnail should have been created under sites/default/files/imagecache/thumbnail and the image should have appeared under sites/default/files/imagecache/lightbox - but they weren't - but then, neither were the two folders.

I checked permissions - they were fine.

I manually created the folders, tried again, and once again, the images weren't created.

The one thing that did work for me, was switching to the Private download method under admin/settings/file-system.

After adding new images, the new images were now being created in the appropriate folders, and now appearing in the gallery.

I'm not entirely sure why the Download method needs to be set to Private, but it now works.

Same problem as the others. Love the lightbox feature, but the gallery is not visible to anonymous users, which is absolutely essential for my site. How do I create multiple galleries. For example, in my site I need to have a different gallery for each performance.

I really appreciate all of the hard work that went into creating this module and the time to create the tutorial.

@Duc Tran, Have you followed all the steps previously? If so, delete the node/add/image folders if you have created them, then navigate to that path in the browser. You can also follow a video tutorial that gets you the same result at learnbythedrop.

Yes, I did follow all the steps mentioned. However, I am still not sure if I did it correctly when I tried to add images. I simply put the image titles in the Title field (those images are located in the folder "Drupal/sites/default/files/imagecache/lightbox".

@Duc Tran, I guess it is probably just one erraneous setting which is stopping the images from appearing or possibly a content access module if you have one installed. If you want to set up another user with admin rights to views and content and email the username and password to jtombs@tombscomputers.co.uk I will happily have a look over it for you.

Ha, ha! After starting from scratch, I followed the tutorial, "Create an album based image gallery ..." and I got it. I created 2 albums each has 2 images in it. You can see the result here,

"thetranly.com/DDrup/albums"

Thanks a lot for your help!

By the way, I have a question. When we create the preset named "lightbox" we "select Add Scale and set the width to 800 and the height to 600". This works well with landscape (horizontal) images. What if we have some portrait (vertical) ones?

As for the vertical images, you can change it to 800x800 if you want to, but you have to remember that some users may have small screen resolutions so you may not want to make it too big. You can play around with those settings until you get it how you want it.

First off, thanks for the great tutorial. Second, I couldn't get it to load right at first, the same issue some others were having. The images were going to the wrong place. I started over and found my problem was that I loaded my modules in the original modules folder, I had not created on in sites/all. Once I did that, it worked fins. Thanks again!

When I tried uploading new Images after the procedure (It worked great ..) , the new images are not being displayed in the lightbox, I can see their thumbnails but when I click on them to open in lightbox, I get an image of a camera with a cross on it ...!! Any suggestions ??

thnx for this greet tutorial ,
the problem was when i upload the image i didn't c it ,after search i notice the imagecache doesn't create sub-folder on it when create new preset i dont know why , i was using troubleshooting document on drupal website but doesn't work with me too , finally i found solution that is change the file system and under ' download method ' change from public to private and the imagecache will work and image will show fine

hi again , i have 2 question
1.how can i change space between the images ?what code needed to add to css file ?
2.if i create new contant type called it album and upload the images using it , how to create more than one gallery and each gallery contain different images that belong to album type
tnx

I also experienced the problem with the thumbnails and images not showing up.
I found that I enabled the ImageMagick module, but it was not configured on the server. When I changed to ImageAPI GD2 it worked.

it's a great tutorial...i followed the steps and i got the gallery...it's great...
but i have one problem here...how to create a menu for the gallery so everyone can access the gallery through that menu...please help me as soon as possible...thx:)