{"id":193,"date":"2014-02-03T14:49:32","date_gmt":"2014-02-03T14:49:32","guid":{"rendered":"https:\/\/blogs.ncl.ac.uk\/t4\/?p=193"},"modified":"2014-02-03T15:30:20","modified_gmt":"2014-02-03T15:30:20","slug":"footer-logos","status":"publish","type":"post","link":"https:\/\/blogs.ncl.ac.uk\/t4\/2014\/02\/03\/footer-logos\/","title":{"rendered":"Footer Logos and Layout"},"content":{"rendered":"<p>If you have multiple funding sources, or input from other schools and institutions, you&#8217;ll probably want to display their logo&#8217;s somewhere.<\/p>\n<p>Having a &#8216;partners&#8217; section is good for this, but another common option is the sites footer (the sidebar of every page can be too intrusive).<\/p>\n<p>Laying images out in a single piece of <em>All Purpose Content<\/em> can be fiddly: this is not so much a flaw in T4, but more to do with the web itself and usually requires some knowledge of HTML and\/or CSS to achieve good looking results.<\/p>\n<p>Withing our installation of T4, we offer a &#8216;Class&#8217; field within &#8216;All Purpose Content&#8217; which we use to give specific instructions about the display of a piece of content.\u00a0<a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/ThreeCol1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-194\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/ThreeCol1-295x300.png\" alt=\"Adding the ThreeCol class.\" width=\"295\" height=\"300\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/ThreeCol1-295x300.png 295w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/ThreeCol1.png 869w\" sizes=\"auto, (max-width: 295px) 100vw, 295px\" \/><\/a><\/p>\n<p>One such class is &#8216;threecol&#8217;: if you give a piece of content this class, it will take up 1\/3 of the width of the template.<\/p>\n<p>Give your Address piece of content this class, and then add two more.<a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Left-Logos.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-195\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Left-Logos-300x261.png\" alt=\"Left Logos\" width=\"300\" height=\"261\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Left-Logos-300x261.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Left-Logos-344x300.png 344w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Left-Logos.png 942w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>\u00a0<a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Right-Logos.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-196\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Right-Logos-300x282.png\" alt=\"\" width=\"300\" height=\"282\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Right-Logos-300x282.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Right-Logos-318x300.png 318w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Right-Logos.png 946w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Order the three pieces of content so that the pieces of content with the class &#8216;threecol&#8217; are in left to right order and click <em>Save Changes<\/em>.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Ordering-within-Footer.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-197\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Ordering-within-Footer-300x55.png\" alt=\"\" width=\"300\" height=\"55\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Ordering-within-Footer-300x55.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Ordering-within-Footer-1024x189.png 1024w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Ordering-within-Footer-500x92.png 500w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Ordering-within-Footer.png 1068w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>When the site publishes, each piece of content will take up 1\/3 of the width of the template and look like this:<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Visualising-Airspaces-Footer.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-198\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Visualising-Airspaces-Footer-300x195.png\" alt=\"Three Col Footer\" width=\"300\" height=\"195\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Visualising-Airspaces-Footer-300x195.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Visualising-Airspaces-Footer-460x300.png 460w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Visualising-Airspaces-Footer.png 1009w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<ul>\n<li>Note that you may have to work with the <a title=\"The Media Library\" href=\"https:\/\/blogs.ncl.ac.uk\/t4\/2014\/01\/23\/the-media-library\/\">media library<\/a> (or in photoshop) beforehand to ensure that all images are an appropriate size.<\/li>\n<li>Logos will have different aspect ratios so figuring out how to give them equal parity while looking tidy is always going to be awkward.<\/li>\n<li>If you have more logos, the process is identical for using classes called &#8216;fourcols&#8217;, &#8216;fivecols&#8217; and &#8216;sixcols&#8217;.<\/li>\n<li>Remember that you can make the logos into links to the appropriate websites using the chainlink icon.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>If you have multiple funding sources, or input from other schools and institutions, you&#8217;ll probably want to display their logo&#8217;s somewhere. Having a &#8216;partners&#8217; section is good for this, but another common option is the sites footer (the sidebar of &hellip; <a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/2014\/02\/03\/footer-logos\/\">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":[19],"tags":[],"class_list":["post-193","post","type-post","status-publish","format-standard","hentry","category-the-class-field"],"_links":{"self":[{"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/posts\/193","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=193"}],"version-history":[{"count":13,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/posts\/193\/revisions"}],"predecessor-version":[{"id":202,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/posts\/193\/revisions\/202"}],"wp:attachment":[{"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/media?parent=193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/categories?post=193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/tags?post=193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}