Styling the Image Field Pager Gallery

Introduction

I felt a tad guilty with the image pager tutorial tutorial where it concluded with a non-styled version of a image field gallery. It was not much effort to add the styling, for I had already defined some css classes in the image theming tutorial which I could utilize. 

So in this tutorial we will be adding come styling in the template.php file and also include the Colorbox support in there.

Prerequisite

​This tutorial will not make much sense unless you have seen the image pager tutorial for we will be making our changes in it's temeplate.php file.

Method

First of all we will add the styling to the images. We already have the defined css files so we just need to call them from inside the template.php with some html calls as such.

These lines of code will be inserted before the theme function called inside the foreach loop.

<?php
 
 $image .= "\n<div id=\"add-photo-format\">\n";
 $image .= "\n<div id=\"add-photo-format-photo\">\n";
 
?>

And these lines after the foreach function call

<?php
 
 $image .= " </div>\n";
 $image .= " </div>\n";
 
?>

Remember to remove the php tags if you are copying and pasting directly from here

Since we have already provided the css class definitions from the image pager tutorial we can go ahead and refresh the pager and should get something looking like this.

As you can see all we did was add some html div's around the theme function call.

Now we will add the support for Colorbox. Before adding any code to the template.php file we will enable the support the "colorbox-load" class inside the Colorbox settings inside the configuration page so it looks like this

Now add this code in the same place above the theme function call

<?php
 
 $image .= "\n<a class='colorbox-load' href='\n";
 $image .= image_style_url('extra_large',  $node->field_image_pager['und'][$record->delta]['uri']);
 $image .= "\n'>\n";
 
?>

And this code below the theme function

<?php
 
 " </a>\n";
 
?>

Remember to leave out the php tags if you are copying directly from this site.

Again we are inserting a css class, the information for this was provided from Colorbox help. In this case we had to provide the colorbox-load class with the image style provided which in this case was an image_style I had created myself called 'extra-large'  and the location of the image itself for which I use the function call 'image_style_url'.

Here is the entire code for the foreach function

<?php
 
foreach ($result as $record) {
           $image .= "\n<div id=\"add-photo-format\">\n";
           $image .= "\n<div id=\"add-photo-format-photo\">\n";
           $image .= "\n<a class='colorbox-load' href='\n";
           $image .= image_style_url('extra_large',  $node->field_add_photo_field[$record->delta]['uri']);
           $image .= "\n'>\n";
           $image .= theme('image_style', array(
              'path' => $node->field_add_photo_field[$record->delta]['uri'],
              'style_name' => 'thumbnail',
            ));
           " </a>\n";
           $image .= " </div>\n";
           $image .= " </div>\n";
      }
 
?>

Again you are are going to copy and paste this code portion remember to leave out the php tags.

Conclusion

This tutorial used the image field pager as an example to provide some styling and adding Colorbox support to templates.