{"id":1231,"date":"2024-11-18T10:46:10","date_gmt":"2024-11-18T15:46:10","guid":{"rendered":"https:\/\/sites.smith.edu\/project-resources\/?p=1231"},"modified":"2024-11-18T10:46:11","modified_gmt":"2024-11-18T15:46:11","slug":"information-wall","status":"publish","type":"post","link":"https:\/\/sites.smith.edu\/project-resources\/information-wall\/","title":{"rendered":"Information Wall"},"content":{"rendered":"\n<p>An information wall is a type of H5P content that allows you to create panels of information with custom labels, or properties. Information Walls are searchable and can include images, links, and formatted text.  <\/p>\n\n\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-6\" class=\"h5p-iframe\" data-content-id=\"6\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"Keyel - Pets of the Library\"><\/iframe><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Create an Information Wall<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Create an Information Wall content type<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to the <em>Dashboard<\/em> of your WordPress site.&nbsp;<\/li>\n\n\n\n<li>From the main navigation menu on the left side, select <strong>H5P Content.<\/strong> <img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"34\" class=\"wp-image-63\" style=\"width: 150px;\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2023-06-22_09-40-43.png\" alt=\"H5P Content link\"><\/li>\n\n\n\n<li>Select the <strong>Add New <\/strong>button.<br><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"56\" class=\"wp-image-1002\" style=\"width: 450px;\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/09\/2024-09-16_11-23-01.png\" alt=\"The H5P Add New button circled in red\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/09\/2024-09-16_11-23-01.png 603w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/09\/2024-09-16_11-23-01-300x37.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/09\/2024-09-16_11-23-01-400x50.png 400w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/li>\n\n\n\n<li>A new page will open and display the H5P Hub.<br><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"470\" class=\"wp-image-1263\" style=\"width: 550px;\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-06-08.png\" alt=\"The information wall H5P content type in the H5P content hub\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-06-08.png 944w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-06-08-300x256.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-06-08-768x657.png 768w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-06-08-940x804.png 940w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-06-08-400x342.png 400w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/li>\n\n\n\n<li>Select <strong>Information Wall<\/strong> to open the <em>Information Wall<\/em> creator.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Create your Information Wall<\/h3>\n\n\n\n<p>On the <em>Add New<\/em> page, you\u2019ll add images and text to create your Information Wall. There are three main sections you\u2019ll need to fill out to create an information wall, a <strong>Title<\/strong> section, a <strong>Properties<\/strong> section, and the information <strong>Panels<\/strong> section. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Title Section<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Title<\/strong>: A title you\u2019ll be able to recognize later. This won\u2019t appear on your page, but it will appear on the list of H5P content.\n<ul class=\"wp-block-list\">\n<li>Tip: You can search the list, so choose a title that will be easy to find, like your last name and a short description, e.g.\u00a0<em>\u201cSmith \u2013 Pets of the Library\u201d<\/em><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Header<\/strong>: The title that will appear on your Information Wall when it&#8217;s displayed<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"974\" height=\"410\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-06-39-copy.png\" alt=\"The Title and Header fields in the H5P Information Wall\" class=\"wp-image-1265\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-06-39-copy.png 974w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-06-39-copy-300x126.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-06-39-copy-768x323.png 768w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-06-39-copy-940x396.png 940w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-06-39-copy-400x168.png 400w\" sizes=\"auto, (max-width: 974px) 100vw, 974px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Properties Section<\/h4>\n\n\n\n<p>The Properties section is where you&#8217;ll need to define each section that will appear in the panel. For example, if you want each panel to include a title or name, you&#8217;ll need to create a title or name property. If you want your section to create a description, create a description section.<\/p>\n\n\n\n<p>Note: The <em>Properties<\/em> section will be closed by default<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click on the Properties dropdown to expand the Properties Panel.<br><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"427\" class=\"wp-image-1266\" style=\"width: 650px;\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-06-39-copy-1.png\" alt=\"The Properties panel in the H5P info hub indicated by a circle\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-06-39-copy-1.png 974w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-06-39-copy-1-300x197.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-06-39-copy-1-768x505.png 768w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-06-39-copy-1-940x618.png 940w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-06-39-copy-1-400x263.png 400w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/>\n<ul class=\"wp-block-list\">\n<li>In the Label field, enter the name of your first label.<br><\/li>\n\n\n\n<li>To display the label in your information panel, check &#8220;Show property label.&#8221; \n<ul class=\"wp-block-list\">\n<li>eg, checking the box displays a property labeled <strong>Name<\/strong> as &#8220;<em>Name: Sophia Smith<\/em>&#8220;. Leaving the box unchecked displays the property labeled <strong>Name<\/strong> as &#8220;<em>Sophia Smith<\/em>&#8220;.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>To make sure that property is searchable, leave &#8220;Enabled searching in the property&#8221; checked.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>To add another property, choose the blue <strong>+ADD PROPERTY<\/strong> button<br><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"305\" class=\"wp-image-1267\" style=\"width: 650px;\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-08-01.png\" alt=\"The Add Property button circled in red\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-08-01.png 937w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-08-01-300x141.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-08-01-768x360.png 768w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-08-01-400x187.png 400w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/li>\n\n\n\n<li>Repeat until you&#8217;ve added all of the properties you need to include.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Panels Section<\/h4>\n\n\n\n<p> The Panels section is where you can add your actual information. <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Image<\/strong>: Add an image that represents your topic<\/li>\n\n\n\n<li><strong>Alternative Text<\/strong>: Add a brief description of your image<\/li>\n\n\n\n<li><strong>Entries<\/strong>: Add your content into each of the properties you created in the previous section.<\/li>\n<\/ul>\n\n\n\n<p>To add another Panel, choose the blue <strong>+ADD PANEL<\/strong> button. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"974\" height=\"496\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-06-39-copy-2.png\" alt=\"The Add Panel button \" class=\"wp-image-1270\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-06-39-copy-2.png 974w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-06-39-copy-2-300x153.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-06-39-copy-2-768x391.png 768w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-06-39-copy-2-940x479.png 940w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-06-39-copy-2-400x204.png 400w\" sizes=\"auto, (max-width: 974px) 100vw, 974px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Saving your Information Wall<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"save-content\">Saving your Image Hotspot Content <\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>When you have\u00a0finished creating your information wall, at the top-right side of the page in the Actions block, select <strong>Create<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"312\" class=\"wp-image-1271\" style=\"width: 750px;\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-19-36-copy.png\" alt=\"The Create shortcode section indicated with a red circle\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-19-36-copy.png 1439w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-19-36-copy-300x125.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-19-36-copy-1024x426.png 1024w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-19-36-copy-768x320.png 768w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-19-36-copy-940x391.png 940w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_09-19-36-copy-400x167.png 400w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/li>\n\n\n\n<li>The page will refresh showing the Information Wall final result on the left, and a Shortcode block will replace the Actions block on the right.<br><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" class=\"wp-image-1272\" style=\"width: 750px;\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_10-42-29.png\" alt=\"The shortcode section of a completed info wall\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_10-42-29.png 1547w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_10-42-29-300x120.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_10-42-29-1024x410.png 1024w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_10-42-29-768x308.png 768w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_10-42-29-1536x616.png 1536w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_10-42-29-940x377.png 940w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-18_10-42-29-400x160.png 400w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><br><\/li>\n<\/ol>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"shortcode\"><strong>Add the Shortcode to the Post <\/strong><\/h2>\n\n\n\n<p>The last step is to add the article to your WordPress post.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Copy the short code displayed in the block in the top corner of your new iframe<br><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"226\" class=\"wp-image-64\" style=\"width: 350px;\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2023-06-22_09-41-23.png\" alt=\"H5P Shortcode window\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2023-06-22_09-41-23.png 425w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2023-06-22_09-41-23-300x194.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2023-06-22_09-41-23-400x259.png 400w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/li>\n\n\n\n<li>Navigate to the post or page where you would like to embed your article.<\/li>\n\n\n\n<li>In the Block editor workspace, add a new paragraph block wherever you&#8217;d like the Image hotspot to appear on your page.<\/li>\n\n\n\n<li>Paste the shortcode into the new paragraph block.<\/li>\n\n\n\n<li>To preview your new article, select <strong>the laptop icon<\/strong> from the top navigation bar, then select Preview in new tab.<img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"237\" class=\"wp-image-65\" style=\"width: 400px;\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2023-11-27_10-31-19.png\" alt=\"Preview in a new tab\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2023-11-27_10-31-19.png 449w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2023-11-27_10-31-19-300x178.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2023-11-27_10-31-19-400x237.png 400w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/li>\n\n\n\n<li>When you are finished adding content, choose <strong>Save draft<\/strong> or <strong>Publish <\/strong>to save your work.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>An information wall is a type of H5P content that allows you to create panels of information with custom labels, or properties. Information Walls are searchable and can include images, links, and formatted text. Create an Information Wall Create an Information Wall content type Create your Information Wall On the Add New page, you\u2019ll add [&hellip;]<\/p>\n","protected":false},"author":5691,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[23,14],"class_list":["post-1231","post","type-post","status-publish","format-standard","hentry","category-h5p","tag-geo102","tag-h5p"],"_links":{"self":[{"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/posts\/1231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/users\/5691"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/comments?post=1231"}],"version-history":[{"count":12,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/posts\/1231\/revisions"}],"predecessor-version":[{"id":1274,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/posts\/1231\/revisions\/1274"}],"wp:attachment":[{"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/media?parent=1231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/categories?post=1231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/tags?post=1231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}