Skip to content

assets.json: images and field bindings

This file declares bundled image files and, optionally, the content field each image initializes. Use it to supply a useful starting image instead of asking the owner to start with an empty page.

assets.json
{
"hero": {
"file": "assets/hero.webp",
"field": "hero.image",
"alt": "The studio team at work"
}
}
  • hero is the logical asset name. It is not an asset ID.
  • file is a project-relative file under assets/. Add your real image at that path; the JSON does not create it.
  • field points to the asset field hero.image defined in definition.json. The binding supplies that field’s starting image.
  • alt describes the image. Keep accessibility text meaningful, rather than repeating the filename.

The target must exist and have type asset. A field can have only one asset binding. Group paths such as hero.image are supported; do not point a binding at a text field or assume a path through a list will bind every item.

Fixture generation creates a deterministic ID for each bundled asset and binds it into content. It also supplies resolved image records. Staging imports bundled defaults into the store’s channel. The owner can then choose channel assets in the content editor.

Treat a selected asset value as an ID string, not as a URL. Use the SDK’s resolved asset object with Picture; do not build asset URLs yourself. The logical bundled name is also available for its default asset. For owner-editable images, look up the current selected ID:

---
import Picture from '@shoplifter/presentation-sdk/Picture.astro';
const { content, assets } = Astro.props;
const heroImage = content.hero.image ? assets[content.hero.image] : undefined;
---
{heroImage && <Picture asset={heroImage} alt={heroImage.alt ?? ''} sizes="100vw" />}

Run validation and build/output validation to check admitted files and image markup. See SDK components for the separate SDK 0.3.0 APIs for explicit external images and YouTube thumbnails; those URLs are not channel asset IDs.