{"result":{"depiction_url":null,"edges":{"hasreference":{"objects":[{"created":"2026-10-07T11:13:38Z","object_id":{"id":2945,"is_a":["text","documentation","developerguide"],"name":"developer_template_media","title":{"_type":"trans","tr":{"en":"Display images with mediaclasses"}},"uri":"https:\/\/zotonic.com\/id\/2945"},"seq":1},{"created":"2026-10-07T11:13:38Z","object_id":{"id":2954,"is_a":["text","documentation","developerguide"],"name":"developer_media_data","title":{"_type":"trans","tr":{"en":"Work with uploaded media"}},"uri":"https:\/\/zotonic.com\/id\/2954"},"seq":2}],"predicate":{"id":2774,"is_a":["meta","predicate"],"name":"hasreference","title":{"_type":"trans","tr":{"en":"Documentation reference"}},"uri":"https:\/\/zotonic.com\/id\/hasreference"}},"references":{"objects":[{"created":"2020-05-30T05:47:40Z","object_id":{"id":1280,"is_a":["text","documentation","developerguide"],"name":"doc_developerguide_media","title":{"_type":"trans","tr":{"en":"Render and manage media"}},"uri":"https:\/\/zotonic.com\/id\/1280"},"seq":1000000}],"predicate":{"id":332,"is_a":["meta","predicate"],"name":"references","title":{"_type":"trans","tr":{"en":"References"}},"uri":"https:\/\/zotonic.com\/id\/references"}},"refers":{"objects":[{"created":"2026-10-07T11:13:03Z","object_id":{"id":1284,"is_a":["text","documentation","reference","model"],"name":"doc_model_model_media","title":"media","uri":"https:\/\/zotonic.com\/id\/1284"},"seq":1000000},{"created":"2026-10-07T11:13:03Z","object_id":{"id":1341,"is_a":["text","documentation","reference","template_tag"],"name":"doc_template_tag_tag_image","title":"image","uri":"https:\/\/zotonic.com\/id\/1341"},"seq":1000000},{"created":"2026-10-07T11:13:03Z","object_id":{"id":2945,"is_a":["text","documentation","developerguide"],"name":"developer_template_media","title":{"_type":"trans","tr":{"en":"Display images with mediaclasses"}},"uri":"https:\/\/zotonic.com\/id\/2945"},"seq":1000000},{"created":"2026-10-07T11:13:03Z","object_id":{"id":2947,"is_a":["text","documentation","developerguide"],"name":"developer_asset_build","title":{"_type":"trans","tr":{"en":"Build and serve frontend assets"}},"uri":"https:\/\/zotonic.com\/id\/2947"},"seq":1000000},{"created":"2026-10-07T11:13:03Z","object_id":{"id":2954,"is_a":["text","documentation","developerguide"],"name":"developer_media_data","title":{"_type":"trans","tr":{"en":"Work with uploaded media"}},"uri":"https:\/\/zotonic.com\/id\/2954"},"seq":1000000},{"created":"2026-10-07T11:13:03Z","object_id":{"id":2993,"is_a":["text","documentation","developerguide"],"name":"developer_storage_configuration","title":{"_type":"trans","tr":{"en":"Configure persistent file storage"}},"uri":"https:\/\/zotonic.com\/id\/2993"},"seq":1000000},{"created":"2026-10-07T11:13:03Z","object_id":{"id":3003,"is_a":["text","documentation","developerguide"],"name":"developer_missing_media","title":{"_type":"trans","tr":{"en":"An uploaded image does not display"}},"uri":"https:\/\/zotonic.com\/id\/3003"},"seq":1000000}],"predicate":{"id":2409,"is_a":["meta","predicate"],"name":"refers","title":{"_type":"trans","tr":{"en":"Refers"}},"uri":"https:\/\/zotonic.com\/id\/refers"}},"subject":{"objects":[{"created":"2026-10-07T11:13:38Z","object_id":{"id":2554,"is_a":["categorization","keyword","keyword_information_type"],"name":"zotonic_topic_how_to_guide","title":"How-to guide","uri":"https:\/\/zotonic.com\/id\/2554"},"seq":1},{"created":"2026-10-07T11:13:38Z","object_id":{"id":2563,"is_a":["categorization","keyword","keyword_audience"],"name":"zotonic_topic_frontend_developer","title":"Frontend developer","uri":"https:\/\/zotonic.com\/id\/2563"},"seq":2},{"created":"2026-10-07T11:13:38Z","object_id":{"id":2564,"is_a":["categorization","keyword","keyword_audience"],"name":"zotonic_topic_backend_developer","title":"Backend developer","uri":"https:\/\/zotonic.com\/id\/2564"},"seq":3},{"created":"2026-10-07T11:13:38Z","object_id":{"id":2576,"is_a":["categorization","keyword","keyword_domain"],"name":"zotonic_topic_media_management","title":"Media management","uri":"https:\/\/zotonic.com\/id\/2576"},"seq":4},{"created":"2026-10-07T11:13:38Z","object_id":{"id":2619,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_media_resource","title":"Media resource","uri":"https:\/\/zotonic.com\/id\/2619"},"seq":5},{"created":"2026-10-07T11:13:38Z","object_id":{"id":2620,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_template","title":"Template","uri":"https:\/\/zotonic.com\/id\/2620"},"seq":6},{"created":"2026-10-07T11:13:38Z","object_id":{"id":2577,"is_a":["categorization","keyword","keyword_domain"],"name":"zotonic_topic_image_management","title":"Image management","uri":"https:\/\/zotonic.com\/id\/2577"},"seq":7}],"predicate":{"id":308,"is_a":["meta","predicate"],"name":"subject","title":{"_type":"trans","tr":{"en":"Keyword"}},"uri":"http:\/\/purl.org\/dc\/elements\/1.1\/subject"}}},"id":1854,"is_a":["text","documentation","developerguide"],"links":[{"rel":"self","target":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1854"},{"rel":"hub","target":"https:\/\/zotonic.com\/.zotonic\/websub"}],"medium":null,"medium_url":null,"name":"doc_bestpractices_media","page_url":{"en":"https:\/\/zotonic.com\/docs\/1854\/display-images-with-mediaclasses","x-default":"https:\/\/zotonic.com\/docs\/1854\/display-images-with-mediaclasses"},"preview_url":null,"resource":{"body":{"_type":"trans","tr":{"en":"<p>Define reusable image sizes in <code>priv\/templates\/mediaclass.config<\/code> and use them in image tags. For example, a local mediaclass can constrain an image&#39;s width:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-erlang\">[\n    {garden_card, [{width, 640}]}\n].\n<\/code><\/pre>\n<pre class=\"notranslate\"><code class=\"notranslate language-django\">{% image id mediaclass=&quot;garden_card&quot; alt=id.title %}\n<\/code><\/pre>\n<p>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.<\/p>\n<p>Use <a href=\"\/id\/1284\" class=\"doc-reference doc-reference-model\"><code>model#media<\/code><\/a> for media information and <a href=\"\/id\/1341\" class=\"doc-reference doc-reference-tag\"><code>tag#image<\/code><\/a> for rendering. See <a href=\"\/id\/2954\">Work with uploaded media<\/a> and <a href=\"\/id\/2947\">Build and serve frontend assets<\/a>.<\/p>\n<h2>Work with uploaded media<\/h2>\n<p>A media resource has ordinary content properties and information about its associated file. Use <a href=\"\/id\/1284\" class=\"doc-reference doc-reference-model\"><code>model#media<\/code><\/a> to inspect and manipulate media through Zotonic&#39;s normal processing path.<\/p>\n<p>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&#39;s media type, processing status, and storage configuration before replacing the resource.<\/p>\n<p>Use media APIs for replacement and deletion so derived files and notifications remain consistent. Do not construct archive filenames from titles. See <a href=\"\/id\/2945\">Display images with mediaclasses<\/a>, <a href=\"\/id\/2993\">Configure persistent file storage<\/a>, and <a href=\"\/id\/3003\">An uploaded image does not display<\/a>.<\/p>"}},"category_id":{"id":317,"is_a":["meta","category"],"name":"developerguide","title":"Developer guide","uri":"https:\/\/zotonic.com\/id\/developerguide"},"content_group_id":{"id":339,"is_a":["meta","content_group"],"name":"default_content_group","title":{"_type":"trans","tr":{"en":"Default Content Group"}},"uri":"https:\/\/zotonic.com\/id\/default_content_group"},"created":"2020-05-30T05:47:40Z","creator_id":{"id":336,"is_a":["person","robot"],"name":"gitbot","title":"Git","uri":"https:\/\/zotonic.com\/id\/336"},"doc_editorial_bundle":true,"doc_editorial_edges":{"hasreference":[2945,2954],"subject":[2554,2563,2564,2576,2577,2619,2620]},"github_url":"https:\/\/github.com\/zotonic\/zotonic\/tree\/master\/doc\/best-practices\/media.rst","is_authoritative":true,"is_dependent":false,"is_featured":false,"is_protected":false,"is_published":true,"is_unfindable":false,"language":["en"],"modified":"2026-10-07T11:13:47Z","modifier_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"name":"doc_bestpractices_media","pivot_geocode":null,"pivot_location_lat":null,"pivot_location_lng":null,"privacy":0,"publication_end":"9999-06-01T00:00:00Z","publication_start":"2022-02-15T10:01:27Z","slug":"display-images-with-mediaclasses","summary":{"_type":"trans","tr":{"en":"Define reusable image sizes in priv\/templates\/mediaclass.config and use them in image tags. For example, a local mediaclass can constrain an image&#39;s width:"}},"title":{"_type":"trans","tr":{"en":"Display images with mediaclasses"}},"title_slug":{"_type":"trans","tr":{"en":"display-images-with-mediaclasses"}},"tz":"UTC","uri":null,"version":45,"visible_for":0},"uri":"https:\/\/zotonic.com\/id\/1854","uri_template":"https:\/\/zotonic.com\/id\/:id","websub":{"hub":"https:\/\/zotonic.com\/.zotonic\/websub","topic":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1854"}},"status":"ok"}