{"id":275,"date":"2023-01-10T14:22:36","date_gmt":"2023-01-10T13:22:36","guid":{"rendered":"http:\/\/localhost:8888\/?p=275"},"modified":"2025-11-26T14:22:36","modified_gmt":"2025-11-26T14:22:36","slug":"media-collection-and-image-box-blocks","status":"publish","type":"post","link":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/2023\/01\/media-collection-and-image-box-blocks\/","title":{"rendered":"Media Collection and Image Box Blocks"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The <strong>Media Collection<\/strong> block allows us to use content from the Media Library <br>If more files are selected, a dropdown is defined where the use can select which file should be used.<\/p>\n\n\n\n<div class=\"wp-block-inseri-core-media-collection\" data-attributes=\"{&quot;blockId&quot;:&quot;dsiahw5mX8EzXusbON7qg&quot;,&quot;fileIds&quot;:[7,6],&quot;isVisible&quot;:true,&quot;label&quot;:&quot;Choose a file&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;mediaCollection&quot;},&quot;selectedFileId&quot;:null}\">is loading &#8230;<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Image<\/strong> <strong>Box<\/strong> block allows us to display an image. Next we use it in order to display the previously selected file.<\/p>\n\n\n\n<div class=\"wp-block-inseri-core-image\" data-attributes=\"{&quot;altText&quot;:&quot;&quot;,&quot;blockId&quot;:&quot;PjzueQ0636WldrnwwmAJH&quot;,&quot;caption&quot;:&quot;&quot;,&quot;fit&quot;:&quot;contain&quot;,&quot;height&quot;:204,&quot;inputKey&quot;:&quot;dsiahw5mX8EzXusbON7qg\/file&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;image-qiB&quot;}}\">is loading &#8230;<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">But the Image Box block can even take as input a link defined in a Text Editor block.<\/p>\n\n\n\n<div class=\"wp-block-inseri-core-text-editor\" data-attributes=\"{&quot;blockId&quot;:&quot;gZ6xUeZFRha7jc49oyOyZ&quot;,&quot;content&quot;:&quot;https%3A%2F%2Fraw.githubusercontent.com%2Finseri-swiss%2Finseri-core-wp%2Frefs%2Fheads%2Fmain%2Fdocs%2Fassets%2Finseri_logo.svg&quot;,&quot;contentType&quot;:&quot;text\/plain&quot;,&quot;editable&quot;:true,&quot;height&quot;:60,&quot;isVisible&quot;:true,&quot;label&quot;:&quot;Feel free to edit the image link&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;textEditor-link&quot;}}\">is loading &#8230;<\/div>\n\n\n\n<div class=\"wp-block-inseri-core-image\" data-attributes=\"{&quot;altText&quot;:&quot;&quot;,&quot;blockId&quot;:&quot;c3EfxoDJLxDMC7nOUGpSc&quot;,&quot;caption&quot;:&quot;The image corresponds to the link above&quot;,&quot;fit&quot;:&quot;contain&quot;,&quot;height&quot;:66,&quot;inputKey&quot;:&quot;gZ6xUeZFRha7jc49oyOyZ\/content&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;image-kNX&quot;}}\">is loading &#8230;<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">For more details please see <a href=\"https:\/\/inseri-swiss.github.io\/inseri-core-wp\/blocks\/mediaCollection\/\" target=\"_blank\" rel=\"noreferrer noopener\">Media Collection<\/a> and <a href=\"https:\/\/inseri-swiss.github.io\/inseri-core-wp\/blocks\/image\/\" target=\"_blank\" rel=\"noreferrer noopener\">Image Box<\/a> documentation.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:60%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-inseri-core-share alignright\" data-attributes=\"{&quot;align&quot;:&quot;right&quot;,&quot;blockId&quot;:&quot;KTETwIissQyi0jL3ZpuwV&quot;,&quot;copiedText&quot;:&quot;Copied&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;share&quot;},&quot;showIcon&quot;:true,&quot;text&quot;:&quot;Share&quot;}\">is loading &#8230;<\/div>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Media Collection block allows us to use content from the Media Library If more files are selected, a dropdown is defined where the use can select which file should be used. The Image Box block allows us to display an image. Next we use it in order to display the previously selected file. But [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34],"tags":[43,46,50,52],"class_list":["post-275","post","type-post","status-publish","format-standard","hentry","category-inseri-core-block","tag-image-box","tag-media-collection","tag-share","tag-text-editor"],"_links":{"self":[{"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/posts\/275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/comments?post=275"}],"version-history":[{"count":1,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/posts\/275\/revisions"}],"predecessor-version":[{"id":2111,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/posts\/275\/revisions\/2111"}],"wp:attachment":[{"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/media?parent=275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/categories?post=275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/tags?post=275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}