Resizing images on the fly

When you add an image field to a form for any section, category or entry Webpop gives you an easy way to generate thumbnails in all the sizes you need. As with any field added to a form, the image field can be used from within the tags <pop:content>, <pop:entries>, <pop:sections> or <pop:categories>.

Lets say you have a section called "About us" with an image field "our_office" and you want to show a small version of the office photo in the sidebar of your website. The following markup would accomplish that:

<pop:content from="about-us"> <pop:our_office resize="fit" width="200" /> </pop:content>

This will generate something like:

<img src="url-for-the-image-resized-to-fit-in-200px" alt="Alt text of the image" />

If you leave the resize attribute out the original version of the image will be used. The resize attribute can be set to either:

• fit: This will scale the image proportionally so it fits within the specified width/height without cropping
• limit: The same as fit with the exception that limit will never scale the image up
• fill: This will scale the image so it fills the specified box and crop any part of the image that doesn't fit

Lets look at an example. First the original image (240x180):

This is how it looks like with a resize to fit 300 pixels:

<pop:image resize="fit" width="300" />

When limiting it to a width and a height of 200 pixels:

<pop:image resize="limit" width="200" height="200" /> 

And when resizing it to fill 200 x 200 pixels:

<pop:image resize="fill" width="200" height="200" />: 

A typical use-case for on-the-fly resizing would be a gallery with a lightbox effect.

Suppose you have a section "Gallery" with entries enabled and you configure the entry form to have just the title, description and an image field called "photo". Now in the template for "Gallery" we could do the following:

<pop:entries wrap="ul" break="li">
<a href="<pop:photo.src />" class="lightbox">
<pop:photo resize="fill" width="200" height="200" /></a>
</pop:entries>

Now a script like Fancybox can easily be hooked up to give you a great lightbox effect for your gallery.

Gallery Fields

Working with a gallery field is not very different from working with individual images.

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

<pop:product_shots /> 

Would give you all the product shots. 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 would show all the product shots inside a <ul> with the class product shots wrapped in <li> tags.

You can also 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" />
 <figcaption><pop:alt /></figcaption>
 </figure>
</pop:product_shots>