{"id":125,"date":"2023-09-27T12:30:03","date_gmt":"2023-09-27T19:30:03","guid":{"rendered":"https:\/\/comm.engineering.asu.edu\/pitchfork\/?post_type=pitchfork-docs&#038;p=125"},"modified":"2024-12-16T13:38:42","modified_gmt":"2024-12-16T20:38:42","slug":"uds-hero","status":"publish","type":"pitchfork-docs","link":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/uds-hero\/","title":{"rendered":"Hero"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"initialize\">Insert the block<\/h2>\n\n\n\n<p>An hero is created by first inserting the <strong>UDS Hero<\/strong> block onto the page and then &#8220;initializing&#8221; the block.<\/p>\n\n\n\n<ul class=\"is-style-default wp-block-list\">\n<li>Pick the <strong>UDS Hero<\/strong> block from the block picker or quickly add the block to a page by typing <code>\/hero<\/code> in a normal paragraph block.<\/li>\n\n\n\n<li>Clicking on the switch to preview icon in the block toolbar will create the example content for you to customize.<\/li>\n\n\n\n<li>You can directly edit the text for hero title, a description and a call-to-action button.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"500\" style=\"aspect-ratio: 1500 \/ 500;\" width=\"1500\" autoplay controls loop src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/09\/hero-init-video.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"block-options\">Block options<\/h2>\n\n\n\n<p>The hero block has two main options. <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The block settings panel provides an interface to upload a background image for the hero.<\/li>\n\n\n\n<li>It also contains a dropdown to control the desired size of the hero.<\/li>\n<\/ul>\n\n\n\n<p>Hero images can either be uploaded to the media file or be used via a direct URL to a different resource.<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<figure class=\"wp-block-image aligncenter size-full is-resized is-style-drop-shadow\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"720\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/2\/2023\/09\/hero-sizes.jpg\" alt=\"\" class=\"wp-image-127\" style=\"width:250px;height:undefinedpx\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/09\/hero-sizes.jpg 500w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/09\/hero-sizes-208x300.jpg 208w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"image-size\">Image Sizes<\/h3>\n\n\n\n<p>For best results, hero images should be resized and cropped to the specific dimensions of the desired hero size. <\/p>\n\n\n<div class=\"wp-block-alert alert is-style-alert-info\"><div class=\"alert-icon\"><span class=\"fas fa-check-circle\"><\/span><\/div><div class=\"alert-content\"><div class=\"acf-innerblocks-container\">\n\n<p>The image size in <code>px<\/code> for each hero format is:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Small &#8211; 1920 x 256<\/li>\n\n\n\n<li>Medium &#8211; 1920 x 512<\/li>\n\n\n\n<li>Large &#8211; 1920 x 684<\/li>\n<\/ul>\n\n\n\n<p>Images that are larger than the expected format size will display from the center of the image.<br>Images that are cropped to 1920 x 684 generally work well for both the large and medium hero size. <\/p>\n\n<\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"subtitle\">Subtitles<\/h3>\n\n\n\n<p>The example content within a UDS Hero block includes an empty block called the <strong>UDS Subtitle<\/strong> block which can be used to add subtitle text above the hero title. This text is useful as a way to provide additional context about the page hierarchy if desired.<\/p>\n\n\n\n<p>Add the text of the subtitle in the block options panel.<\/p>\n\n\n\n<p>You can also chose one of three optional formats to highlight the subtitle. Those options correspond with the highlighting options that are present within a standard header tag but within the hero, the highlighting is applied to the entire text of the subtitle. Choose from:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Black text on a gold background<\/li>\n\n\n\n<li>Black text on a white background<\/li>\n\n\n\n<li>White text on a black background<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Adding back missing blocks<\/h2>\n\n\n\n<p>Hero blocks can change and be reconfigured over time. Today you may not need a call to action button on your page but you might tomorrow. The hero block has some additional features which make it easy to manage this piece of content over a longer term need for published pages.<\/p>\n\n\n\n<p class=\"is-style-lead\">Tip 1: Keep the blocks but make them blank<\/p>\n\n\n\n<p>If a button block is present within the UDS Hero, but the button doesn&#8217;t contain an actual link, the published result will be a hero without a button present. <\/p>\n\n\n\n<p>The same thing applies for the subtitle block. This block will not render on the front end of the website unless there is an actual text provided in the subtitle field. <\/p>\n\n\n\n<p class=\"is-style-lead\">Tip 2: Add the missing block and drag it back using the block editor.<\/p>\n\n\n\n<p>The block inserter within the UDS Hero block is difficult to spot and use under normal circumstances. If you find yourself needing to add back a missing <code>core\/group<\/code> or <code>core\/buttons<\/code> block, the best practice is to create those separately on the page and drag them into place using the list view panel.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"530\" style=\"aspect-ratio: 1496 \/ 530;\" width=\"1496\" autoplay controls loop src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/2\/2023\/09\/hero-replace-btn-video.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"video\">Video heroes<\/h2>\n\n\n\n<p>Options for including a background video instead of a static image within a hero can be accessed by using the dedicated <code>acf\/hero-video<\/code> block instead of the regular <code>acf\/hero<\/code> block.<\/p>\n\n\n\n<ul class=\"is-style-uds-list wp-block-list\">\n<li>Although you have the choice to use any of the three available hero sizes for a video hero, generally speaking its better to use either the medium or large video format for best results. <\/li>\n\n\n\n<li>Video files for a hero block can be uploaded directly to the media library but are subject to any restrictions on the file upload size that may be in place for your website. Contact your site administrator if you have concerns about your file not uploading correctly. <\/li>\n\n\n\n<li>Videos need to be produced to fit the exact dimensions of the desired video hero display setting.<\/li>\n\n\n\n<li>For more details on the preferred quality, frame rate, and other production specifications, please see <a href=\"https:\/\/brandguide.asu.edu\/execution-guidelines\/photo-video\/specs\">https:\/\/brandguide.asu.edu\/execution-guidelines\/photo-video\/specs<\/a>.<\/li>\n\n\n\n<li>Don&#8217;t forget to include a fall back or cover image for the video in case the end user has disabled video playback or javascript within the browser. <\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p class=\"mb-2\">Hero images are optional and are the first image seen at the top of a page. Heroes, depending on size, include additional options for a heading, brief text intro and up to two buttons.<\/p>\n","protected":false},"parent":0,"menu_order":0,"template":"","pitchfork-docs-category":[9],"class_list":["post-125","pitchfork-docs","type-pitchfork-docs","status-publish","hentry","pitchfork-docs-category-pitchfork-blocks"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Hero - Pitchfork Theme for WordPress<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/uds-hero\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hero - Pitchfork Theme for WordPress\" \/>\n<meta property=\"og:description\" content=\"Hero images are optional and are the first image seen at the top of a page. Heroes, depending on size, include additional options for a heading, brief text intro and up to two buttons.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/uds-hero\/\" \/>\n<meta property=\"og:site_name\" content=\"Pitchfork Theme for WordPress\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-16T20:38:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/09\/hero-sizes.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/uds-hero\\\/\",\"url\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/uds-hero\\\/\",\"name\":\"Hero - Pitchfork Theme for WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/uds-hero\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/uds-hero\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2023\\\/09\\\/hero-sizes.jpg\",\"datePublished\":\"2023-09-27T19:30:03+00:00\",\"dateModified\":\"2024-12-16T20:38:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/uds-hero\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/uds-hero\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/uds-hero\\\/#primaryimage\",\"url\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/wp-content\\\/uploads\\\/sites\\\/79\\\/2023\\\/09\\\/hero-sizes.jpg\",\"contentUrl\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/wp-content\\\/uploads\\\/sites\\\/79\\\/2023\\\/09\\\/hero-sizes.jpg\",\"width\":500,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/uds-hero\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Documents\",\"item\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Hero\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/#website\",\"url\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/\",\"name\":\"Pitchfork Theme for WordPress\",\"description\":\"an ASU Engineering theme for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Hero - Pitchfork Theme for WordPress","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/uds-hero\/","og_locale":"en_US","og_type":"article","og_title":"Hero - Pitchfork Theme for WordPress","og_description":"Hero images are optional and are the first image seen at the top of a page. Heroes, depending on size, include additional options for a heading, brief text intro and up to two buttons.","og_url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/uds-hero\/","og_site_name":"Pitchfork Theme for WordPress","article_modified_time":"2024-12-16T20:38:42+00:00","og_image":[{"width":500,"height":720,"url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/09\/hero-sizes.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/uds-hero\/","url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/uds-hero\/","name":"Hero - Pitchfork Theme for WordPress","isPartOf":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/#website"},"primaryImageOfPage":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/uds-hero\/#primaryimage"},"image":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/uds-hero\/#primaryimage"},"thumbnailUrl":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/2\/2023\/09\/hero-sizes.jpg","datePublished":"2023-09-27T19:30:03+00:00","dateModified":"2024-12-16T20:38:42+00:00","breadcrumb":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/uds-hero\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/uds-hero\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/uds-hero\/#primaryimage","url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/09\/hero-sizes.jpg","contentUrl":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2023\/09\/hero-sizes.jpg","width":500,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/uds-hero\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/comm.engineering.asu.edu\/pitchfork\/"},{"@type":"ListItem","position":2,"name":"Documents","item":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/"},{"@type":"ListItem","position":3,"name":"Hero"}]},{"@type":"WebSite","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/#website","url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/","name":"Pitchfork Theme for WordPress","description":"an ASU Engineering theme for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/comm.engineering.asu.edu\/pitchfork\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/pitchfork-docs\/125","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/pitchfork-docs"}],"about":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/types\/pitchfork-docs"}],"wp:attachment":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/media?parent=125"}],"wp:term":[{"taxonomy":"pitchfork-docs-category","embeddable":true,"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/pitchfork-docs-category?post=125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}