{"id":2183,"date":"2021-04-14T10:24:46","date_gmt":"2021-04-14T14:24:46","guid":{"rendered":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/?page_id=2183"},"modified":"2021-04-14T13:14:40","modified_gmt":"2021-04-14T17:14:40","slug":"image-statement","status":"publish","type":"page","link":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/products\/nc-state-stories\/blocks\/image-statement\/","title":{"rendered":"Image Statement"},"content":{"rendered":"\n<p><strong>This block is only featured in the Premium Tier of the NC&#160;State Web Platform.<\/strong><\/p>\n\n\n\n<p>This block allows you to add a visually bold statement on top of an image. A parallax effect occurs when the user scrolls down the page. This striking alternative to a standard image or callout box catches users&#8217; attention as they skim the content of a page. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1444\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/image-statement-block.gif\" alt=\"demonstration of image statement block\" class=\"wp-image-2161\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Block Customization<\/h2>\n\n\n\n<p>In addition to the included image and text, content maintainers can choose to feature a background color for images with a lighter color palette. By default the block will recognize when an image contains generally lighter colors, but content maintainers can chose to removed the background by clicking &#8220;Clear&#8221;. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"575\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/04\/image-statement-2-e1618420046870-1024x575.jpg\" alt=\"example of background color setting for image statement block\" class=\"wp-image-2224\" srcset=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/04\/image-statement-2-e1618420046870-1024x575.jpg 1024w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/04\/image-statement-2-e1618420046870-300x169.jpg 300w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/04\/image-statement-2-e1618420046870-768x431.jpg 768w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/04\/image-statement-2-e1618420046870.jpg 1497w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>There is also an included option to feature a &#8220;Call to Action&#8221; (CTA) at the base of the statement. This CTA can also include a link to an external resource or page. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/04\/image-statement-3-e1618420087776-1024x576.jpg\" alt=\"example of CTA settings for image statement block\" class=\"wp-image-2225\" srcset=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/04\/image-statement-3-e1618420087776-1024x576.jpg 1024w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/04\/image-statement-3-e1618420087776-300x169.jpg 300w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/04\/image-statement-3-e1618420087776-768x432.jpg 768w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/04\/image-statement-3-e1618420087776.jpg 1501w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Need Help?<\/h2>\n\n\n\n<p>Curious about the Premium Tier of the NC&#160;State Web Platform? Want to learn more about the Image Statement block? Feel free to reach out with any questions or concerns at<a rel=\"noreferrer noopener\" href=\"http:\/\/go.ncsu.edu\/ucomm-dev-request\" target=\"_blank\">\u00a0go.ncsu.edu\/ucomm-dev-request<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This block allows you to add a visually bold statement on top of an image. A parallax effect occurs when the user scrolls down the page. This striking alternative to&hellip;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":207,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ncst_dynamicHeaderBlockName":"ncst\/default-header","ncst_dynamicHeaderData":"{\"pageIntro\":\"Create a visually bold statement on top of an image with a parallax effect while scrolling. \"}","ncst_content_audit_freq":"","ncst_content_audit_date":"","footnotes":"","_links_to":"","_links_to_target":""},"acf":[],"_links":{"self":[{"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/2183"}],"collection":[{"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/comments?post=2183"}],"version-history":[{"count":6,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/2183\/revisions"}],"predecessor-version":[{"id":2229,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/2183\/revisions\/2229"}],"up":[{"embeddable":true,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/207"}],"wp:attachment":[{"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/media?parent=2183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}