{"id":244,"date":"2024-01-03T20:17:04","date_gmt":"2024-01-03T20:17:04","guid":{"rendered":"https:\/\/www.med.unc.edu\/webguide\/cells\/?page_id=244"},"modified":"2024-12-12T16:11:42","modified_gmt":"2024-12-12T16:11:42","slug":"hero-image","status":"publish","type":"page","link":"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/image-blocks\/hero-image\/","title":{"rendered":"Hero Image"},"content":{"rendered":"<h2>Creating A Hero Image<\/h2>\n<p>Many fields are self explanatory and will not be addressed in this documentation. This documentation will focus on tips, best practices and explanation of fields that generally need some clarification.<\/p>\n<ol>\n<li><a href=\"https:\/\/www.med.unc.edu\/webguide\/cells\/general-usage\/pre-asses\/\">Determine where the Cell will be used<\/a>.<\/li>\n<li>In the Dashboard, select <strong>Cells<\/strong> in either the top or left-hand navigation.\n<ul>\n<li>If you do not see this option, then the <a href=\"https:\/\/www.med.unc.edu\/webguide\/cells\/general-usage#activate\"><strong>UNCSOM Cells<\/strong> plugin needs to be activated<\/a>.<\/li>\n<\/ul>\n<\/li>\n<li>Select the <strong>Add New<\/strong> button.<\/li>\n<li><strong>Cell Name:<\/strong> provide a descriptive name so that site editors understand the purpose or placement of the cell. This field does not display anywhere other than in the Dashboard where it lists all Cells for a website.<\/li>\n<li><strong>Layout:<\/strong> Single Blocks<\/li>\n<li><strong>Block Category:<\/strong> Image Blocks<\/li>\n<li><strong>Block Style:<\/strong> Hero Image<\/li>\n<li><strong>Cell Header:<\/strong> this is the main title of the Cell Text.<\/li>\n<li><strong>Cell Text:<\/strong> this is the smaller text that displays below the Cell Header.<\/li>\n<li><strong>Image:<\/strong> this is an optional, small, circular image that displays in front of the Background Image. A square image is ideal here. If a landscape or portrait image is used, cropping will occur and the center of the image will display.<\/li>\n<li><strong>Background Image:<\/strong>\u00a0 this is the larger background image that displays in the Cell.\u00a0Parts of the image may appear <strong>cropped<\/strong> due to the\u00a0<a href=\"https:\/\/www.med.unc.edu\/webguide\/cells\/general-usage\/responsive-design\/\">responsive design<\/a> of the cell.\u00a0View our <a href=\"https:\/\/www.med.unc.edu\/webguide\/cells\/general-usage\/images\/\">Image documentation<\/a> for information on where to find images, image size recommendations and more.\n<ul>\n<li>Background images may become overly large if allowed to fill the entire space of their container (such as the main content area or featured content sections). To maintain an optimal visual balance, certain shape options\u2014like square, circle, and portrait\u2014will be constrained to <b>75% of the container\u2019s width<\/b> when displayed in the main content area, and <b>50%<\/b> in full-width areas.<\/li>\n<\/ul>\n<\/li>\n<li><b>Text Overlay: <\/b>allows you to show\/hide the Cell Header and Cell Content which appears in front of the Background Image.<\/li>\n<li><strong>Foreground Image:<\/strong> allows you to show\/hide the small circular image that appears in front of the Background Image.<\/li>\n<li><strong>Background Image Shape:<\/strong>\n<ol>\n<li><strong>Original:<\/strong>\u00a0this option uses the original aspect ratio of the image. For example, if you use a portrait image, it will display as such.<\/li>\n<li><strong>Landscape:<\/strong>\u00a0this option has 5 different aspect ratios to chose from.\n<ol>\n<li><strong>Background Image Vertical Alignment:<\/strong> parts of the background image may not display depending on the size of a viewers browser window. View our documentation on <a href=\"https:\/\/www.med.unc.edu\/webguide\/cells\/general-usage\/responsive-design#responsive-images\">responsive images<\/a> to learn more about this. This setting allows you to set the starting position of the image vertically. For example, setting this option to <strong>Top<\/strong> gives priority to the top part of the image. If any vertical clipping occurs, it will happen to the bottom portion of the image.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<li><strong>Background Color:<\/strong> allows you to set the color of the box that the Cell Header and Cell Text display in.<\/li>\n<li>Click the <strong>Create Cell<\/strong> button.<\/li>\n<li>If you&#8217;re ready, you can <a href=\"https:\/\/www.med.unc.edu\/webguide\/cells\/general-usage\/using-a-cell\/\">display the Cell<\/a> on your website.<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating A Hero Image Many fields are self explanatory and will not be addressed in this documentation. This documentation will focus on tips, best practices and explanation of fields that generally need some clarification. Determine where the Cell will be used. In the Dashboard, select Cells in either the top or left-hand navigation. If you &hellip; <a href=\"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/image-blocks\/hero-image\/\" aria-label=\"Read more about Hero Image\">Read more<\/a><\/p>\n","protected":false},"author":1369,"featured_media":0,"parent":26,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-244","page","type-page","status-publish","hentry","odd"],"acf":[],"_links_to":[],"_links_to_target":[],"_links":{"self":[{"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/pages\/244","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/users\/1369"}],"replies":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/comments?post=244"}],"version-history":[{"count":0,"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/pages\/244\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/pages\/26"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/media?parent=244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}