{"result":{"depiction_url":null,"edges":{"hasreference":{"objects":[{"created":"2026-10-07T11:13:48Z","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":1},{"created":"2026-10-07T11:13:48Z","object_id":{"id":3084,"is_a":["text","documentation","adminguide"],"name":"admin_media_sandbox","title":{"_type":"trans","tr":{"en":"Configure media sandboxing and an optional media runner"}},"uri":"https:\/\/zotonic.com\/id\/3084"},"seq":2},{"created":"2026-10-07T11:13:48Z","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":3}],"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:19Z","object_id":{"id":1279,"is_a":["text","documentation"],"name":"doc_glossary","title":"Glossary","uri":"https:\/\/zotonic.com\/id\/1279"},"seq":1000000},{"created":"2020-05-30T05:47:19Z","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":"2020-05-30T05:47:19Z","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":"2020-05-30T05:47:19Z","object_id":{"id":1342,"is_a":["text","documentation","reference","template_filter"],"name":"doc_template_filter_filter_show_media","title":"show_media","uri":"https:\/\/zotonic.com\/id\/1342"},"seq":1000000}],"predicate":{"id":332,"is_a":["meta","predicate"],"name":"references","title":{"_type":"trans","tr":{"en":"References"}},"uri":"https:\/\/zotonic.com\/id\/references"}},"subject":{"objects":[{"created":"2026-10-07T11:13:48Z","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:48Z","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:48Z","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:48Z","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:48Z","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:48Z","object_id":{"id":2620,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_template","title":"Template","uri":"https:\/\/zotonic.com\/id\/2620"},"seq":6}],"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":1280,"is_a":["text","documentation","developerguide"],"links":[{"rel":"self","target":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1280"},{"rel":"hub","target":"https:\/\/zotonic.com\/.zotonic\/websub"}],"medium":null,"medium_url":null,"name":"doc_developerguide_media","page_url":{"en":"https:\/\/zotonic.com\/docs\/1280\/render-and-manage-media","x-default":"https:\/\/zotonic.com\/docs\/1280\/render-and-manage-media"},"preview_url":null,"resource":{"body":{"_type":"trans","tr":{"en":"<p>A media item is a resource with a medium record. Use its resource ID or unique name in templates; do not build a public URL from the archive filename. The image tag selects and generates the requested preview:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-django\">{% image id.depiction mediaclass=&quot;thumb&quot; alt=id.title %}\n<\/code><\/pre>\n<p>Define the class in the site&#39;s <code>priv\/templates\/mediaclass.config<\/code>:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-erlang\">[\n    {&quot;thumb&quot;, [{width, 200}, {height, 200}, {crop, center}]},\n    {&quot;masthead&quot;, [\n        {width, 1600}, {quality, 85},\n        {srcset, [{&quot;640w&quot;, []}, {&quot;1200w&quot;, []}, {&quot;1600w&quot;, []}]},\n        {sizes, &quot;100vw&quot;}\n    ]}\n].\n<\/code><\/pre>\n<p><code>thumb<\/code> is a 200 by 200 cropped image. <code>masthead<\/code> uses width descriptors consistently. Do not mix <code>w<\/code> descriptors with <code>1x<\/code>\/<code>2x<\/code> density descriptors in a single <code>srcset<\/code>. Adjust <code>sizes<\/code> to the actual rendered layout, not merely the source width.<\/p>\n<p>After changing the configuration, let development discovery reload it or refresh the module index. Render <code>{% image id.depiction mediaclass=&quot;masthead&quot; %}<\/code> and inspect the generated image, <code>srcset<\/code>, and network requests at different viewport widths. Test the original&#39;s dimensions and access permissions when a preview is missing.<\/p>\n<p>On the server, <code>m_media:get(Id, Context)<\/code> returns metadata or <code>undefined<\/code>. Use <code>m_media:insert_file\/3<\/code> or <code>m_media:replace_file\/3<\/code> with the current context and handle their results; check their source contracts when supplying resource or medium properties. Importing a resource that points at remote media does not mean its asynchronous download has completed.<\/p>\n<p>Keep the archive and database together in backups. Media generation depends on external tools, storage permissions, and the media sandbox. Diagnose the failing stage rather than disabling the sandbox for the whole installation.<\/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:16Z","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":[2954,3003,3084],"subject":[2554,2563,2564,2576,2619,2620]},"github_url":"https:\/\/github.com\/zotonic\/zotonic\/tree\/master\/doc\/developer-guide\/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:14:01Z","modifier_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"name":"doc_developerguide_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:32Z","slug":"render-and-manage-media","summary":{"_type":"trans","tr":{"en":"Use resource IDs, media metadata and consistent responsive-image descriptors."}},"title":{"_type":"trans","tr":{"en":"Render and manage media"}},"title_slug":{"_type":"trans","tr":{"en":"render-and-manage-media"}},"tz":"UTC","uri":null,"version":39,"visible_for":0},"uri":"https:\/\/zotonic.com\/id\/1280","uri_template":"https:\/\/zotonic.com\/id\/:id","websub":{"hub":"https:\/\/zotonic.com\/.zotonic\/websub","topic":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1280"}},"status":"ok"}