Drupal 7 Theming Image field gallery

Drupal 7 theming example for image field galleries by kiwipion

Introduction

From the field gallery tutorial we ened up with a gallery image view as such

This tutorial will use some basic theming to turn the field gallery into something like this.

Where with some basic theming techniques using views and css we can can some separation, borders, coloring and image names.

Material Covered 

• Using views to rewrite the output of the image field.
• Some basic css to add eye candy.

Implementation

Go into your gallery view, select the image field and click the rewrite results tab as such

Now add some div's insert the image and titile fields, notice how the fields are copied from the replacement tokens section.

<div id="add-photo-format">
<div id="add-photo-format-photo" align=center>[field_add_photo_1]</div>
<div id="add-photo-format-title" align=center>[field_add_photo_1-title]</div>
</div>

Now go into your themes css file and start adding your formatting. For refereence this is what I have done, but this is the place for you to play and create your master piece :-)

#add-photo-format {
    float: left;
    display: block;
    padding:10px;
    border:2px solid black;
    width: 110px;
    margin:10px;
    background-color:lightgray;
}
 
#add-photo-format-photo img {
    border: solid 6px white;
}
 
#add-photo-format-title {
    color:red;
    font-weight:bold;
    font-style:italic; 
    font-size:small;
    text-align:center;
}

Now flush your caches theme registry, those who follow these tutorials know I use drush and the command for that is drush cc , then select option 2.

And this is the final result, which has giving you an example of one way of using views to do theming on fields.

The feature for this can be downloaded from this link

That's all for this session folks and remember don't forget to flush your cache ;-)