Last updated April 30, 2012. Created by bentedder on September 25, 2009.
Edited by silverwing, DrupalMagic. Log in to edit this page.
THE most basic way to create an amazing image gallery in Drupal 6.x
-no coding
-no php knowledge required
-10 easy steps or less
-professional looking
-really customizable
I spent a lot of time trying to figure this out. I ran across another site that this idea came from. So they get most of the credit. But I've simplified it a lot here for you. It really should take you under 10 minutes. It looks really good, and works excellent. You can tweak it to oblivion when you're done.
I got really frustrated trying to figure out how to make a gallery simply. You don't need any coding experience or php knowledge. It's really straightforward. Afterwards some css skills will be useful in making sure your image blocks run like you want them to run (vertically, horizontally, etc.)
have fun!
ps. watch the screencast here, and read a full post with images on my site here.
Image Gallery Setup
1. install drupal
2. upload these modules into sites/all/modules: (don't worry, it sounds like a lot...it isn't. it's worth it they're tiny modules)
CCK
Contemplate
FileField
ImageAPI
ImageCache
ImageField
ImageField_Crop
LightBox2
3. enable all above modules
4. set permissions to administer everything in all of these modules
5. go to administer > content management > content types > add content type
call it "imagegallery" and set appropriate settings
6. add new field to content type "image gallery"
label: image
field: field_image
type: file
element: image
number of values: unlimited (allows uploading of multiple images)
7. go to site building > imagecache
create new preset called "thumbnail"
use "scale" option
set scale to 200px wide (or desired width, i like 200px so all pics are the same width in thumbnail format)
8. go to content management > content types > manage fields of image gallery
click "display fields" in submenu of image gallery
label:
teaser:
full node: Lightbox2 slideshow: thumbnail->original
9. create an image gallery!
10. make sure you either put it in the menu or remember the link so you can view your gallery
11. optional: set settings in the lightbox module to do things like automatic cycling slideshows, etc.
the link that helped me:
http://www.gurucomputers.com/blog/building-better-drupal-photo-gallery
Comments
That's the most awesome post
That's the most awesome post ever!!!! Thanks for taking the time to write it.
image gallery in 10 minutes
Hello there,
Just wondering how to get thumbnails to line up horizontally instead of vertically; and also wondering if thumbnails automatically form new row once you post a certain number of photos.
Please let me know.
Thanks a lot.
Hello Edward! I had the same
Hello Edward!
I had the same problem with images previews - they were all "lined up" in one column.
So here is my quick solution:
edit "styles.css" file in your theme directory - add there these lines:
div.field-item {
float: left;
}
It worked for me fine.
how to get image gallery in horizontal rows
Hello Nick,
I am kind of new at this. Could you tell me where in the "styles.css" sheet do I place this:
div.field-item {
float: left;
}
Thanks a lot
Hello Nick, I am kind of new
Hello Nick,
I am kind of new at this. I figured out where to put this in the "style.css" sheet; and it worked for me.
Will photos automatically create rows depending how may photos are in the gallery?
.field-item
{
float: left;
}
Thanks a lot
@Nick This is a little off
@Nick
This is a little off subject but I like helping people out. Try resizing your browser window and see what happens. Then try some of these other attributes in the css.
.field-item
{
float: left;
margin: 2px 2px 2px 2px; /*Think like a clock the first number is top (12 o'clock), the second is right (3 o'clock), third is bottom, ect */
border: 1px solid #000000;
/*margin keeps other elements away from the border on the outside. Padding pushes the element in from the border*/
padding: 5px 5px 5px 5px;
}
Hello Nick, Thanks a lot for
Hello Nick,
Thanks a lot for the advice.
problems using web forms
i have a web form with two fields
Name ..........
Age ..........
After posting the two fields data e.g
Record 1 details
Name = dauti
Age = 30
Record 2 details
Name = Mary
Age = 41
I now want to create a new webform but i get stuck how
the second web form uses the first web form data e.g mary or dauti to populate the
database.
how can one webform filelds or data be from another webform field or data
i want to just select names on the second webform ,which i inserted on the first web form
i dont want yo use relationship or taxonomy
dnl
Related?
Hi Dauti,
Welcome to Drupal.org. Your issue isn't really related to this post about photo galleries.
You could ask for help in the forum: http://drupal.org/forum
Are you using the webform module? Maybe you should open a support request in that project's issue queue at: http://drupal.org/project/issues/webform?categories=All
-Josh
Problem
Hi,
Thank you verymuch fro ur article.But I am facing a problem in implementing it
when I select Lightbox2 slideshow: thumbnail->original in managefields of imagegallery I am not able to see the images on the page.
but if I select image I am able to see the images.
Can please you help me to solve this problem.
Regards,
Pavani
Pavani Akella
Has anyone else come across
Has anyone else come across this issues? I have having the exact problem and can't figure out why the thumbnail won't work.
Link: http://vaithconstruction.com/?q=node/63
I can't get them to show up in Lightbox2
I have the Image gallery type made, and the photos uploaded and even looking pretty good, but they just will not show up with lightbox. I looked at the html that drupal was producing for the gallery node, and I'm pretty sure the problem is in the rel tag. It outputs this:
It does this when I have description enabled or disabled. Any ideas? Has anyone else seen this problem? Is it a bug?
Thanks a lot.
-Josh
I guess I don't know how to
I guess I don't know how to include the code. But the site is JoshOrndorff.com and the PhotoTest link in my primary links is the gallery I'm working on. Thanks for any help.
-Josh
I have a problem with step 7
I have a problem with step 7 of the instructions
---
7. go to site building > imagecache
create new preset called "thumbnail"
use "scale" option
set scale to 200px wide (or desired width, i like 200px so all pics are the same width in thumbnail format)
---
There is no imagecache under sitebuilding, no imagecache under site configuration.
I have enabled the imagecache module.... how do i complete step 7?
Thanks
Im a photographer trying to make websites! www.samdcruzphotography.com
Some Useful informatin
I've played with this for a while, and I now have it working quite nicely. It actually does work out pretty well now that I finally have it.
If you can't see the link to set up sizes in imagecache go to Administer > Site building > Modules and be sure that ImageCache AND ImageCache UI modules are enabled. The UI module provides the link and the fontend to set up your default sizes.
Also, regarding the css to make the thumbnails appear in horizontal rows, it may be better to place the css above in the lightbox.css file at /sites/all/modules/lightbox2/css/lightbox.css That way the code will still be processed if you change themes or have more than one theme enabled on your site.
Best Wishes,
-Josh
users cant see lightbox gallery images
I have tried rebuilding permissions but no good. Only Admin can see the gallery slideshow. Help!?!
Tim Scotten
A little late...
I think you have just discovered how to do it. But for the community sake I'll post what is needed.
User management > Permissions >
check for anonymous and registred users:
view field_image
view field_image2
Save
Presto!
Step 8 issue
Great post and thanks for taking the time to share this.
however, so far I didn't get this working.
there's an issue with step 8.
when i go to the content management>content types>edit image gallery > display fields
i dont see any option to adjust any settings.
i get the following text:
Configure how this content type's fields and field labels should be displayed when it's viewed in teaser and full-page mode. Use the 'Exclude' checkbox to exclude an item from the $content value passed to the node template.
followed by blank space
what am I doing wrong?
Thank you for this GREAT tool! Can you upload multiple images...
Thank you for this GREAT tool!
I have set this up and its working great. Is it, or should it be possible, to be able to upload more than one image at a time? If creating a photo album for a company event and want to upload 30+ images, do I have to manually load each of them one at a time? I attempted to zip them into one file and upload but it would not accept a zip. Any suggestions for a quicker way to load multiple pics?
Thanks again for your great post. Much appreciated and very easy to follow and set up.
Jody Winter, e-Business Analyst, Cyberonics Inc
Multiple image upload
To enable multiple image upload, go to Administer>..>Content types>Image Gallery> Manage Fields.
Configure the image field so that under 'Global Settings', number of values is Unlimited.
thumbnail display
Thanks, this was very helpful for a user-friendly gallery.
If you're having trouble getting the thumbnails to display on the gallery page, make sure you also have ImageAPI GD2 module enabled.
How to add captions to images
Hello. Thank you, I was able to create an image gallery! I attempted to add captions/titles to each image by configuring the 'Image' field in the 'Image Gallery' content type to 'Enable custom title text'. Then, I modified the body template of the 'Image Gallery' to this:
Image
<?phpforeach ((array)$node->field_image as $item) {
?>
<?phpprint $item['view']
?>
<?phpecho "\n"
?>
<?phpprint $item['data']['title']
?>
<?php}
?>
It works in that the captions are displayed. However, they're displayed to the right of the images, instead of below them. I'm a php newbie, can someone please help? I would very much appreciate it.
Also, how can I remove the 'Submitted by admin on Fri, 07/15/2011 - 16:43' that displays at the top of the image gallery page?
Thank you.
Cannot get thumbnails to show
Thank you for a brilliant post!
However, I followed the instructions to the letter, and all seems to be working fine, apart from I cannot see the thumbnails. They are just coming up with the description text on the page. Please could you advise me on how I would go about fixing this?
Thanks again
~C
[EDIT] I have all relevant modules installed including ImageAPI GD2 [/EDIT]
How to add a caption
Hello. Thank you, I was able to create an image gallery! My question is I would like to be able to add captions to the images.
On the configuration of the 'Image' fileld, I enabled 'Custom title text'. Then, in the 'Template' setting I modified the body field this way:
Image
<?phpforeach ((array)$node->field_image as $item) {
?>
<?phpprint $item['view']
?>
<?phpecho "\n"
?>
<?phpprint $item['data']['title']
?>
<?php}
?>
It works in that the title shows up but it displays to the right of the images instead of below them. Can anyone please help? How can I get the title/caption to show up below each image?
Also, how can I remove the 'Submitted by admin on Fri, 07/15/2011 - 16:43' line that shows up on top of the image gallery?
Thank you.
yup its works really great
yup its working really great
UPload
I got it to work but it will only upload one image Any ideas? how it could be fixd
Image not showing up when clicked on thumbnail.
Hi,
everything is very nicely explained and easy. I followed all the steps. The gallery is fine, the thumbnail is fine. But when i click on the image, it does not show up the original image(with lightbox effect). instead it shows a camera icon with the cross on it. what might be the problem, am i missing something. pleaseeeeee help,i have already spent a week on only this issue.