Tag Usage

This section describes how to use JPT's liquid tag ( {% picture (...) %} ); what options it takes and what kind of information you can pass through it to influence the the final HTML and generated images.

Format

{% picture [preset] (image) [crop] [alternate images & crops] [attributes] %}

The only required argument is the base image. Line breaks and extra spaces are fine, and you can use liquid variables anywhere.

  • preset - Select a recipe/blueprint from the ones you have defined in presets. Will use default if not specified.

  • (image) - required.

  • crop - Aspect ratio & keep settings.

  • alternate images & crops - Art Direction; show different images on different devices. Give in order of ascending specificity.

  • attributes - Add css classes, data-attributes, or wrap the whole thing in an anchor tag.