An image the client can replace
fld-image="Field name" An image field in the admin: the client picks a picture from the media library, and it appears in place of the one in the design.
Where it goes
On the <img> itself. The build swaps its src for the field and removes srcset and sizes, so the browser shows the image from the admin, not an old copy.
“Load data” finds the picture in the media library by its file name or uploads it from the theme.
The field appears in the admin only if the page has a group name: wp-fields-group on its <body>.
Example: the photo in the hero
<img class="hero__img" src="images/latte.jpg"
srcset="images/latte-p-500.jpg 500w" sizes="50vw"
alt="Latte art" fld-image="Hero photo">What matters
- Only on
<img>. For a picture in the background of a block use fld-bg-image. altandclassstay as they are in the markup. In a list row each image takes its ownaltfrom the media library.- WordPress does not accept SVG into the media library: a picture bound to a field must be PNG, JPG or WebP.
Common mistakes
The build log is the “Logs” tab of your project on themeforge.pro; the free markup check shows the same notes.
<div class="hero" fld-image="Hero photo"></div>On a block the attribute prints nothing; the build log flags the wrong element.
<div class="hero" fld-bg-image="Hero photo"></div>A background picture of a block is a job for fld-bg-image.
The same in site settings or on a category
fld-image | on a page or post |
|---|---|
opt-image | in site settings, such as a logo |
tax-image | on a category or tag, such as a category cover |
Alternative spelling
f_image, o_image, t_image works the same: the build gives an identical theme.