{"id":710,"date":"2020-05-27T23:14:10","date_gmt":"2020-05-27T23:14:10","guid":{"rendered":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/?page_id=710"},"modified":"2022-09-13T00:51:46","modified_gmt":"2022-09-13T04:51:46","slug":"header-options","status":"publish","type":"page","link":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/products\/nc-state-stories\/getting-started\/header-options\/","title":{"rendered":"Header Options"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Hero Area<\/h2>\n\n\n<div class=\"wp-block-image alignright\">\n<figure class=\"size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"515\" height=\"1024\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/hero-area-options-515x1024.jpg\" alt=\"\" class=\"wp-image-714\" srcset=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/hero-area-options-515x1024.jpg 515w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/hero-area-options-151x300.jpg 151w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/hero-area-options.jpg 554w\" sizes=\"(max-width: 515px) 100vw, 515px\" \/><\/figure><\/div>\n\n\n<p>The hero area has similar functionality between the different templates and header types within the NC&#160;State Stories platform.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Subtitle and Featured Image<\/h3>\n\n\n\n<p>Each post has a title along with optional subtitle and featured image. Using both of these additional fields is encouraged as it will create a more inviting and informative entry point to your story.<\/p>\n\n\n\n<p>The subtitle provides an opportunity to elaborate on your post&#8217;s title and provide more context. The featured image is used in multiple locations such as your news frontpage, on category pages and when a post is shared on social media.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">YouTube Video<\/h3>\n\n\n\n<p>The featured image can also be replaced by a YouTube video. To embed a YouTube video, simply include the video&#8217;s URL from your browser&#8217;s address bar. You will need to provide a still featured image as it is used as the cover image and elsewhere on your site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Author, Date and Display Category<\/h3>\n\n\n\n<p>The hero area also allows you toggle the display on\/off of the post author and publish date. You may want to hide the publish date if you will be linking to a student profile or evergreen story from your main website. Hiding the date doesn&#8217;t make the user think that the content is stale and out-of-date.<\/p>\n\n\n\n<p>The hero area can also display a category that your post is categorized within. This helps to provide more context when a user lands on your post from an email or social media posting.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Default Post Template<\/h2>\n\n\n\n<p>The default post template has one header option that works well with most news posts.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"994\" height=\"1024\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/default-post-header-994x1024.jpg\" alt=\"\" class=\"wp-image-713\" srcset=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/default-post-header-994x1024.jpg 994w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/default-post-header-291x300.jpg 291w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/default-post-header-768x791.jpg 768w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/default-post-header.jpg 1348w\" sizes=\"(max-width: 994px) 100vw, 994px\" \/><figcaption>Default Header<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Immersive Template<\/h2>\n\n\n\n<p>The Immersive post template is available as part of the <a href=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/platforms\/nc-state-stories\/enhanced-news-add-on\/\">Enhanced News Add-on<\/a>. It provides three additional header options.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"708\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/immservie-post-header-1024x708.jpg\" alt=\"\" class=\"wp-image-718\" srcset=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/immservie-post-header-1024x708.jpg 1024w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/immservie-post-header-300x207.jpg 300w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/immservie-post-header-768x531.jpg 768w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/immservie-post-header-1536x1062.jpg 1536w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/immservie-post-header.jpg 2020w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Default Immersive Template Header<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"507\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/immersive-post-side-by-side-header-1024x507.jpg\" alt=\"\" class=\"wp-image-719\" srcset=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/immersive-post-side-by-side-header-1024x507.jpg 1024w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/immersive-post-side-by-side-header-300x149.jpg 300w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/immersive-post-side-by-side-header-768x380.jpg 768w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/immersive-post-side-by-side-header-1536x761.jpg 1536w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/immersive-post-side-by-side-header-2048x1014.jpg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Immersive Template Side-by-Side Header<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"562\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/09\/media-banner-immersive-header-1024x562.png\" alt=\"\" class=\"wp-image-1115\" srcset=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/09\/media-banner-immersive-header-1024x562.png 1024w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/09\/media-banner-immersive-header-300x165.png 300w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/09\/media-banner-immersive-header-768x421.png 768w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/09\/media-banner-immersive-header-1536x843.png 1536w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/09\/media-banner-immersive-header.png 2030w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Immersive Template Media Banner Header<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Need help?<\/h2>\n\n\n\n<p>Have questions? Feel free to reach out with any questions or concerns at\u00a0<a href=\"http:\/\/go.ncsu.edu\/ucomm-dev-request\">go.ncsu.edu\/ucomm-dev-request<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hero Area The hero area has similar functionality between the different templates and header types within the NC&#160;State Stories platform. Subtitle and Featured Image Each post has a title along&hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":206,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ncst_dynamicHeaderBlockName":"ncst\/default-header","ncst_dynamicHeaderData":"{\"pageIntro\":\"The hero area of your posts can be configured in several different ways.\"}","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\/710"}],"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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/comments?post=710"}],"version-history":[{"count":7,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/710\/revisions"}],"predecessor-version":[{"id":3020,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/710\/revisions\/3020"}],"up":[{"embeddable":true,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/206"}],"wp:attachment":[{"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/media?parent=710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}