{"id":1013,"date":"2024-04-26T14:01:42","date_gmt":"2024-04-26T14:01:42","guid":{"rendered":"https:\/\/www.med.unc.edu\/webguide\/cells\/?page_id=1013"},"modified":"2025-09-19T14:24:59","modified_gmt":"2025-09-19T14:24:59","slug":"examples-without-left-hand-navigation","status":"publish","type":"page","link":"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/image-blocks\/half-image\/examples-without-left-hand-navigation\/","title":{"rendered":"Half Image Examples Without Left-Hand Navigation"},"content":{"rendered":"

Example One<\/h2>\n

The example below uses the Medium Blue<\/strong> color option and has the Title Accent Underline<\/strong> (small yellow bar under the Title).\u00a0The Image Width Percent<\/strong> is set to 50% which means the image and text block will have the same width. The Image Minimum Height<\/strong> was left at the default 350 pixels. The image dimensions are 1,200 x 613 pixels.<\/p>\n<\/som-cell>\n

 <\/p>\n

Example Two<\/h2>\n

The example below uses the Dark Blue<\/strong> color option with the image placed on the right-hand side. The Image Width Percent<\/strong> is set to 60% which means the image will take up 60% of the banner while the text block gets the remaining 40%. The image dimensions are 1,000 x 433 pixels.<\/p>\n

Image crop:<\/strong> below is the image used in this banner. Most likely you won’t see the full width of this wide pano image. How much you see depends on the width of your browser window and where the cell is being used (in the body content of a page with left-hand navigation, without left-hand navigation or in the Featured Content area). When cropping occurs, the image will display from the center.<\/p>\n

\"\"<\/p>\n<\/som-cell>\n

 <\/p>\n

Example Three<\/h2>\n

The example below is from the ReGaiN Lab<\/a> web site. It uses the Light Gray<\/strong> color option and no Title Accent Underline or button<\/strong>. It displays a sticker that doesn’t link because no url was provided. The Image Width Percent<\/strong> is set to 50% which means the image and text block will have the same width. The image dimensions are 863 x 829 pixels.<\/p>\n<\/som-cell>\n

 <\/p>\n

Example Four<\/h2>\n

This example uses the Medium Blue<\/strong> color option and a YouTube Video<\/strong> rather than an image. The Image Width Percent<\/strong> is set to 60% which means the video will take up 60% of the banner while the text block gets the remaining 40%.<\/p>\n<\/som-cell>\n

 <\/p>\n

Example Five<\/h2>\n

This example uses the White <\/b>color option and a Panopto Video<\/strong><\/a> rather than an image. The Image Width Percent<\/strong> is set to 50% which means the video and text block will have the same width.<\/p>\n<\/som-cell>\n

 <\/p>\n

Example Six<\/h2>\n

This example uses the Medium Blue<\/strong> color option with a Custom Menu<\/strong> as well as a Sticker<\/strong> that links out. The Image Width Percent<\/strong> is set to 60% which means the photo will take up 60% of the banner while the text block gets the remaining 40%. The image dimensions are 2,000 x 1,363 pixels.<\/p>\n<\/som-cell>\n

 <\/p>\n

Example Seven<\/h2>\n

This example is from the Department of Urology<\/a>. It uses the Medium Blue<\/strong> color option with a Custom Menu<\/strong> and a YouTube Video<\/strong>. The Image Width Percent<\/strong> is set to 60% which means the video will take up 60% of the banner while the text block gets the remaining 40%.<\/p>\n<\/som-cell>\n

 <\/p>\n

Example Eight<\/h2>\n

The example below is from the Department of Radiology<\/a>. It uses the White<\/strong> color option with a Title Accent Underline<\/strong> and a button<\/strong>. The Image Width Percent<\/strong> is set to 50% which means the image and text block will have the same width. The image dimensions are 1,0000 x 667 pixels.<\/p>\n<\/som-cell>\n

 <\/p>\n

Example Nine<\/h2>\n

This example uses the Dark Blue<\/strong> color option and displays the Title Accent Underline<\/strong>. The Image Width Percent<\/strong> is set to 40% which means the image will take up 40% of the banner while the text block gets the remaining 60%. The image dimensions are 700 x 1,050 pixels and the image alignment is set to Center<\/strong> and Center<\/strong>.<\/p>\n<\/som-cell>\n

 <\/p>\n

Example Ten<\/h2>\n

This example is the same as example nine (above), except a couple of the settings were modified. These two examples emphasizes the importance of adjusting settings to suit specific placement scenarios. In this example, the Image Width Percent<\/strong> was changed to 30% and the Image Minimum Height<\/strong> was set to 550 pixels. These adjustments were made so that the content would look good in a wider space<\/strong>, such as on a page without left-hand navigation<\/a> or when placed in the Featured Content area<\/a>. Also, the image alignment is set to Center<\/strong> and Top<\/strong>. Resize the width of your browser window (from really large to really small), to see the effect the alignment setting has on the image.<\/p>\n<\/som-cell>\n

 <\/p>\n

Example Eleven<\/h2>\n

This is the same as the example above except that the Image Minimum Height<\/strong> was set to 0 pixels. This will hide the image at small screen sizes.<\/p>\n

In Example Nine, vertical alignment<\/strong> was set to center<\/strong>, causing the top of Dr. Page’s head to be cut off when viewed at a small screen size. Example Ten adjusted alignment to top<\/strong>, resulting in the bottom of Dr. Page’s head being cut off. Setting alignment to bottom<\/strong> would only exacerbate the issue. Increasing the Image Minimum Height<\/strong> would display more of the image, but it might be too large for small screens. By setting Image Minimum Height to zero in this example, the image is hidden on small screens, presenting a cleaner layout without cropping issues.\u00a0Resize your browser window to see this in action.<\/p>\n<\/som-cell>\n

 <\/p>\n

Example Twelve<\/h2>\n

The example below is from the Department of Radiology<\/a> website. It displays the Cell Header<\/strong> with the Title Accent Underline<\/strong>, the Sticker<\/strong> and a Button<\/strong>. The Image Width Percent<\/strong> is set to 65% which means the image will take up 65% of the banner while the text block gets the remaining 35%.\u00a0The image dimensions are 1,000pixels x 515 pixels and the image alignment is set to Center<\/strong> and Bottom<\/strong>.<\/p>\n<\/som-cell>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Example One The example below uses the Medium Blue color option and has the Title Accent Underline (small yellow bar under the Title).\u00a0The Image Width Percent is set to 50% which means the image and text block will have the same width. The Image Minimum Height was left at the default 350 pixels. The image … Read more<\/a><\/p>\n","protected":false},"author":3206,"featured_media":0,"parent":242,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-1013","page","type-page","status-publish","hentry","odd"],"acf":[],"yoast_head":"\nHalf Image Examples Without Left-Hand Navigation - Cells Plugin Documentation<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Half Image Examples Without Left-Hand Navigation - Cells Plugin Documentation\" \/>\n<meta property=\"og:description\" content=\"Example One The example below uses the Medium Blue color option and has the Title Accent Underline (small yellow bar under the Title).\u00a0The Image Width Percent is set to 50% which means the image and text block will have the same width. The Image Minimum Height was left at the default 350 pixels. The image … Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/image-blocks\/half-image\/examples-without-left-hand-navigation\/\" \/>\n<meta property=\"og:site_name\" content=\"Cells Plugin Documentation\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-19T14:24:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-content\/uploads\/sites\/1388\/2023\/09\/9B7A4532-Pano-Edit-300x130.jpg\" \/>\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:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/image-blocks\/half-image\/examples-without-left-hand-navigation\/\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/image-blocks\/half-image\/examples-without-left-hand-navigation\/\",\"name\":\"Half Image Examples Without Left-Hand Navigation - Cells Plugin Documentation\",\"isPartOf\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/image-blocks\/half-image\/examples-without-left-hand-navigation\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/image-blocks\/half-image\/examples-without-left-hand-navigation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-content\/uploads\/sites\/1388\/2023\/09\/9B7A4532-Pano-Edit-300x130.jpg\",\"datePublished\":\"2024-04-26T14:01:42+00:00\",\"dateModified\":\"2025-09-19T14:24:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/image-blocks\/half-image\/examples-without-left-hand-navigation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/image-blocks\/half-image\/examples-without-left-hand-navigation\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/image-blocks\/half-image\/examples-without-left-hand-navigation\/#primaryimage\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-content\/uploads\/sites\/1388\/2023\/09\/9B7A4532-Pano-Edit.jpg\",\"contentUrl\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-content\/uploads\/sites\/1388\/2023\/09\/9B7A4532-Pano-Edit.jpg\",\"width\":1000,\"height\":433},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/image-blocks\/half-image\/examples-without-left-hand-navigation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Single Cell Blocks\",\"item\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Image Blocks\",\"item\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/image-blocks\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Half Image\",\"item\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/image-blocks\/half-image\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Half Image Examples Without Left-Hand Navigation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/#website\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/\",\"name\":\"Cells Plugin Documentation\",\"description\":\"School of Medicine IT Web Guide\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/?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":"Half Image Examples Without Left-Hand Navigation - Cells Plugin Documentation","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Half Image Examples Without Left-Hand Navigation - Cells Plugin Documentation","og_description":"Example One The example below uses the Medium Blue color option and has the Title Accent Underline (small yellow bar under the Title).\u00a0The Image Width Percent is set to 50% which means the image and text block will have the same width. The Image Minimum Height was left at the default 350 pixels. The image … Read more","og_url":"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/image-blocks\/half-image\/examples-without-left-hand-navigation\/","og_site_name":"Cells Plugin Documentation","article_modified_time":"2025-09-19T14:24:59+00:00","og_image":[{"url":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-content\/uploads\/sites\/1388\/2023\/09\/9B7A4532-Pano-Edit-300x130.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/image-blocks\/half-image\/examples-without-left-hand-navigation\/","url":"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/image-blocks\/half-image\/examples-without-left-hand-navigation\/","name":"Half Image Examples Without Left-Hand Navigation - Cells Plugin Documentation","isPartOf":{"@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/image-blocks\/half-image\/examples-without-left-hand-navigation\/#primaryimage"},"image":{"@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/image-blocks\/half-image\/examples-without-left-hand-navigation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-content\/uploads\/sites\/1388\/2023\/09\/9B7A4532-Pano-Edit-300x130.jpg","datePublished":"2024-04-26T14:01:42+00:00","dateModified":"2025-09-19T14:24:59+00:00","breadcrumb":{"@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/image-blocks\/half-image\/examples-without-left-hand-navigation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/image-blocks\/half-image\/examples-without-left-hand-navigation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/image-blocks\/half-image\/examples-without-left-hand-navigation\/#primaryimage","url":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-content\/uploads\/sites\/1388\/2023\/09\/9B7A4532-Pano-Edit.jpg","contentUrl":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-content\/uploads\/sites\/1388\/2023\/09\/9B7A4532-Pano-Edit.jpg","width":1000,"height":433},{"@type":"BreadcrumbList","@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/image-blocks\/half-image\/examples-without-left-hand-navigation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.med.unc.edu\/webguide\/cells\/"},{"@type":"ListItem","position":2,"name":"Single Cell Blocks","item":"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/"},{"@type":"ListItem","position":3,"name":"Image Blocks","item":"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/image-blocks\/"},{"@type":"ListItem","position":4,"name":"Half Image","item":"https:\/\/www.med.unc.edu\/webguide\/cells\/single-cell-blocks\/image-blocks\/half-image\/"},{"@type":"ListItem","position":5,"name":"Half Image Examples Without Left-Hand Navigation"}]},{"@type":"WebSite","@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/#website","url":"https:\/\/www.med.unc.edu\/webguide\/cells\/","name":"Cells Plugin Documentation","description":"School of Medicine IT Web Guide","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.med.unc.edu\/webguide\/cells\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links_to":[],"_links_to_target":[],"_links":{"self":[{"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/pages\/1013","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\/3206"}],"replies":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/comments?post=1013"}],"version-history":[{"count":0,"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/pages\/1013\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/pages\/242"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/media?parent=1013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}