Pop Tags

Image Fields

Adding an image field to a content form lets users upload new images or pick existing images from the image browser. Uploaded images are not stored among the public design files of the project and can be much larger in size. They are automatically served out of Akamai’s Content Delivery Network and can be dynamically resized from your templates using PopTags.

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"/>

This will generate something like:

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

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: Scales the image proportionally so it fits within the specified width/height without cropping.
  • limit: Does the same as fit except it won't scale the image past 100% it's original size.
  • fill: Scales the image to fill the specified box and crops any part of the image that doesn’t fit.

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

Original image

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

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

Fit to a width of 300

When limiting to a width and height of 200 pixels:

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

Limit to a width and height of 200

And when resizing to fill 200 x 200 pixels:

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

Filling a square of 200x200

By default simply using the image field as a tag will output a full <img> element with the right dimensions and file source, but sometimes you want to pull in just the source of the image. A typical use-case 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:src/>" class="lightbox">
      <img src="
<pop:src resize='fill' width='200' height='200'/>" alt="<pop:alt/>"/>

Now scripts like Fancybox or Galleria can easily be hooked up to give you a great lightbox effect or slider for your gallery.

Continue to Gallery Fields »