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