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.
/**
* 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
$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
$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
Attachment | Size |
---|---|
image_gallery.tpl.php.txt | 2.23 KB |
Comments
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:
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 :).
The last step
After this you need to clear the cache, otherwise you'll see the page equal.
Go to www.yoursitedomain/admin/settings/performance and clear the cache.
I cant get this to work
I use drupal 6 and I cant get the above code for the version 6 to work.
I am clearing the cache after I uploaded the files.
I cant figure out what I am doing wrong. I tryed to change the path both in the template.php and also in the image_gallery.tpl.php nothing works..
Please help. thanks
How to control the namber of images?
Hi.
I try and try touch this template for show more than 6 image thumbs in the gallery page. I search in views created for this module and don't see this feature. I can't resolve. Som suggestion?
My example is: http://www.9bacull.org/category/image-galleries/festival-de-sopes-del-m%...
I can't understand howto change this.
Tnx in advanced
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
Can someone post the code for
Can someone post the code for the default white box to be black and for the main gallery not to display the images held in its sub galleries? This is for 6.x
Default template ?
Hi !
Where can i find the default template for Image Gallery 5.x-2.0-alpha3 (D5) ?
When i try code from here, it's worst than the default template...
thanks in advance.
++