{"id":295,"date":"2023-02-28T15:57:41","date_gmt":"2023-02-28T14:57:41","guid":{"rendered":"http:\/\/localhost:8888\/?p=295"},"modified":"2025-11-26T15:57:41","modified_gmt":"2025-11-26T15:57:41","slug":"hello-world","status":"publish","type":"post","link":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/2023\/02\/hello-world\/","title":{"rendered":"Hello World"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><em>This page corresponds to the tutorial <a href=\"https:\/\/inseri-swiss.github.io\/inseri-core-wp\/tutorials\/hello_world\/\" data-type=\"link\" data-id=\"https:\/\/docs.inseri.swiss\/tutorials\/data-mapping-with-python\/\" target=\"_blank\" rel=\"noreferrer noopener\">Hello World<\/a> tutorial<\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">What if we would be able to define a list of image links and allow the visitors to interactively pick one of them and display the corresponding image?<\/p>\n\n\n\n<div class=\"wp-block-group is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-ce442f2e wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image aligncenter size-large is-resized is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"612\" height=\"1024\" src=\"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-content\/uploads\/2023\/04\/presentation-612x1024.png\" alt=\"\" class=\"wp-image-814\" style=\"width:220px;height:undefinedpx\" srcset=\"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-content\/uploads\/2023\/04\/presentation-612x1024.png 612w, https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-content\/uploads\/2023\/04\/presentation-179x300.png 179w, https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-content\/uploads\/2023\/04\/presentation-768x1285.png 768w, https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-content\/uploads\/2023\/04\/presentation-918x1536.png 918w, https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-content\/uploads\/2023\/04\/presentation.png 974w\" sizes=\"auto, (max-width: 612px) 100vw, 612px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-group has-global-padding is-content-justification-right is-layout-constrained wp-container-core-group-is-layout-cd23aee3 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-inseri-core-text-editor\" data-attributes=\"{&quot;blockId&quot;:&quot;CtfD2BjYHe8WNJPyPuPQV&quot;,&quot;content&quot;:&quot;%5B%7B%22label%22%3A%20%22inseri%20Logo%22%2C%0A%20%20%20%20%22value%22%3A%20%22https%3A%2F%2Fraw.githubusercontent.com%2Finseri-swiss%2Finseri-core-wp%2Fmain%2Fdocs%2Fassets%2Finseri_logo.svg%22%7D%2C%0A%7B%22label%22%3A%20%22inseri%20Full%20Logo%22%2C%0A%20%20%20%20%22value%22%3A%20%22https%3A%2F%2Fraw.githubusercontent.com%2Finseri-swiss%2Finseri-core-wp%2Fmain%2Fdocs%2Fassets%2Finseri_logo_full.svg%22%7D%5D&quot;,&quot;contentType&quot;:&quot;application\/json&quot;,&quot;editable&quot;:false,&quot;height&quot;:98,&quot;isVisible&quot;:true,&quot;label&quot;:&quot;JSON text used in the Dropdown block (it can be hidden)&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;Text Editor&quot;}}\">is loading &#8230;<\/div>\n\n\n\n<div class=\"wp-block-inseri-core-dropdown\" data-attributes=\"{&quot;blockId&quot;:&quot;wmIefDHKdgFFuGw3QDyra&quot;,&quot;clearable&quot;:true,&quot;inputKey&quot;:&quot;CtfD2BjYHe8WNJPyPuPQV\/content&quot;,&quot;label&quot;:&quot;Choose an item&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;Dropdown&quot;},&quot;searchable&quot;:true}\">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;NYC0hjneAJz4shT055gTW&quot;,&quot;caption&quot;:&quot;&quot;,&quot;fit&quot;:&quot;contain&quot;,&quot;height&quot;:200,&quot;inputKey&quot;:&quot;wmIefDHKdgFFuGw3QDyra\/selected&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;Image&quot;}}\">is loading &#8230;<\/div>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Behind the scene, we used the inseri core for WordPress to enable such interactivity, more precisely the following blocks:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/2022\/12\/text-editor-and-text-viewer\/\" data-type=\"post\" data-id=\"558\"><strong>Text Editor<\/strong><\/a> block to define a list of links <\/li>\n\n\n\n<li><strong><a href=\"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/2022\/12\/dropdown-block\/\" data-type=\"post\" data-id=\"266\">Dropdown<\/a><\/strong> block to define the dropdown. The input used previously in the Text Editor block has to follow a given specification<\/li>\n\n\n\n<li><a href=\"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/2023\/01\/media-collection-and-image-box-blocks\/\" data-type=\"post\" data-id=\"275\"><strong>Image Box<\/strong><\/a> block to display the selected image<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">inseri core for WordPress allows us to chain the blocks and build a small workflow that is the basis of interactivity. The output of the Text Editor block is used by the Dropdown block to create the dropdown menu &#8211; the elements that can be selected. Once an element is selected, the Dropdown block provides as output the corresponding URL that is used as input by the Image block to display the corresponding image. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We can easily visualise the <a href=\"https:\/\/inseri-swiss.github.io\/inseri-core-wp\/features\/data_flow\/\" target=\"_blank\" rel=\"noreferrer noopener\">Data Flow<\/a> using the Cytoscape block.<\/p>\n\n\n\n<div class=\"wp-block-inseri-core-cytoscape\" data-attributes=\"{&quot;blockId&quot;:&quot;FGKVl1hMJppWwGTiryedP&quot;,&quot;height&quot;:281,&quot;inputKey&quot;:&quot;__root\/data-flow&quot;,&quot;layout&quot;:&quot;dagre&quot;,&quot;layoutKey&quot;:&quot;&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;DataFlow&quot;},&quot;styleKey&quot;:&quot;&quot;}\">is loading &#8230;<\/div>\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\">\n<div class=\"wp-block-inseri-core-export alignright\" data-attributes=\"{&quot;align&quot;:&quot;right&quot;,&quot;blockId&quot;:&quot;vaxQQCzmrnvQCf4meQgfk&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;export&quot;},&quot;postId&quot;:295}\">is loading &#8230;<\/div>\n<\/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","protected":false},"excerpt":{"rendered":"<p>This page corresponds to the tutorial Hello World tutorial. What if we would be able to define a list of image links and allow the visitors to interactively pick one of them and display the corresponding image? Behind the scene, we used the inseri core for WordPress to enable such interactivity, more precisely the following [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[39,40,43,50,52],"class_list":["post-295","post","type-post","status-publish","format-standard","hentry","category-basic-example","tag-dropdown","tag-export","tag-image-box","tag-share","tag-text-editor"],"_links":{"self":[{"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/posts\/295","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=295"}],"version-history":[{"count":1,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/posts\/295\/revisions"}],"predecessor-version":[{"id":2113,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/posts\/295\/revisions\/2113"}],"wp:attachment":[{"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/media?parent=295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/categories?post=295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/tags?post=295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}