Skip to content

Image formatter#

The Image (image) formatter displays an image with configurable Image style.

Settings#

Label Setting Description Default
Image style image_style An optional image style to apply
Link image to image_link Option to link image to content or file
Image loading attribute image_loading.attribute Option to lazily load images with attribute lazy1 or eager2 lazy

Style settings#

These additional style settings give you complete control over the HTML markup generated by each subfield. This is one of the most powerful features of the Custom Field module for theming.

By customizing the wrapper tags and classes, you can:

  • Create clean, semantic HTML that matches your theme’s design system
  • Target individual subfields precisely with CSS (using subfield name and type)
  • Reduce CSS specificity issues and override battles
  • Improve accessibility and SEO with proper semantic elements (<section>, <article>, <h3>, etc.)
  • Easily integrate with CSS frameworks like Tailwind, Bootstrap, or custom component libraries

Default behavior (when left empty) produces a <div> wrapper with intelligent, predictable classes based on the subfield name and type — giving you excellent theming hooks right out of the box.

Setting Label Description
field_wrapper_tag Field wrapper tag HTML element that wraps the entire field + label
field_wrapper_class Field wrapper class Optional additional classes (space separated)
field_tag Field tag HTML element that wraps only the field value
field_class Field classes Optional field value classes (space separated)
label_tag Label tag HTML element that wraps the label
label_class Label classes Optional label classes (space separated)

Field types#

  1. Lazy (loading="lazy") – Delays loading the image until that section of the page is visible in the browser. When in doubt, lazy loading is recommended. ↩

  2. Eager (loading="eager") – Force browser to download an image as soon as possible. This is the browser default for legacy reasons. Only use this option when the image is always expected to render. ↩