Images And Galleries

Image Fields#

Use the explicit image shape when you want to be clear:

<img src="{{ hero_image.url }}" alt="{{ hero_image.alt }}">

Image-like fields can also be used directly in URL attributes:

<img src="{{ hero_image }}" alt="{{ hero_image.alt }}">

This works when ACF returns an attachment ID, array, object, or URL string.

Image Sizes And Formats#

Use image_size() when the image should use a named WordPress image size:

<img src="{{ hero_image | image_size("medium") }}" alt="{{ hero_image.alt }}">

Use webp or avif when the image should be converted to that format:

<img src="{{ hero_image | image_size("medium") | avif }}" alt="{{ hero_image.alt }}">

For custom sizes, regeneration, and cleanup, see Image Sizes.

Gallery Fields#

Gallery fields use loop syntax:

{{ gallery }}  <figure>    <img src="{{ url | image_size("thumbnail") }}" alt="{{ alt }}">    <figcaption>{{ caption }}</figcaption>  </figure>{{ /gallery }}

TemplateX recognizes gallery/image/photo-style field names, such as:

• gallery
• images
• photo_gallery
• project_photos

Gallery loops normalize image arrays, image IDs, and image URLs into the same item shape.

Gallery Item Values#

Inside a gallery loop, common values include: