Customising image gallery layouts
description
This describes how to override the default layout for Image Gallery nodes (when using the image.module).
Important note: As of Image 5.x-1.3, the function _image_get_dimensions had been changed to _image_get_sizes so you will need to make that change in the following code if you are using the latest version of Image module.
benefits
I wanted to make minor changes and ammendments to how the galleries were displayed in Drupal using the image.module but I didn't want to hack the module.
By doing it this way means that you don't run the risk of breaking your Drupal installation by messing with the module files and it also means that upgrading is made easier. The override is contained in your /theme/theme_name/ folder and is simple to install and remove.
step 1 of 2
Step one is to catch the default gallery pages output from the image.module and point Drupal to your override template.
Copy the following code into a template.php file and upload it to your /THEMES/THEME_NAME/ folder. If you already have a template.php file in that folder, simply add the code to the bottom of the existing template file.
<?php
/**
* Catch the theme_image_gallery function, redirect through the template api
* and point Drupal to your image_gallery.tpl.php file to determine the layout
* of your image gallery pages.
*/
function phptemplate_image_gallery($galleries, $images) {
// Pass to phptemplate, including translating the parameters to an associative array. The element names are the names that the variables
// will be assigned within your template.
/* potential need for other code to extract field info */
return _phptemplate_callback('image_gallery', array('galleries' => $galleries, 'images' => $images));
}
?>step 2 of 2
Step 2 is to upload the default image_gallery.tpl.php file to the same THEMES/THEME_NAME folder.
Copy and paste the following code into a text editor like crimson editor (open source PHP editor) or NOTEPAD.EXE etc. save it with the filename: image_gallery.tpl.php and upload it into your THEMES/THEME_NAME/ folder. the same folder you uploaded the template.php file in step 1.
5.x
<?php
$size = _image_get_dimensions('thumbnail');
$width = $size['width'];
$height = $size['height'];
$content = '';
if (count($galleries)) {
$content.= '<ul class="galleries">';
foreach ($galleries as $gallery) {
$content .= '<li>';
if ($gallery->count)
$content.= l(image_display($gallery->latest, 'thumbnail'), 'image/tid/'.$gallery->tid, array(), NULL, NULL, FALSE, TRUE);
$content.= "<h3>".l($gallery->name, 'image/tid/'.$gallery->tid) . "</h3>\n";
$content.= '<div class="description">'. check_markup($gallery->description) ."</div>\n";
$content.= '<p class="count">' . format_plural($gallery->count, 'There is 1 image in this gallery', 'There are @count images in this gallery') . "</p>\n";
if ($gallery->latest->changed) {
$content.= '<p class="last">'. t('Last updated: @date', array('@date' => format_date($gallery->latest->changed))) . "</p>\n";
}
$content.= "</li>\n";
}
$content.= "</ul>\n";
}
if (count($images)) {
$height += 5;
$content = 'this is the list of galleries<br><br>';
$content.= '<ul class="images">';
foreach ($images as $image) {
$content .= '<li';
if ($image->sticky) {
$content .= ' class="sticky"';
}
$content .= ' style="height : '.$height .'px; width : '.$width.'px;"';
$content .= ">\n";
$content .= l(image_display($image, 'thumbnail'), 'node/'.$image->nid, array(), NULL, NULL, FALSE, TRUE);
$content .= '<h3>'.l($image->title, 'node/'.$image->nid)."</h3>";
if (theme_get_setting('toggle_node_info_' . $image->type)) {
$content .= '<div class="author">'. t('Posted by: @name', array('@name' => format_name($image))) . "</div>\n";
$content .= '<div class="date">'.format_date($image->created)."</div>\n";
}
$content .= "</li>\n";
}
$content.= "</ul>\n";
}
if ($pager = theme('pager', NULL, variable_get('image_images_per_page', 6), 0)) {
$content.= $pager;
}
If (count($images) + count($galleries) == 0) {
$content.= '<p class="count">' . format_plural($gallery->count, 'There is 1 image in this gallery', 'There are @count images in this gallery') . "</p>\n";
}
print $content;
?>4.7
<?php
$size = _image_get_dimensions('thumbnail');
$width = $size['width'];
$height = $size['height'];
$content = '';
if (count($galleries)) {
$content.= '<ul class="galleries">';
foreach ($galleries as $gallery) {
$content .= '<li>';
if ($gallery->count)
$content.= l(image_display($gallery->latest, 'thumbnail'), 'image/tid/'.$gallery->tid, array(), NULL, NULL, FALSE, TRUE);
$content.= "<h3>".l($gallery->name, 'image/tid/'.$gallery->tid) . "</h3>\n";
$content.= '<div class="description">'. check_output($gallery->description) ."</div>\n";
$content.= '<p class="count">' . format_plural($gallery->count, 'There is %count image in this gallery', 'There are %count images in this gallery') . "</p>\n";
if ($gallery->latest->changed) {
$content.= '<p class="last">'. t('Last updated: %date', array('%date' => format_date($gallery->latest->changed))) . "</p>\n";
}
$content.= "</li>\n";
}
$content.= "</ul>\n";
}
if (count($images)) {
$height += 5;
$content = 'this is the list of galleries<br><br>';
$content.= '<ul class="images">';
foreach ($images as $image) {
$content .= '<li';
if ($image->sticky) {
$content .= ' class="sticky"';
}
$content .= ' style="height : '.$height .'px; width : '.$width.'px;"';
$content .= ">\n";
$content .= l(image_display($image, 'thumbnail'), 'node/'.$image->nid, array(), NULL, NULL, FALSE, TRUE);
$content .= '<h3>'.l($image->title, 'node/'.$image->nid)."</h3>";
if (theme_get_setting('toggle_node_info_' . $image->type)) {
$content .= '<div class="author">'. t('Posted by: %name', array('%name' => format_name($image))) . "</div>\n";
$content .= '<div class="date">'.format_date($image->created)."</div>\n";
}
$content .= "</li>\n";
}
$content.= "</ul>\n";
}
if ($pager = theme('pager', NULL, variable_get('image_images_per_page', 6), 0)) {
$content.= $pager;
}
If (count($images) + count($galleries) == 0) {
$content.= '<p class="count">' . format_plural(0, 'There is %count image in this gallery', 'There are %count images in this gallery') . "</p>\n";
}
print $content;
?>Step 3: is to start making your changes. I'll post examples of the changes I made to the default layout to illustrate how to do that.
For discussion purposes and to avoid cluttering up the handbook, I have started a specific forum topic where you can post questions/snippets/tips and tricks etc.
Dub
Image Galleries for 6.x
Can anyone post a snippet for Drupal 6.x image gallery theming.
Thanks heaps,
Mike Wheatland
The (current) Drupal 6 version
_phptemplate_callback() no longer exists in Drupal 6 and needs to be changed to theme_render_template(). After much testing I've found that theme_render_template() requires the full file name of the template file ('image_gallery.tpl.php'), rather than just 'image_gallery' that was previously used, and needs the path from the root of your site as the function inserts a './' before whatever path/file you specify. Here is what the code should look like:
<?phpfunction phptemplate_image_gallery($galleries, $images) {
// Pass to phptemplate, including translating the parameters to an associative array. The element names are the names that the variables
// will be assigned within your template.
/* potential need for other code to extract field info */
return theme_render_template('path/to/your/theme/image_gallery.tpl.php', array('galleries' => $galleries, 'images' => $images));
}
?>
The main difference with the Drupal 6 version is that the css file is specified in the drupal_add_css() function, which by default points to '/modules/image/contrib/image_gallery'. If you're like me and want to copy image_gallery.css to your theme folder too then you'll need to change it to point to your theme instead.
Though it isn't mentioned above, this is a method of theming every gallery at once and it doesn't handle theming of the actual image itself which I'm perfectly happy in my case with as I don't want the user looking at the actual image node - that's what lightbox is for :).
<?php
drupal_add_css(drupal_get_path('theme', 'name_of_your_theme') .'/image_gallery.css');
$size = image_get_sizes(IMAGE_THUMBNAIL);
$content = '';
if (count($galleries)) {
$content .= '<ul class="galleries">';
foreach ($galleries as $gallery) {
$content .= '<li class="clear-block">';
if ($gallery->count) {
$content .= l(image_display($gallery->latest, IMAGE_THUMBNAIL), 'image/tid/'. $gallery->tid, array('html' => TRUE));
}
$content .= "<h3>". l($gallery->name, 'image/tid/'. $gallery->tid) ."</h3>\n";
$content .= '<div class="description">'. check_markup($gallery->description) ."</div>\n";
$content .= '<p class="count">'. format_plural($gallery->count, 'There is 1 image in this gallery', 'There are @count images in this gallery') ."</p>\n";
if ($gallery->latest->changed) {
$content .= '<p class="last">'. t('Last updated: %date', array('%date' => format_date($gallery->latest->changed))) ."</p>\n";
}
$content .= "</li>\n";
}
$content .= "</ul>\n";
}
if (!empty($images)) {
$content .= '<ul class="images">';
foreach ($images as $image) {
$content .= theme('image_gallery_img', $image, $size);
}
$content .= "</ul>\n";
}
if ($pager = theme('pager', NULL, variable_get('image_images_per_page', 6), 0)) {
$content .= $pager;
}
if (count($images) + count($galleries) == 0) {
$content .= '<p class="count">'. format_plural(0, 'There is 1 image in this gallery', 'There are @count images in this gallery') ."</p>\n";
}
print $content;
?>
Outdated
This is outdated. Could you please update this for Image 5.x-1.9?
This would be greatly appreciated :)
Example of D5 image gallery with imagecache
<?php
$size = _image_get_sizes('thumbnail');
$width = $size['width'];
$height = $size['height'];
$content = '';
if (count($galleries)) {
$height += 50;
$content.= '<ul class="galleries">';
foreach ($galleries as $gallery) {
$content .= '<li style="height : '.$height .'px; width : '.$width.'px;">';
if ($gallery->count)
//this is one of two operative statements that must be replaced
$content.= l(theme('imagecache', 'lg_thumbnail', $gallery->latest->images['_original'], $gallery->name), 'image/tid/'.$gallery->tid, array(), NULL, NULL, FALSE, TRUE);
$content.= "<h3>".l($gallery->name, 'image/tid/'.$gallery->tid) . "</h3>\n";
$content.= '<div class="description">'. check_markup($gallery->description) ."</div>\n";
$content.= '<p class="count">' . format_plural($gallery->count, 'There is 1 image in this gallery', 'There are @count images in this gallery') . "</p>\n";
if ($gallery->latest->changed) {
$content.= '<p class="last">'. t('Last updated: @date', array('@date' => format_date($gallery->latest->changed))) . "</p>\n";
}
$content.= "</li>\n";
}
$content.= "</ul>\n";
}
if (count($images)) {
$height += 50;
$content.= '<ul class="images">';
foreach ($images as $image) {
$content .= '<li style="height : '.$height .'px; width : '.$width.'px;";>';
//this is one of two operative statements that must be replaced
$content.= l(theme('imagecache', 'lg_thumbnail', $image->images['_original'], $image->title, $image->title), 'node/'.$image->nid, array(), NULL, NULL, FALSE, TRUE);
$content .= '<h3>'.l($image->title, 'node/'.$image->nid)."</h3>";
if (theme_get_setting('toggle_node_info_' . $image->type)) {
$content .= '<div class="author">'. t('Posted by: @name', array('@name' => format_name($image))) . "</div>\n";
$content .= '<div class="date">'.format_date($image->created)."</div>\n";
}
$content .= "</li>\n";
}
$content.= "</ul>\n";
}
if ($pager = theme('pager', NULL, variable_get('image_images_per_page', 6), 0)) {
$content.= $pager;
}
If (count($images) + count($galleries) == 0) {
$content.= '<p class="count">' . format_plural($gallery->count, 'There is 1 image in this gallery', 'There are @count images in this gallery') . "</p>\n";
}
print $content;
?>