{"id":3259,"date":"2022-05-24T09:13:57","date_gmt":"2022-05-24T09:13:57","guid":{"rendered":"https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/?post_type=knowledge_base&#038;p=3259"},"modified":"2026-07-24T17:49:15","modified_gmt":"2026-07-24T17:49:15","slug":"step-info-layouts-singular-image","status":"publish","type":"post","link":"https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/step-info-layouts-singular-image\/","title":{"rendered":"Step Info Layouts: Singular Image"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">To to swap from another Step Info layout to Singular Image, select the appropriate step. Navigate to the <em><strong>Info &amp; Scenario<\/strong><\/em> tab.  Click <strong><em>Choose Info Section Layout<\/em><\/strong>.  <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1177\" height=\"871\" src=\"https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image1.jpg\" alt=\"\" class=\"wp-image-3270\" srcset=\"https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image1.jpg 1177w, https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image1-300x222.jpg 300w, https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image1-768x568.jpg 768w, https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image1-1024x758.jpg 1024w, https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image1-710x525.jpg 710w\" sizes=\"auto, (max-width: 1177px) 100vw, 1177px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Select the <strong><em>Singular Media<\/em><\/strong> layout set from the Choose Layout Set menu.  Next, select the <strong><em>Image<\/em><\/strong> layout style, followed by the desired variant and theme options.  Click <strong><em>Apply<\/em><\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1177\" height=\"871\" src=\"https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image2.jpg\" alt=\"\" class=\"wp-image-3271\" srcset=\"https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image2.jpg 1177w, https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image2-300x222.jpg 300w, https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image2-768x568.jpg 768w, https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image2-1024x758.jpg 1024w, https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image2-710x525.jpg 710w\" sizes=\"auto, (max-width: 1177px) 100vw, 1177px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Singular Image layout type consists of the following elements:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Step title<\/li>\n\n\n\n<li>Step main text<\/li>\n\n\n\n<li>background image<\/li>\n\n\n\n<li>context image<\/li>\n\n\n\n<li>(optional) accent image, if accent layout variant is selected<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The context image should be considered an important narrative component of a Step, not just a decorative image.  The context image editing area provides the following controls\/inputs: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>caption field<\/li>\n\n\n\n<li>screenreader-only assistive description<\/li>\n\n\n\n<li>width and framing options<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1177\" height=\"871\" src=\"https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image3.jpg\" alt=\"\" class=\"wp-image-3272\" srcset=\"https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image3.jpg 1177w, https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image3-300x222.jpg 300w, https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image3-768x568.jpg 768w, https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image3-1024x758.jpg 1024w, https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image3-710x525.jpg 710w\" sizes=\"auto, (max-width: 1177px) 100vw, 1177px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Basic Singular Image layout places a narratively-relevant, yet non-interactive contextual image alongside the main text content of a Step. An alternate layout theme is available for making the context image &#8220;launchable&#8221;. A launching context image provides additional setup controls for assigning the zoomable, full-size launched image as well as the navigation-map image paired to the enlargement. Please review the knowledgebase article <a href=\"https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/editing-a-step-adding-media\/\" data-type=\"post\" data-id=\"2502\" target=\"_blank\" rel=\"noreferrer noopener\">Editing a Step: Adding Media<\/a> for more information about working with the StepStone Media Manager, which provides tools for generating size reductions of uploaded images for your convenience in placing these context image variations.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1177\" height=\"871\" src=\"https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image4.jpg\" alt=\"\" class=\"wp-image-3273\" srcset=\"https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image4.jpg 1177w, https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image4-300x222.jpg 300w, https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image4-768x568.jpg 768w, https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image4-1024x758.jpg 1024w, https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image4-710x525.jpg 710w\" sizes=\"auto, (max-width: 1177px) 100vw, 1177px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1177\" height=\"871\" src=\"https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image5.jpg\" alt=\"\" class=\"wp-image-3274\" srcset=\"https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image5.jpg 1177w, https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image5-300x222.jpg 300w, https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image5-768x568.jpg 768w, https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image5-1024x758.jpg 1024w, https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-content\/uploads\/2022\/05\/info-single-image5-710x525.jpg 710w\" sizes=\"auto, (max-width: 1177px) 100vw, 1177px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>To to swap from another Step Info layout to Singular Image, select the appropriate step. Navigate to the Info &amp; Scenario tab. Click Choose Info Section Layout. Select the Singular Media layout set from the Choose Layout Set menu. Next, select the Image layout style, followed by the desired variant and theme options. Click Apply. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[45],"tags":[],"class_list":["post-3259","post","type-post","status-publish","format-standard","hentry","category-editing-steps"],"_links":{"self":[{"href":"https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-json\/wp\/v2\/posts\/3259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-json\/wp\/v2\/comments?post=3259"}],"version-history":[{"count":9,"href":"https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-json\/wp\/v2\/posts\/3259\/revisions"}],"predecessor-version":[{"id":3856,"href":"https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-json\/wp\/v2\/posts\/3259\/revisions\/3856"}],"wp:attachment":[{"href":"https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-json\/wp\/v2\/media?parent=3259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-json\/wp\/v2\/categories?post=3259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tamucet.org\/stepstone\/knowledgebase\/wp-json\/wp\/v2\/tags?post=3259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}