Advanced TopicsLast updated: 4 February 2026

What “art direction” means

In this add-on, art direction means selecting different images for different viewport conditions (most commonly, different viewport widths).

This is different from:

• Responsive images via srcset/sizes on a single <img> tag (same image content, different resolutions)
• Using <picture> only for file format fallbacks (for example AVIF/WebP/JPEG).

JCOGS Image Pro already provides support for these two use cases via automatic browser capability checks and its built-in support for responsive image definition.

Art direction is about creative/layout-driven swaps (for example “wide landscape on desktop” vs “tight portrait crop on mobile”), which requires different source images, not just different sizes.

Real-world example

Imagine a hero banner where:

• On desktop, you want a wide landscape photo that shows the full scene.
• On mobile, you want a tighter portrait crop that keeps the subject large and readable.

With art direction enabled, a content editor can:

1. Select a strong “default” (main) image.
2. Add a mobile breakpoint row (for example media="(max-width: 600px)") and choose a different alternate image that is framed specifically for small screens.

If the user’s device matches the mobile media query, the alternate image is served. Otherwise, the browser falls back to the main image.

Behaviour

When art direction is enabled in field settings:

• The main image is always the default/fallback.
• Breakpoint rows can optionally select alternate images.
• When alternates exist, {field:img} may output a <picture> element with one or more <source> tags and a fallback <img>.

In other words:

• If no alternates are set, {field:img} behaves as a normal image output.
• If one or more alternates are set, {field:img} will switch to <picture> so that different images can be served for different media queries.

Presets per breakpoint

Depending on how the developer configured the field, each breakpoint row may:

• Inherit the main/default preset
• Use an explicit preset chosen for that breakpoint
• Use no preset for that breakpoint

This allows you to keep a consistent “house style” while still having the freedom to pick different source images per breakpoint.

Template access

The simplest way to use art direction is to rely on {field:img}: the field can output <img> or <picture> automatically.

If you need more control, you can iterate breakpoint rows via the art-direction pair:

{field pair="art_direction"}
    {if file_id}
        <source media="{media}" srcset="{url}">
    {/if}
{/field}
Current limitation
Crop and focal intent are applied only to the main/default image. Alternate images are rendered using the breakpoint row preset handling described above.