{"result":{"depiction_url":null,"edges":{"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"}}},"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\/media","x-default":"https:\/\/zotonic.com\/docs\/1280\/media"},"preview_url":null,"resource":{"body":"
\n \n
\n\n

Resources<\/span><\/a> can have media resources attached to them.\nResources and their media (images, video and audio) are connected through\n‘depiction’ edges<\/span><\/a>. Additionally, resources can be embedded<\/em> in\nsome HTML text, such as the resource’s body text.<\/p>\n

\n

Adding media<\/h2>\n

Media is added to resources with the ‘Add media item’ button in the admin. You\ncan embed resources by using the admin’s rich text editor.<\/p>\n

Programmatically, use the m_media<\/span><\/a> model to insert the media resource:<\/p>\n

<\/span>{<\/span>ok<\/span>,<\/span> MediaId<\/span>}<\/span> =<\/span> m_media<\/span>:<\/span>insert_url<\/span>(<\/span>"http:\/\/some-site\/images\/img.jpg"<\/span>,<\/span> Context<\/span>).<\/span>\n<\/pre><\/div>\n<\/div>\n
Or, with some properties:<\/p>\n
<\/span>Props<\/span> =<\/span> [<\/span>\n    {<\/span>title<\/span>,<\/span> <<<\/span>"This will be the title of the media resource"<\/span>>><\/span>},<\/span>\n    {<\/span>category<\/span>,<\/span> audio<\/span>},<\/span>\n    {<\/span>is_published<\/span>,<\/span> true<\/span>}<\/span>\n],<\/span>\n{<\/span>ok<\/span>,<\/span> MediaId<\/span>}<\/span> =<\/span> m_media<\/span>:<\/span>insert_file<\/span>(<\/span>"\/path\/to\/audio.wav"<\/span>,<\/span> Props<\/span>,<\/span> Context<\/span>).<\/span>\n<\/pre><\/div>\n<\/div>\n
Then link the owning resource and the media resource:<\/p>\n
<\/span>m_edge<\/span>:<\/span>insert<\/span>(<\/span>Id<\/span>,<\/span> depiction<\/span>,<\/span> MediaId<\/span>,<\/span> Context<\/span>).<\/span>\n<\/pre><\/div>\n<\/div>\n<\/div>\n
\n
In templates<\/h2>\n
To render some resource’s (id<\/span><\/code>) first depiction, use the image<\/span><\/a>\ntag:<\/p>\n
<\/span>{%<\/span> image<\/span> id<\/span> %}<\/span><\/span>\n<\/pre><\/div>\n<\/div>\n
You can also add inline parameters<\/span><\/a>:<\/p>\n
<\/span>{%<\/span> image<\/span> id<\/span> width<\/span>=<\/span>200<\/span> height<\/span>=<\/span>200<\/span> crop<\/span> %}<\/span><\/span>\n<\/pre><\/div>\n<\/div>\n
To render embedded media, use the show_media<\/span><\/a> filter:<\/p>\n
<\/span>{{<\/span> id.body<\/span>|<\/span>show_media<\/span> }}<\/span><\/span>\n<\/pre><\/div>\n<\/div>\n<\/div>\n
\n<\/a>
Media classes<\/h2>\n
Instead of inline image tag parameters, you can use media classes to define\nimage transformations. The advantage is that this image definition can then be\nreused amongst templates.<\/p>\n
Create a templates\/mediaclass.config<\/span><\/code> file in your site directory:<\/p>\n
<\/span>[<\/span>\n    {<\/span>"thumb"<\/span>,<\/span> [<\/span>\n        {<\/span>width<\/span>,<\/span> 200<\/span>},<\/span>\n        {<\/span>height<\/span>,<\/span> 200<\/span>},<\/span>\n        crop<\/span>\n    ]}<\/span>\n].<\/span>\n<\/pre><\/div>\n<\/div>\n
This defines a media class called ‘thumb’, which can be used to display a\n120x120 cropped square image. You then only need to refer to this media class in\nyour image tag:<\/p>\n
<\/span>{%<\/span> image<\/span> id<\/span> mediaclass<\/span>=<\/span>"thumb"<\/span> %}<\/span><\/span>\n<\/pre><\/div>\n<\/div>\n
The image URL will have a checksum embedded in it so that when the contents of\nthe media class is changed, all images which use that media class will be\nregenerated to reflect the new media class.<\/p>\n
\n
Responsive images<\/h3>\n
To provide images in multiple responsive sizes<\/a>, use the srcset<\/span><\/code> attribute:<\/p>\n
<\/span>%% templates\/mediaclass.config<\/span>\n[<\/span>\n    {"masthead", [<\/span>\n        {width, 1600},<\/span>\n        {height, 900},<\/span>\n        {crop, center},<\/span>\n        upscale,<\/span>\n        {quality, 85},<\/span>\n        {srcset, [<\/span>\n            {"640w", [{quality, 50}]},<\/span>\n            {"1200w", []},<\/span>\n            {"2x", []}<\/span>\n        ]},<\/span>\n        {sizes, "100vw"}<\/span>\n    ]}<\/span>\n].<\/span>\n<\/pre><\/div>\n<\/div>\n
An {%<\/span> image<\/span> id<\/span> mediaclass="masthead"<\/span> %}<\/span><\/code> tag in your template will output:<\/p>\n
<\/span><img src='image-default.jpg'<\/span>\n    sizes='100vw'<\/span>\n    srcset='image-640.jpg 640w, image-1200.jpg 1200w, image-2400.jpg 2x'<\/span>\n    class="mediaclass-masthead"><\/span>\n<\/pre><\/div>\n<\/div>\n
Each srcset<\/span><\/code> value is either a width descriptor<\/a> or a pixel density\ndescriptor.<\/p>\n\n