{"id":283,"date":"2014-02-26T11:33:29","date_gmt":"2014-02-26T11:33:29","guid":{"rendered":"https:\/\/blogs.ncl.ac.uk\/t4\/?p=283"},"modified":"2016-11-23T15:03:32","modified_gmt":"2016-11-23T15:03:32","slug":"three-or-four-column-grid-layouts","status":"publish","type":"post","link":"https:\/\/blogs.ncl.ac.uk\/t4\/2014\/02\/26\/three-or-four-column-grid-layouts\/","title":{"rendered":"Three or four column grid layouts"},"content":{"rendered":"<p>This post talks about grid layouts in the old Research and Conferences template, you can use this post to help you create grid layouts in the new template but we&#8217;ve written a new post for that (<a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/2016\/11\/21\/layout-examples-box-layouts\/\">https:\/\/blogs.ncl.ac.uk\/t4\/2016\/11\/21\/layout-examples-box-layouts\/<\/a>).<\/p>\n<p>A lot of our websites have a homepage laid out as a grid of boxes containing images and text, where each box relates to a theme of the site or a set of related tasks. With a good choice of photography or illustration, this is a good way to make a site look alive and gets people straight to where they want to be. Here are some examples:<\/p>\n<ul>\n<li><a href=\"http:\/\/www.ncl.ac.uk\/sacs\/\">http:\/\/www.ncl.ac.uk\/sacs\/<\/a><\/li>\n<li><a href=\"http:\/\/www.ncl.ac.uk\/openday\/\">http:\/\/www.ncl.ac.uk\/openday\/<\/a><\/li>\n<li><a href=\"http:\/\/www.ncl.ac.uk\/business\/\">http:\/\/www.ncl.ac.uk\/business\/<\/a><\/li>\n<li><a href=\"http:\/\/research.ncl.ac.uk\/nufeb\/teams\/\">http:\/\/research.ncl.ac.uk\/nufeb\/teams\/<\/a><\/li>\n<\/ul>\n<p><strong>Step 1) Remove the Sidebar<\/strong><\/p>\n<p>You&#8217;ll want to make use of the full width of the template. To remove the sidebar, Modify the Content of the homepage of your site (Modify Content is found in the column of yellow boxes) and add the word &#8216;nosidebar&#8217; to the class field:<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLKHomepage.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-286\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLKHomepage-300x224.png\" alt=\"\" width=\"300\" height=\"224\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLKHomepage-300x224.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLKHomepage-400x300.png 400w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLKHomepage.png 703w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Remove-Sidebar.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-287\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Remove-Sidebar-300x281.png\" alt=\"\" width=\"300\" height=\"281\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Remove-Sidebar-300x281.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Remove-Sidebar-319x300.png 319w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Remove-Sidebar.png 958w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Preview or Publish the content, and your text will fit the full width of the template:<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Preview.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-285\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Preview-300x146.png\" alt=\"\" width=\"300\" height=\"146\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Preview-300x146.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Preview-500x243.png 500w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Preview.png 1019w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>So far so good &#8211; note that if you want a full width image, it&#8217;ll need to be 960px wide. If you want an fading banner at the top of the page <a title=\"Banner Slideshows\" href=\"https:\/\/blogs.ncl.ac.uk\/t4\/2014\/01\/23\/banner-slideshows\/\">follow these instructions<\/a>.<\/p>\n<p><strong>Step 2) Create and Upload your Images to the Media Library<\/strong><\/p>\n<p>It&#8217;s best if you resize all of your images to the same size and shape using photoshop and then <a title=\"Images and Media\" href=\"https:\/\/blogs.ncl.ac.uk\/t4\/images-and-media\/\">upload them to the media library<\/a> in one go, going back and forth between editing the content and uploading the images will take more time. The images i&#8217;m using in this example are 420px wide by 236px tall.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Media-Library.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-288\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Media-Library-300x152.png\" alt=\"\" width=\"300\" height=\"152\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Media-Library-300x152.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Media-Library-1024x521.png 1024w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Media-Library-500x254.png 500w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Media-Library.png 1170w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><strong>Step 3) Create a new piece of content for each box<\/strong><\/p>\n<p>Each box on the page will be a new piece of All Purpose Content. Create three new pieces of content with an image at the top and some text. If you&#8217;ve already created them, you should make both the images and the text into links to the appropriate sections of your website. Give each of these new pieces of content the class &#8220;threecol&#8221; as shown in the screenshots below:<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-World-War-One.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-291\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-World-War-One-300x264.png\" alt=\"\" width=\"300\" height=\"264\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-World-War-One-300x264.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-World-War-One-1024x903.png 1024w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-World-War-One-340x300.png 340w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-World-War-One.png 1041w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>\u00a0<a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Training.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-290\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Training-300x258.png\" alt=\"\" width=\"300\" height=\"258\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Training-300x258.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Training-1024x883.png 1024w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Training-347x300.png 347w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Training.png 1033w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Peace-Studies-Day.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-289\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Peace-Studies-Day-300x261.png\" alt=\"\" width=\"300\" height=\"261\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Peace-Studies-Day-300x261.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Peace-Studies-Day-1024x894.png 1024w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Peace-Studies-Day-343x300.png 343w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Peace-Studies-Day.png 1041w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>You can reorder them by returning to the site structure and clicking Modify Content to the right of the homepage &#8211; the move buttons are <em>up<\/em> and <em>down<\/em> arrows to the right of the screen. This can be a bit fiddly, so remember to click Save Changes before leaving this screen.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Re-order.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-294\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Re-order-300x160.png\" alt=\"\" width=\"300\" height=\"160\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Re-order-300x160.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Re-order-1024x546.png 1024w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Re-order-500x266.png 500w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Re-order.png 1100w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Publish or Preview your site and LO!, you will have three boxes laid out in three columns as in the screenshot below:<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/ThreeColMLK.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-295\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/ThreeColMLK-300x245.png\" alt=\"\" width=\"300\" height=\"245\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/ThreeColMLK-300x245.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/ThreeColMLK-1024x839.png 1024w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/ThreeColMLK.png 1027w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><strong>Step 4) But I want FOUR boxes!<\/strong><\/p>\n<p>If you add a fourth box with the class threecol&#8230;<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Prayers-for-Peace.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-296\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Prayers-for-Peace-300x242.png\" alt=\"\" width=\"300\" height=\"242\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Prayers-for-Peace-300x242.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Prayers-for-Peace-1024x826.png 1024w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Prayers-for-Peace-371x300.png 371w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Prayers-for-Peace.png 1133w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>&#8230;You&#8217;ll find that when you publish it, it starts a second row:<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Wrong-Stacking.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-297\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Wrong-Stacking-300x269.png\" alt=\"\" width=\"300\" height=\"269\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Wrong-Stacking-300x269.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Wrong-Stacking-1024x920.png 1024w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Wrong-Stacking-333x300.png 333w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Wrong-Stacking.png 1027w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Using the threecol class is good if you have a number of boxes divisible by three, so if you have four boxes, you probably want to change all of the class fields for these pieces of content to either &#8216;twocol&#8217; or &#8216;fourcol&#8217; &#8211; which you choose will depend on the sizes of your images, quantity of text.<\/p>\n<p><strong>twocol:<\/strong><\/p>\n<p>To make this layout work with two columns, I should have probably formatted the images to be wider and narrower as the second tier now requires scrolling on many monitors, and a\u00a0second tier\u00a0<em>may<\/em>\u00a0look like second class content, which you might not want.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLKTwoCol.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-298\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLKTwoCol-300x284.png\" alt=\"\" width=\"300\" height=\"284\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLKTwoCol-300x284.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLKTwoCol-1024x970.png 1024w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLKTwoCol-316x300.png 316w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLKTwoCol.png 1271w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><strong>fourcol:<\/strong><\/p>\n<p>The fourcol version means that the text ends up looking quite tall, so in this case i&#8217;d probably rethink how much text I need in each box &#8211; maybe consider just using the titles.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Four-Col.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-299\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Four-Col-300x243.png\" alt=\"\" width=\"300\" height=\"243\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Four-Col-300x243.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Four-Col-369x300.png 369w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/MLK-Four-Col.png 1022w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><strong>Step 5) But I want FIVE boxes!<\/strong><\/p>\n<p>We don&#8217;t always have the luxury of planning ahead. There is no facility for creating five column layouts at the moment, but you <em>can<\/em>\u00a0combine a row of three and a row of two by giving the fist three items a &#8216;threecol&#8217; class and the final two &#8216;twocol&#8217;. If you resize your images with this in mind it will look ok, but in this particular example it looks like this:<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Five-Boxes.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-300\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Five-Boxes-300x285.png\" alt=\"\" width=\"300\" height=\"285\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Five-Boxes-300x285.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Five-Boxes-1024x974.png 1024w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Five-Boxes-315x300.png 315w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/Five-Boxes.png 1271w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>A bit weird. A better solution might be to turn your welcome text into a sixth box and return to a <strong>threecol<\/strong> grid by adding the threecol class to the very first piece of content.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/threecolwelcome.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-301\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/threecolwelcome-300x241.png\" alt=\"\" width=\"300\" height=\"241\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/threecolwelcome-300x241.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/threecolwelcome-1024x823.png 1024w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/threecolwelcome-373x300.png 373w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/threecolwelcome.png 1106w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>It then looks like this:<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/SixGrid.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-302\" src=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/SixGrid-300x256.png\" alt=\"\" width=\"300\" height=\"256\" srcset=\"https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/SixGrid-300x256.png 300w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/SixGrid-1024x874.png 1024w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/SixGrid-351x300.png 351w, https:\/\/blogs.ncl.ac.uk\/t4\/files\/2014\/02\/SixGrid.png 1271w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>It will probably look better if the new box also has a similarly formatted image to the others on the page, but hopefully this post has given a good overview of how to create two, three and four column grids on pages.<\/p>\n<p><strong>See also:<\/strong><\/p>\n<ul>\n<li><a title=\"Two Columns and a Banner\" href=\"https:\/\/blogs.ncl.ac.uk\/t4\/2014\/02\/25\/two-columns\/\">Two Columns and a Banner<\/a><\/li>\n<li><a title=\"Footer Logos and Layout\" href=\"https:\/\/blogs.ncl.ac.uk\/t4\/2014\/02\/03\/footer-logos\/\">Footer Logos and Layout<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This post talks about grid layouts in the old Research and Conferences template, you can use this post to help you create grid layouts in the new template but we&#8217;ve written a new post for that (https:\/\/blogs.ncl.ac.uk\/t4\/2016\/11\/21\/layout-examples-box-layouts\/). A lot of &hellip; <a href=\"https:\/\/blogs.ncl.ac.uk\/t4\/2014\/02\/26\/three-or-four-column-grid-layouts\/\">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":[9],"class_list":["post-283","post","type-post","status-publish","format-standard","hentry","category-the-class-field","tag-ordering"],"_links":{"self":[{"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/posts\/283","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=283"}],"version-history":[{"count":8,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/posts\/283\/revisions"}],"predecessor-version":[{"id":723,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/posts\/283\/revisions\/723"}],"wp:attachment":[{"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/media?parent=283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/categories?post=283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/tags?post=283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}