{"result":{"depiction_url":null,"edges":{"in_module":{"objects":[{"created":"2020-05-30T05:47:48Z","object_id":{"id":1296,"is_a":["text","documentation","reference","module"],"name":"doc_module_mod_base","title":"mod_base","uri":"https:\/\/zotonic.com\/id\/1296"},"seq":1000000}],"predicate":{"id":333,"is_a":["meta","predicate"],"name":"in_module","title":{"_type":"trans","tr":{"en":"In module"}},"uri":"https:\/\/zotonic.com\/id\/in_module"}},"relation":{"objects":[{"created":"2020-05-30T05:47:48Z","object_id":{"id":1909,"is_a":["text","documentation","reference","template_filter"],"name":"doc_template_filter_filter_embedded_media","title":"embedded_media","uri":"https:\/\/zotonic.com\/id\/1909"},"seq":1000000},{"created":"2020-05-30T05:47:48Z","object_id":{"id":1908,"is_a":["text","documentation","reference","template_filter"],"name":"doc_template_filter_filter_without_embedded_media","title":"without_embedded_media","uri":"https:\/\/zotonic.com\/id\/1908"},"seq":1000000},{"created":"2023-11-16T08:23:30Z","object_id":{"id":2391,"is_a":["text","documentation","reference","template_filter"],"name":"doc_template_filter_filter_media_for_language","title":"media_for_language","uri":"https:\/\/zotonic.com\/id\/2391"},"seq":1000000}],"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-09-09T13:47:56Z","object_id":{"id":2555,"is_a":["categorization","keyword","keyword_information_type"],"name":"zotonic_topic_reference","title":"Reference","uri":"https:\/\/zotonic.com\/id\/2555"},"seq":1},{"created":"2026-09-09T13:47:56Z","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-09-09T13:47:56Z","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":3},{"created":"2026-09-09T13:47:56Z","object_id":{"id":2621,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_template_filter","title":"Template filter","uri":"https:\/\/zotonic.com\/id\/2621"},"seq":4},{"created":"2026-09-09T13:47:56Z","object_id":{"id":2641,"is_a":["categorization","keyword","keyword_task"],"name":"zotonic_topic_render","title":"Render","uri":"https:\/\/zotonic.com\/id\/2641"},"seq":5},{"created":"2026-09-09T13:47:56Z","object_id":{"id":2672,"is_a":["categorization","keyword","keyword_technology"],"name":"zotonic_topic_html","title":"HTML","uri":"https:\/\/zotonic.com\/id\/2672"},"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":1342,"is_a":["text","documentation","reference","template_filter"],"links":[{"rel":"self","target":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1342"},{"rel":"hub","target":"https:\/\/zotonic.com\/.zotonic\/websub"}],"medium":null,"medium_url":null,"name":"doc_template_filter_filter_show_media","page_url":{"en":"https:\/\/zotonic.com\/docs\/1342\/show_media","x-default":"https:\/\/zotonic.com\/docs\/1342\/show_media"},"preview_url":null,"resource":{"version":3988,"pivot_location_lat":null,"title":"show_media","is_authoritative":true,"body":"

Convert the image markers in HTML from the Rich Text editor into image tags.<\/p>\n

When you add images in the Rich Text editor of the Zotonic admin, the HTML body text does not store <img><\/code> tags, but\ninstead, special markers containing the picture id plus size and alignment hints.<\/p>\n

The show_media<\/code> tag converts these special markers (which are in fact HTML comments) back into image tags. For this, it\nuses the template called _body_media.tpl<\/code>. This template is located in mod_base<\/code> and can be overruled with your own.<\/p>\n

Images that are inlined in the body text can have these parameters:<\/p>\n

align<\/code><\/p>\n

Either block<\/code>, left<\/code> or right<\/code>. Default is block<\/code>.<\/p>\n

size<\/code><\/p>\n

Choose between small<\/code>, medium<\/code>, large<\/code>. These are used for selecting the mediaclass of the image. Which will be like\nbody-media-large<\/code>. The default size is large<\/code>, displayed as a block (see align above).<\/p>\n

crop<\/code><\/p>\n

Checkbox if you want to force cropping of the image to the bounding box of the mediaclass. If checked then the crop in\nthe mediaclass is overruled. If not checked then the crop in the mediaclass is used.<\/p>\n

link<\/code><\/p>\n

Checkbox if you want to let the image include a link to its own page.<\/p>\n

link_url<\/code><\/p>\n

If link<\/code> is checked then this can be used to set the URL for the link, the link url defaults to the page-url of the\nshown medium item.<\/p>\n

caption<\/code><\/p>\n

Caption that will be displayed below the media item. Per default the summary of the media item is used for the caption.\nIf the caption is empty, then no caption is added.<\/p>\n

These parameters can be set in the editor dialog ‘Media Properties’. This dialog is shown after clicking on an image\nin the wysiwyg editor.<\/p>\n

Template arguments<\/h2>\n

The _body_media.tpl<\/code> is included using a catinclude<\/em> for the media item. In this way you can switch templates\ndepending on the item category being displayed.<\/p>\n

You can add your own _body_media.tpl<\/code> templates. It will be supplied with the following data:<\/p>\n
Argument<\/th>Description<\/th><\/tr><\/thead>
id<\/td>The id of the medium item to be displayed.<\/td><\/tr>
size<\/td>The size, small<\/code>, medium<\/code> or large<\/code><\/td><\/tr>
mediaclass<\/td>Mediaclass, for example body-media-large<\/code><\/td><\/tr>
align<\/td>Alignment, block<\/code>, left<\/code> or right<\/code><\/td><\/tr>
crop<\/td>If crop is forced, true<\/code> or undefined<\/code><\/td><\/tr>
link<\/td>If the image should link to the medium page<\/td><\/tr>
link_url<\/code><\/td>Link to use, defaults to the medium page<\/td><\/tr>
caption<\/td>The caption from the editor<\/td><\/tr><\/tbody><\/table>\n

Besides the above all context variables are passed, this gives the Erlang code the possibility to change the behavior of\nthe media rendering.<\/p>","slug":"show_media","is_protected":false,"visible_for":0,"tz":"UTC","language":["en"],"doc_source_hash":"0428cc31be135998c8fe0e5dcd9536ead76fe0307345dd49bebc500f5574c7e5","is_featured":false,"content_group_id":{"id":2551,"is_a":["meta","content_group"],"name":"content_group_imported_docs","title":"Imported documentation","uri":"https:\/\/zotonic.com\/id\/content_group_imported_docs"},"category_id":{"id":325,"is_a":["meta","category"],"name":"template_filter","title":"Filters","uri":"https:\/\/test.zotonic.com\/id\/325"},"doc_source_path":"apps\/zotonic_mod_base\/src\/filters\/filter_show_media.erl","publication_start":"2023-06-24T08:17:44Z","github_url":"https:\/\/github.com\/zotonic\/zotonic\/blob\/master\/apps\/zotonic_mod_base\/src\/filters\/filter_show_media.erl","pivot_location_lng":null,"doc_source_kind":"filter","name":"doc_template_filter_filter_show_media","is_unfindable":false,"is_published":true,"pivot_geocode":null,"created":"2020-05-30T05:47:19Z","uri":null,"doc_status":"current","is_dependent":false,"erlang_app":"zotonic_mod_base","publication_end":"9999-06-01T00:00:00Z","modifier_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"privacy":0,"doc_source_commit":"85498256abd162b9bc082d43a90c995844fd4408\n","erlang_module":"filter_show_media","creator_id":{"id":336,"is_a":["person","robot"],"name":"gitbot","title":"Git","uri":"https:\/\/zotonic.com\/id\/336"},"modified":"2026-09-29T14:40:16Z","title_slug":"show_media"},"uri":"https:\/\/zotonic.com\/id\/1342","uri_template":"https:\/\/zotonic.com\/id\/:id","websub":{"hub":"https:\/\/zotonic.com\/.zotonic\/websub","topic":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1342"}},"status":"ok"}