{"result":{"depiction_url":null,"edges":{"hasreference":{"objects":[{"created":"2026-10-07T11:13:36Z","object_id":{"id":1284,"is_a":["text","documentation","reference","model"],"name":"doc_model_model_media","title":"media","uri":"https:\/\/zotonic.com\/id\/1284"},"seq":1},{"created":"2026-10-07T11:13:36Z","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":2}],"predicate":{"id":2774,"is_a":["meta","predicate"],"name":"hasreference","title":{"_type":"trans","tr":{"en":"Documentation reference"}},"uri":"https:\/\/zotonic.com\/id\/hasreference"}},"refers":{"objects":[{"created":"2026-10-07T11:13:08Z","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:08Z","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:08Z","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:08Z","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}],"predicate":{"id":2409,"is_a":["meta","predicate"],"name":"refers","title":{"_type":"trans","tr":{"en":"Refers"}},"uri":"https:\/\/zotonic.com\/id\/refers"}},"relation":{"objects":[{"created":"2026-10-07T11:13:36Z","object_id":{"id":2833,"is_a":["text","documentation","userguide"],"name":"editor_image_accessibility","title":{"_type":"trans","tr":{"en":"Making images understandable"}},"uri":"https:\/\/zotonic.com\/id\/2833"},"seq":1}],"predicate":{"id":303,"is_a":["meta","predicate"],"name":"relation","title":{"_type":"trans","tr":{"nl":"Relatie","en":"Relation"}},"uri":"http:\/\/purl.org\/dc\/terms\/relation"}},"subject":{"objects":[{"created":"2026-10-07T11:13:36Z","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:36Z","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:36Z","object_id":{"id":2620,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_template","title":"Template","uri":"https:\/\/zotonic.com\/id\/2620"},"seq":3},{"created":"2026-10-07T11:13:36Z","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:36Z","object_id":{"id":2641,"is_a":["categorization","keyword","keyword_task"],"name":"zotonic_topic_render","title":"Render","uri":"https:\/\/zotonic.com\/id\/2641"},"seq":5}],"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":2945,"is_a":["text","documentation","developerguide"],"links":[{"rel":"self","target":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/2945"},{"rel":"hub","target":"https:\/\/zotonic.com\/.zotonic\/websub"}],"medium":null,"medium_url":null,"name":"developer_template_media","page_url":{"en":"https:\/\/zotonic.com\/docs\/2945\/display-images-with-mediaclasses","x-default":"https:\/\/zotonic.com\/docs\/2945\/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>"}},"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":"2026-10-07T11:12:56Z","creator_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"doc_editorial_bundle":true,"doc_editorial_edges":{"hasreference":[1284,1341],"relation":[2833],"subject":[2554,2563,2576,2620,2641]},"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:44Z","modifier_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"name":"developer_template_media","pivot_geocode":null,"pivot_location_lat":null,"pivot_location_lng":null,"privacy":0,"publication_end":"9999-06-01T00:00:00Z","publication_start":"2026-10-07T11:12:56Z","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":25,"visible_for":0},"uri":"https:\/\/zotonic.com\/id\/2945","uri_template":"https:\/\/zotonic.com\/id\/:id","websub":{"hub":"https:\/\/zotonic.com\/.zotonic\/websub","topic":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/2945"}},"status":"ok"}