Building A Better Drupal Photo Gallery
There are a lot of ways to build a image gallery in Drupal, but most
of them are very complicated, require users to make a view for each
gallery, and don't end up looking the way you want.
Don't make them think!
For G.Willikers! Toy Store
I set out to build a better photo gallery that would allow users to
easily create new gallery pages and upload images to them – without
having to know anything about cropping images or how to create a new
view.
The end result is an new, previously undocumented (as far as I
can tell) image gallery that is intuitive to use and easy to set up.
Check out the G.Williker's! photo gallery to see the final product.
Before I set out to build my own gallery, I tried all the modules, and read as many blogs and handbooks pages as I could. The problem with most modules is that they can't be easily customized. Other directions require you to create "image gallery" taxonomies and upload images individually, and then style the page with views making it impossible for an end user to do without serious training. This is what I found to be the easiest way.
Using CCK, Image Field and Contemplate
To do this you are going to need CCK, ImageField, and Contemplate. Image Cache, Thickbox and Views are optional.
- Create a content type. Let's call it "Imge Gallery", and leave all the fields body, title, etc...
- Next add an image field and call it something like "gallery" Alow multiple images to be uploaded. Enable custom title text if you like.
- Go to Image cache and create your perfect thumbnail size. I usually scale the image to a slightly larger size then I want, center it, and then crop it to size. That's what I've found works best.
- Create Content > Image Gallery, and upload a bunch of images to this page. Also add some words to the Body.
- So after you've uploaded all your images, go to Display Fields within your image gallery content type and and select Thickbox:(name of imagecache thumbnail). Make surethe label is hidden.
- Now your ready to style your page with Contemplate. I throw the title in there, and the body text, and I add some quick directions to viewers like: click on the image to see it bigger....
- Then I do something like this:
<?php if ($node->field_gallery[0]['view'] > '') : ?><?php print $node->field_gallery[0]['view'] ?><?php endif; ?>
for as many images as I have. For the purpose of this site, I limit them to 24 images per page. I also have the option of adding text like this: <p><?php print $node->field_gallery[0]['title'] ?></p>within the statement if the desing calls for it.
- [update class="9.27.2008"] An alternative way to write step #7 in Contemplalte is so that you have more control over the size of the popup image in Thickbox. Writing it this way essentially eliminates step number 5, and gives you more control over the thumbnail and popup sizes in Imagecache.:
<?php if ($node->field_gallery[0]['view'] > '') : ?><div class="gallery">
<a href="/files/imagecache/Gallery_Display/<?php print $node->field_gallery[0]['filename'] ?>" title="<?php print $node->field_gallery[0]['title'] ?>" class="thickbox" rel="gallery-gallery"><img src="/files/imagecache/Gallery/<?php print $node->field_gallery[0]['filename'] ?>" alt="<?php print $node->field_gallery[0]['title'] ?>" /></a>
<p><?php print $node->field_gallery[0]['title'] ?></p>
</div><?php endif; ?> [/update]
- All that's left then is styling the page in CSS.
After you have created your gallery page you may want to make a landing page which links to all your super cool galleries. Check this out.
- In Contemplate, create a teaser view that takes the first image and the page title. It might read something like this: <a href="/<?php print drupal_get_path_alias("node/$node->nid"); ?>" title="<?php print check_plain($node->title) ?>"><?php print $node->field_gallery[0]['view'] ?><p><?php print check_plain($node->title) ?></p></a>.
- Go to Views and create a block and select Teaser list. Select the node type in the filters and sort whatever way you want.
- Attach the block to a page and style with CSS. It really don't get easier then this.
I'm interested to find out if these steps were helpful. Please let me know in the comments below. Feel free to digg this page or quote it in the Drupal handbook.
Comments
The first time I tried to figure out how to change the Display Fields settings in Drupal took me a couple hours because I couldn't figure out what the instructions were referring to. Since discovering this helpful shortcut I use it all the time when building templates.
To change the Display Fields settings, edit your content type which we call "Image Gallery" in the example above. At the top of the content type you will see the following selections: Edit, Manage fields, Display fields, Add field, Add group, Template.
Select the Display Fields option, and change your Gallery Full option to accommodate your Thickbox imagecache settings, and then the teaser should reflect your thumbnail imagecache setting.
The Display Fields is also a helpful place to keep the label from showing up above new fields.
I hope this clarified your question. I’m sorry that there are not more detailed instructions I can refer you to, because were the first to document this process. Best of luck.
<?php foreach((array)$field_gallery as $imageview) print $imageview['view']; ?>
I used this as a basis to allow all my users to create their own (multiple) galleries, and each gallery has all the advantages of a regular node (comments, permissions, etc.). Thanks for such a good description and such a simple solution for great galleries.<?php foreach((array)$field_gallery as $imageview) { print $imageview['view']; ?> <?php print $imageview['data']['title']; } ?>
This is for Drupal 6. I don't know if 5 has enough of the same array structure for this to work, but I'm sure it's somewhere in the array if you can find the key for it.I have used the code
<?php foreach((array)$field_gallery as $imageview) { print $imageview['view']; ?> <?php print $imageview['data']['title']; } ?>
by Markle and put it into the field "body template" in Contemplate settings of Gallery Content. Unfortunately no thumbnails are displayed on the page, inspide of the fact some HTML code is produced:
<div class="content"><a href="http://www.banhof.web44.net/sites/default/files/contrast_of_evening.jpg" title="" class="thickbox" rel="gallery-52"><img src="http://www.banhof.web44.net/sites/default/files/imagecache/imgch/contrast_of_evening.jpg" alt=""></a> <a href="http://www.banhof.web44.net/sites/default/files/the_light_scratch.jpg" title="" class="thickbox" rel="gallery-52"><img src="http://www.banhof.web44.net/sites/default/files/imagecache/imgch/the_light_scratch.jpg" alt=""></a> </div>
It looks like Image Cache doesn't work (if I put the link of thumbnail into browser's adress line, it doesn't work and the ImgCache directory is empty). Access rights to Image Cache directory seems to be alright. Can anybode help me and tell me what's wrong? Thanks a lot!
Note: point 8 I understand is optional, but I have tried it and it's even worse - no HTML is produced in that case, node seems to be totaly empty :-(
We're very happy to see this post has been useful to so many people. Many of the questions that are being asked are explained in detail in the steps above. This process really couldn't be simpler. Like the last person's question about how to create a seperate category -- read the instructions.
For those of you who are not familiar with Contemplate, all you need to do is select the body or teaser Variables from the list provided. Click on the "Body Variables" to see the values that have been created based on the names you provided. There is no need to learn how to write PHP, it's just point and select the value you want.
Unfortunately, I don't have time to support this Photo Gallery, because it is so simple to create, and this blog is not a tutorial on how to use Contemplate, so if you need additional help learning to use Contemplate try Google instead of asking for a tutorial in the comments.
<?php if ($node->field_gallery[0]['view'] > '') : ?><?php print $node->field_gallery[0]['view'] ?><?php endif; ?>
And then repeating for each image you want to show. Try:
<? for ($i=0;$ifield_gallery);$i++) { if ($node->field_gallery[$i]['view']) echo $node->field_gallery[$i]['view']; } ?>
this will do exactly the same thing as your code, only you just have to put it in once and it will automatically display all of your images, rather than you having to put a new statement for each one. It should speed up your page a bit too!
To get dynamic gallery building, try this for your gallery builds with Title Text under image.
Notice: I named my field "imge_gallery" so yours might be different.
field_imgegallery); $i++)
{ print $node->field_imgegallery[$i]['view']; print "
"; print $node->field_imgegallery[$i]['data']['title']; print "
"; } ?>Add a comment