{"id":373,"date":"2014-05-30T14:27:59","date_gmt":"2014-05-30T13:27:59","guid":{"rendered":"https:\/\/blogs.ncl.ac.uk\/t4\/?p=373"},"modified":"2016-11-21T10:42:28","modified_gmt":"2016-11-21T10:42:28","slug":"replacing-the-banner-text-with-an-image","status":"publish","type":"post","link":"https:\/\/blogs.ncl.ac.uk\/t4\/2014\/05\/30\/replacing-the-banner-text-with-an-image\/","title":{"rendered":"Replacing the Banner text with an Image"},"content":{"rendered":"<p><strong>Replacing the Banner text with an Image<\/strong><\/p>\n<p>To replace the text along the top of the template with a graphic, you must first resize the required image using image editing software. We&#8217;ve provided some basic instructions on <a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/2014\/05\/21\/basic-image-editing-in-photoshop\/\">resizing and cropping images using Photoshop<\/a>, which is available on <a href=\"http:\/\/ras.ncl.ac.uk\">RAS<\/a>.<\/p>\n<p>The image size for the banner should be 140px tall, by 1066px wide &#8211; resize by clicking Image -&gt; Image Size.\u00a0 This will fill the standard content area.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-513\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/1-300x192.png\" alt=\"1\" width=\"300\" height=\"192\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/1-300x192.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/1-468x300.png 468w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/1.png 602w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>To fill the entire width of the browser, your image should be 1903px wide and still 140px tall.<\/p>\n<p><em>Note: if you&#8217;re using the old style research template, the logo needs to be 600px wide by 110px tall.<\/em><\/p>\n<p>A photographic image should be saved as a JPG, but line art is best saved as either a GIF or a PNG. When you click &#8216;Save for Web&#8217; you should be able to choose from a number of different quality options.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-514\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/2-300x192.png\" alt=\"2\" width=\"300\" height=\"192\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/2-300x192.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/2-468x300.png 468w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/2.png 602w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Then, log onto Terminal Four at <a href=\"http:\/\/cms.ncl.ac.uk\">cms.ncl.ac.uk <\/a>and click on Modify Content using the yellow dropdown box to the right of the hidden section called Section Styles.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/m.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-522\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/m-300x192.png\" alt=\"m\" width=\"300\" height=\"192\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/m-300x192.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/m-768x493.png 768w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/m.png 1024w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/m-468x300.png 468w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>There will be a piece of content called &#8216;Banner Graphics&#8217; &#8211; select &#8216;Modify&#8217;<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-516\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/4-300x192.png\" alt=\"4\" width=\"300\" height=\"192\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/4-300x192.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/4-468x300.png 468w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/4.png 602w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Then, select &#8216;Browse&#8217; to the right of Banner Image, and choose the image you&#8217;ve just created.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-517\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/5-300x192.png\" alt=\"5\" width=\"300\" height=\"192\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/5-300x192.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/5-468x300.png 468w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/5.png 602w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>You can then select other options such as the positioning of your banner.\u00a0 The \u201cCover\u201d option here will stretch your image to the full width of the screen, if it isn\u2019t already 1903px wide.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/6.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-518\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/6-300x192.png\" alt=\"6\" width=\"300\" height=\"192\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/6-300x192.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/6-468x300.png 468w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/6.png 602w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Check the boxes to say whether you want to hide the site title text and the University logo (these might get in the way of your banner image if not).<\/p>\n<p>Finally, you have the option to upload your own logo; the height of the branding section is 140px and so, to allow for air around your image, we\u2019d recommend about 70px if you do.<\/p>\n<p>Click on Update and Approve, and then return to the site structure to preview the site.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/7.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-519\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/7-300x192.png\" alt=\"7\" width=\"300\" height=\"192\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/7-300x192.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/7-468x300.png 468w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2016\/11\/7.png 602w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Your image should be uploaded into the top bar of the site.\u00a0 Depending on the colours used in the image, you may wish to adjust the sites colour scheme using the \u2018Colour Picker\u2019 content in the Section Styles folder.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Replacing the Banner text with an Image To replace the text along the top of the template with a graphic, you must first resize the required image using image editing software. We&#8217;ve provided some basic instructions on resizing and cropping &hellip; <a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/2014\/05\/30\/replacing-the-banner-text-with-an-image\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":839,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-373","post","type-post","status-publish","format-standard","hentry","category-content-templates"],"_links":{"self":[{"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/posts\/373","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/users\/839"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/comments?post=373"}],"version-history":[{"count":5,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/posts\/373\/revisions"}],"predecessor-version":[{"id":719,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/posts\/373\/revisions\/719"}],"wp:attachment":[{"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/media?parent=373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/categories?post=373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/tags?post=373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}