Display images with mediaclasses

Define reusable image sizes in priv/templates/mediaclass.config and use them in image tags. For example, a local mediaclass can constrain an image's width:

[
    {garden_card, [{width, 640}]}
].

{% image id mediaclass="garden_card" alt=id.title %}

Choose a meaningful description for an image when its purpose is not captured by the title. Check both portrait and landscape source images. Cropping is a design decision; do not add it automatically to every size.

Use model#media for media information and tag#image for rendering. See Work with uploaded media and Build and serve frontend assets.

Work with uploaded media

A media resource has ordinary content properties and information about its associated file. Use model#media to inspect and manipulate media through Zotonic's normal processing path.

Keep the archive file and generated previews separate in your reasoning. A missing preview can be a processing problem even when the original upload is present. Check the file's media type, processing status, and storage configuration before replacing the resource.

Use media APIs for replacement and deletion so derived files and notifications remain consistent. Do not construct archive filenames from titles. See Display images with mediaclasses, Configure persistent file storage, and An uploaded image does not display.