Drupal 6 Theming image_gallery_terms View from the image_gallery Module
Submitted by badzilla on Sun, 14/02/2010 - 19:09
By editing the image_gallery_terms view, clicking on Theme: Information you will see a list of the templates currently being used to construct the view. The second entry Style Output is what we are interested in. You will see the current template file is the one we found in the sites/all/modules/image/contrib/image_gallery/views/theme directory. If you click on Rescan Template Files you should see that the template file now being used is the one we created in our own theme directory (right).
It is now time to recode the template file to what we want. You will see I have added the zebra stripes logic with the $zebra variable.
image-gallery-view-image-gallery-terms--image-gallery-terms.tpl.php
The css required for this to work has been covered before in earlier tutorials. Reproduced in brief below.
sites/all/themes/{theme name}/style.css
This produces the output on the left. The alternate row zebra stripes are now working but it looks like some of the other formatting is trashed. The image needs to be displayed in-line with the text wrapping around. And also we could do with fixing the punctuation and font attributes on the last edited and image count fields.
To tidy up the image, we need to refer back to the template list and we'd see that we need to create a file views-view-field--image-gallery-latest-thumbnail-1.tpl.php which should be copied from the original views-view-field.tpl.php file in the image module views directory, but don't forget to rescan the templates in views. To float the image to the left, I used the follow code in the template file and added some css as well.
views-view-field--image-gallery-latest-thumbnail-1.tpl.php
style.css
The desire is to have an inline title with the image count next to it in italic. To fix the title (actually the taxonomy term) click on Taxonomy: Term, then check the box next to Rewrite the output of this field then add the code shown to the left in the Text: field. We also need to reorder the fields by clicking on the up/down arrows in Fields and rearranging, and check the the correct fields are rendered inline by clicking on the gear icon next to Row Style: Fields and checking the required boxes. For the sake of brevity I haven't included screenshots of these last two steps, but if you are stuck leave a comment at the end of the article.
We need to modify the image gallery count to something a little more succinct. The standard text There are x images in this gallery is somewhat unwieldy. So, again we will need to modify a default template file. Change to the sites/all/modules/views/theme directory and copy the default field template into the beezee theme directory and rename accordingly.
Don't forget to rescan the template files onces you have done this!
The final task is to change the Last Edited on text to small italic case. Follow the same process as before by rewriting the output field as show left.
The exercise has now been completed and you should have a layout similar to that shown on the top right of this page.
The image_gallery submodule which is bundled in the image gallery comes with some built-in views. These views have associated styles allowing the customisation of the view. This tutorial explains how to customise the style for a particular view, from the bundled style Subgallery list left to the new style right.
As you can see from the image, the current style is Subgallery List in the image-gallery-terms view. This is fine but we will need to override the HTML and PHP coding within the script file.
To do this, and rather to overwrite the original (never a good idea), you need to copy the PHP template file from within the image module file tree to your own theme. My theme is my own beezee theme so I am going to copy the file there.
/> cd sites/all/modules/image/contrib/image_gallery/views/theme
/sites/all/modules/image/contrib/image_gallery/views/theme> cp image-gallery-view-image-gallery-terms.tpl.php ../../../../../../themes/beezee/views/image-gallery-view-image-gallery-terms--image-gallery-terms.tpl.phpBy editing the image_gallery_terms view, clicking on Theme: Information you will see a list of the templates currently being used to construct the view. The second entry Style Output is what we are interested in. You will see the current template file is the one we found in the sites/all/modules/image/contrib/image_gallery/views/theme directory. If you click on Rescan Template Files you should see that the template file now being used is the one we created in our own theme directory (right).
It is now time to recode the template file to what we want. You will see I have added the zebra stripes logic with the $zebra variable.
image-gallery-view-image-gallery-terms--image-gallery-terms.tpl.php
<div class="item-list image-gallery-terms clear-block">
<?php if (!empty($title)) : ?>
<h3><?php print $title; ?></h3>
<?php endif; ?>
<<?php print $options['type']; ?> class="galleries">
<?php foreach ($rows as $id => $row): ?>
<div class='views-<?php print $zebra ? 'odd' : 'even'; ?>'>
<li class="<?php print $classes[$id]; ?> clear-block"><?php print $row; ?></li>
<?php $zebra = !$zebra; ?>
</div>
<?php endforeach; ?>
</<?php print $options['type']; ?>>
</div>The css required for this to work has been covered before in earlier tutorials. Reproduced in brief below.
sites/all/themes/{theme name}/style.css
.views-odd, .views-even {
margin-top: 10px;
margin-right: 0px;
margin-bottom: -10px;
margin-left: 0px;
padding: 10px;
}
.views-even {
background-color: #fff;
min-height: 130px;
height: auto;
}
.views-odd {
background-color: #eee;
min-height: 130px;
height: auto;
}This produces the output on the left. The alternate row zebra stripes are now working but it looks like some of the other formatting is trashed. The image needs to be displayed in-line with the text wrapping around. And also we could do with fixing the punctuation and font attributes on the last edited and image count fields.To tidy up the image, we need to refer back to the template list and we'd see that we need to create a file views-view-field--image-gallery-latest-thumbnail-1.tpl.php which should be copied from the original views-view-field.tpl.php file in the image module views directory, but don't forget to rescan the templates in views. To float the image to the left, I used the follow code in the template file and added some css as well.
views-view-field--image-gallery-latest-thumbnail-1.tpl.php
<?php print "<div class='gallery-teaser'>" . $output . "</div>"; ?>style.css
.gallery-teaser {
float:left;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 0px;
clear:none;
}The desire is to have an inline title with the image count next to it in italic. To fix the title (actually the taxonomy term) click on Taxonomy: Term, then check the box next to Rewrite the output of this field then add the code shown to the left in the Text: field. We also need to reorder the fields by clicking on the up/down arrows in Fields and rearranging, and check the the correct fields are rendered inline by clicking on the gear icon next to Row Style: Fields and checking the required boxes. For the sake of brevity I haven't included screenshots of these last two steps, but if you are stuck leave a comment at the end of the article.We need to modify the image gallery count to something a little more succinct. The standard text There are x images in this gallery is somewhat unwieldy. So, again we will need to modify a default template file. Change to the sites/all/modules/views/theme directory and copy the default field template into the beezee theme directory and rename accordingly.
/sites/all/modules/views/theme> cp views-view-field.tpl.php ../../../themes/beezee/views/views-view-field--image-gallery-count.tpl.phpDon't forget to rescan the template files onces you have done this!
Now edit the file. I have changed the text to x Images but you can obviously change it to what you wish by modifying the preg_replace function parameters.
view-field--image-gallery-count.tpl.php
<?php
print preg_replace("/There are (\d+) images in this gallery/", "<i>$1 Images</i>", $output);
?>The final task is to change the Last Edited on text to small italic case. Follow the same process as before by rewriting the output field as show left.The exercise has now been completed and you should have a layout similar to that shown on the top right of this page.
