Guides
Tutorials
Pop Tags

Gallery Fields

The gallery field is a collection of images managed by a widget that allows adding, deleting and easy reordering. Working with a gallery field is similar to working with individual images.

Lets say you have a gallery field called product_shots. Simply putting:

<pop:product_shots/>

This would output all the product shots as a stack of <img> elements, one after the other. As always when dealing with a tag for a collection you can use wrap, break and class shortcuts to customize the individual elements:

<pop:product_shots wrap="ul" break="li" class="product_shots"/>

This outputs all the product shots inside a <ul> with the class product shots wrapped in <li> tags.

You can access each image on it’s own by opening up the tag. Inside you’ll have access to the normal tags for an image: <pop:src/><pop:alt/>,<pop:width/>, and <pop:height/>.

You can also use <pop:value/> inside the product_shots tag to refer to the image:

<pop:product_shots wrap="ul" break="li" class="product-shots">
 
<figure>
   
<pop:value resize="limit" width="400"/>
   
<fig caption><pop:alt/></figcaption>
 
</figure>
</pop:product_shots>

If you'd like to randomize the order of images, check out this extension

Continue to File Fields »