{"id":3484,"date":"2019-08-29T16:43:16","date_gmt":"2019-08-29T16:43:16","guid":{"rendered":"https:\/\/wptest.sdelling.w3.uvm.edu\/?page_id=3484"},"modified":"2020-11-12T17:02:10","modified_gmt":"2020-11-12T22:02:10","slug":"images-with-optional-captions","status":"publish","type":"page","link":"https:\/\/blog.uvm.edu\/manual\/images-with-optional-captions\/","title":{"rendered":"Images with optional captions"},"content":{"rendered":"\n<p class=\"intro--left\">WordPress supports images in columns with optional captions. We&#8217;ve created some starter blocks with 2, 3, and 4 columns.<\/p>\n\n\n\n<div style=\"height:48px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>To implement images in columns on your page:<\/strong> While you are on the page you wish to edit, click on the little [+] icon at the top left of your page. Type &#8220;columns&#8221; in the Block search field to filter all blocks by &#8220;columns&#8221;. Select the desired reusable quote block\u2013 either the &#8220;columns&#8221; block or the pre-populated reusable blocks shown below. The selected component will load into your page. If you loaded one of the reusable blocks shown below, just click on the block you just loaded. The name of the block will show up over a light gray band above the block. Click on the three vertical dots [&#8230;] and select &#8220;convert to regular block.&#8221; You are now ready to edit the placeholder image content. <\/p>\n\n\n\n<p>If you load the general &#8220;columns&#8221; block, just selected the number of columns you want and then place an image in each column. The number of columns is controlled in the right sidebar with a slider.<\/p>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Two-column images with optional captions below<\/h2>\n\n\n\n<p>You can add images as a gallery. Here is a gallery of 2 images in 2 columns with captions. Captions for gallery show up as white text over the bottom of the image. WordPress adds a subtle transparent black gradation at overlay to ensure the readability of the text.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-gallery columns-2 wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"682\" src=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160907_Integrative_Health-166-1024x682.jpg\" alt=\"UVM students practice yoga on a deck on Lake Champlain\" data-id=\"2514\" data-full-url=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160907_Integrative_Health-166.jpg\" data-link=\"https:\/\/blog.uvm.edu\/manual\/fpo_20160907_integrative_health-166\/\" class=\"wp-image-2514\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160907_Integrative_Health-166-1024x682.jpg 1024w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160907_Integrative_Health-166-300x200.jpg 300w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160907_Integrative_Health-166-768x511.jpg 768w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160907_Integrative_Health-166.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"blocks-gallery-item__caption\">Tincidunt tortor aliquam nulla facilisi cras fermentum odio. <\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"681\" src=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20130402_Anthony_Grudin-30-1024x681.jpg\" alt=\"UVM professor Anthony Grudin discusses a painting\" data-id=\"2495\" data-full-url=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20130402_Anthony_Grudin-30.jpg\" data-link=\"https:\/\/blog.uvm.edu\/manual\/fpo_20130402_anthony_grudin-30\/\" class=\"wp-image-2495\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20130402_Anthony_Grudin-30-1024x681.jpg 1024w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20130402_Anthony_Grudin-30-300x200.jpg 300w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20130402_Anthony_Grudin-30-768x511.jpg 768w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20130402_Anthony_Grudin-30.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"blocks-gallery-item__caption\">Nunc congue nisi vitae suscipit. Eu lobortis elementum nibh tellus.<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>If you want the caption to appear below the image, just use the &#8220;columns&#8221; block and add an image block and image to each column.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"682\" src=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160907_Integrative_Health-166-1024x682.jpg\" alt=\"UVM students practice yoga on a deck on Lake Champlain\" class=\"wp-image-2514\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160907_Integrative_Health-166-1024x682.jpg 1024w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160907_Integrative_Health-166-300x200.jpg 300w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160907_Integrative_Health-166-768x511.jpg 768w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160907_Integrative_Health-166.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption><strong>Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Eget nullam non nisi est sit.<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"681\" src=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20130402_Anthony_Grudin-30-1024x681.jpg\" alt=\"UVM professor Anthony Grudin discusses a painting\" class=\"wp-image-2495\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20130402_Anthony_Grudin-30-1024x681.jpg 1024w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20130402_Anthony_Grudin-30-300x200.jpg 300w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20130402_Anthony_Grudin-30-768x511.jpg 768w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20130402_Anthony_Grudin-30.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Nunc congue nisi vitae suscipit. Eu lobortis elementum nibh tellus.<br \/><br \/><br \/><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:120px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Three-column images with optional captions below<\/h2>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"682\" src=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160907_Integrative_Health-166-1024x682.jpg\" alt=\"UVM students practice yoga on a deck on Lake Champlain\" class=\"wp-image-2514\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160907_Integrative_Health-166-1024x682.jpg 1024w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160907_Integrative_Health-166-300x200.jpg 300w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160907_Integrative_Health-166-768x511.jpg 768w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160907_Integrative_Health-166.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"681\" src=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160907_Integrative_Health-33-1024x681.jpg\" alt=\"Students in the Integrative Health program at UVM\" class=\"wp-image-2513\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160907_Integrative_Health-33-1024x681.jpg 1024w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160907_Integrative_Health-33-300x200.jpg 300w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160907_Integrative_Health-33-768x511.jpg 768w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160907_Integrative_Health-33.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"681\" src=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_209102TREK-377-1024x681.jpg\" alt=\"UVM students hiking in the woods\" class=\"wp-image-2477\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_209102TREK-377-1024x681.jpg 1024w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_209102TREK-377-300x200.jpg 300w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_209102TREK-377-768x511.jpg 768w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_209102TREK-377.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">To add captions below the images<\/h2>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>To add captions below the images, just click on an image and a light gray text entry field below with the prompt &#8220;caption&#8221; will show. Click your cursor in this text area and type in your caption. <\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>WordPress supports images in columns with optional captions. We&#8217;ve created some starter blocks with 2, 3, and 4 columns. To implement images in columns on your page: While you are on the page you wish to edit, click on the little [+] icon at the top left of your page. Type &#8220;columns&#8221; in the Block &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/blog.uvm.edu\/manual\/images-with-optional-captions\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Images with optional captions&#8221;<\/span><\/a><\/p>\n","protected":false},"author":5625,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3484","page","type-page","status-publish","hentry","entry"],"featured_image_src":null,"featured_image_src_square":null,"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"smasonla","author_link":"https:\/\/blog.uvm.edu\/manual\/author\/smasonla\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"WordPress supports images in columns with optional captions. We&#8217;ve created some starter blocks with 2, 3, and 4 columns. To implement images in columns on your page: While you are on the page you wish to edit, click on the little [+] icon at the top left of your page. Type &#8220;columns&#8221; in the Block&hellip;","_links":{"self":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/pages\/3484","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/users\/5625"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/comments?post=3484"}],"version-history":[{"count":20,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/pages\/3484\/revisions"}],"predecessor-version":[{"id":5473,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/pages\/3484\/revisions\/5473"}],"wp:attachment":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/media?parent=3484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}