{"id":1787,"date":"2018-11-03T03:55:09","date_gmt":"2018-11-03T03:55:09","guid":{"rendered":"https:\/\/wpthemetestdata.wordpress.com\/?p=1752"},"modified":"2020-09-26T10:12:11","modified_gmt":"2020-09-26T14:12:11","slug":"block-gallery","status":"publish","type":"post","link":"https:\/\/blog.uvm.edu\/manual\/2018\/11\/03\/block-gallery\/","title":{"rendered":"Block: Gallery"},"content":{"rendered":"\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:100%\">\n<p class=\"intro--left\">Gallery blocks have two settings: the number of columns, and whether or not images should be cropped. The default number of columns is three, and the maximum number of columns is eight. We don&#8217;t recommend using more than 4 columns.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:48px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Gallery<\/h2>\n\n\n\n<p><br \/><strong>Reusable Block Name:<\/strong> Gallery__<br \/><\/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><a href=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20170127_Katrinell_Davis-10-1024x681.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"681\" src=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20170127_Katrinell_Davis-10-1024x681.jpg\" alt=\"Katrinell Davis from UVM's Department of Sociology\" data-id=\"2517\" data-link=\"https:\/\/blog.uvm.edu\/manual\/fpo_20170127_katrinell_davis-10\/\" class=\"wp-image-2517\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20170127_Katrinell_Davis-10-1024x681.jpg 1024w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20170127_Katrinell_Davis-10-300x200.jpg 300w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20170127_Katrinell_Davis-10-768x511.jpg 768w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20170127_Katrinell_Davis-10.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Magna etiam tempor orci eu. <\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160907_Integrative_Health-166-1024x682.jpg\"><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-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\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Eget nullam non nisi est sit.<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20161019_Day_in_the_Life-4-1024x681.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"681\" src=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20161019_Day_in_the_Life-4-1024x681.jpg\" alt=\"Student with a cow in UVM's dairy barn\" data-id=\"2515\" data-link=\"https:\/\/blog.uvm.edu\/manual\/fpo_20161019_day_in_the_life-4\/\" class=\"wp-image-2515\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20161019_Day_in_the_Life-4-1024x681.jpg 1024w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20161019_Day_in_the_Life-4-300x200.jpg 300w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20161019_Day_in_the_Life-4-768x511.jpg 768w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20161019_Day_in_the_Life-4.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">Pharetra convallis posuere morbi leo urna molestie at elementum eu.<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20180407_Grossman_Grad_Study-58-1024x681.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"681\" src=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20180407_Grossman_Grad_Study-58-1024x681.jpg\" alt=\"Grossman graduate students study\" data-id=\"2529\" data-link=\"https:\/\/blog.uvm.edu\/manual\/fpo_20180407_grossman_grad_study-58\/\" class=\"wp-image-2529\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20180407_Grossman_Grad_Study-58-1024x681.jpg 1024w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20180407_Grossman_Grad_Study-58-300x200.jpg 300w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20180407_Grossman_Grad_Study-58-768x511.jpg 768w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20180407_Grossman_Grad_Study-58.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160304_Mollie_Morgan_Dance-228-1024x682.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"682\" src=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160304_Mollie_Morgan_Dance-228-1024x682.jpg\" alt=\"UVM student Mollie Morgan performs a dance piece\" data-id=\"2506\" data-link=\"https:\/\/blog.uvm.edu\/manual\/fpo_20160304_mollie_morgan_dance-228\/\" class=\"wp-image-2506\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160304_Mollie_Morgan_Dance-228-1024x682.jpg 1024w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160304_Mollie_Morgan_Dance-228-300x200.jpg 300w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160304_Mollie_Morgan_Dance-228-768x511.jpg 768w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20160304_Mollie_Morgan_Dance-228.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_DSC5884-1024x683.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_DSC5884-1024x683.jpg\" alt=\"A classroom at UVM\" data-id=\"2530\" data-link=\"https:\/\/blog.uvm.edu\/manual\/fpo_dsc5884\/\" class=\"wp-image-2530\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_DSC5884-1024x683.jpg 1024w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_DSC5884-300x200.jpg 300w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_DSC5884-768x512.jpg 768w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_DSC5884.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20170517_Spring_Campus-14-1024x682.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"682\" src=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20170517_Spring_Campus-14-1024x682.jpg\" alt=\"UVM campus in spring\" data-id=\"2520\" data-link=\"https:\/\/blog.uvm.edu\/manual\/fpo_20170517_spring_campus-14\/\" class=\"wp-image-2520\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20170517_Spring_Campus-14-1024x682.jpg 1024w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20170517_Spring_Campus-14-300x200.jpg 300w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20170517_Spring_Campus-14-768x511.jpg 768w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/FPO_20170517_Spring_Campus-14.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\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:100%\">\n<p class=\"has-small-font-size\">If the number of images cannot be divided into the number of columns you have selected, the default is to have the last image(s) automatically stretch to the width of your gallery. The gallery above has 7 images with 2-columns selected. Thus, at desktop size, the last row has just one image as the gallery is short one image to make 4 rows of 2. <\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Keep in mind though that the &#8216;straggler&#8217; image will not scale to fit unless the &#8220;crop images&#8221; switch is selected. This will fix the problem with the sizing of the orphan image but will force crop all of the images. Best to not have an &#8220;orphan&#8221; image and crop them all in advance to the same size. <\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"407\" height=\"224\" src=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/10\/gallery__Medial-library-btn.png\" alt=\"\" class=\"wp-image-4427\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/10\/gallery__Medial-library-btn.png 407w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/10\/gallery__Medial-library-btn-300x165.png 300w\" sizes=\"auto, (max-width: 407px) 100vw, 407px\" \/><figcaption>Once you selected the &#8220;Gallery&#8221; block, you will be prompted to add images to your gallery. You do this either by uploading your images or selecting images from the Media Library. <br \/><br \/><br \/>In general, I select &#8220;Media Library&#8221; as you can either select images or add images once you are in the media library. <\/figcaption><\/figure><\/div>\n\n\n\n<p><\/p>\n\n\n\n<div style=\"height:48px\" aria-hidden=\"true\" role=\"presentation\" 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 class=\"has-white-color has-primary-uvmgreen-background-color has-text-color has-background\">TIP:  Your Gallery will look the best if all of your images are cropped to the same size. <\/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 style=\"height:48px\" aria-hidden=\"true\" role=\"presentation\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"275\" height=\"480\" src=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/10\/gallery_column-selection-1.png\" alt=\"\" class=\"wp-image-4430\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/10\/gallery_column-selection-1.png 275w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/10\/gallery_column-selection-1-172x300.png 172w\" sizes=\"auto, (max-width: 275px) 100vw, 275px\" \/><figcaption>After you have selected the images for your Gallery, you need to assign some settings for your Gallery. You do this in the right sidebar. Select the number of columns you want&#8211; keeping in mind that if your images don&#8217;t make even columns, you&#8217;ll have a row of &#8220;orphan&#8221; images. <\/figcaption><\/figure><\/div>\n\n\n\n<p><\/p>\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 class=\"has-white-color has-primary-uvmgreen-background-color has-text-color has-background\">TIP:  &#8220;Crop Images&#8221; can mess up how your photos are viewed. <\/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 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:100%\">\n<p>Test out the &#8220;Crop Images&#8221; option to get a sense of how it affects the images in your gallery. We have found that the forced crop makes the images thin, tall rectangles and doesn&#8217;t work for mobile views. We recommend having all images the same size in a gallery and turning off &#8220;crop images&#8221;. Play with it though and see how it works for you. Make sure you do a visual test on your mobile phone also.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<div style=\"height:120px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Gallery blocks have two settings: the number of columns, and whether or not images should be cropped. The default number of columns is three, and the maximum number of columns is eight. We don&#8217;t recommend using more than 4 columns. Gallery Reusable Block Name: Gallery__ If the number of images cannot be divided into the &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/blog.uvm.edu\/manual\/2018\/11\/03\/block-gallery\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Block: Gallery&#8221;<\/span><\/a><\/p>\n","protected":false},"author":5625,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[258709,2899,246029],"tags":[],"class_list":["post-1787","post","type-post","status-publish","format-standard","hentry","category-block","category-images","category-media-2","entry"],"featured_image_src":null,"featured_image_src_square":null,"author_info":{"display_name":"smasonla","author_link":"https:\/\/blog.uvm.edu\/manual\/author\/smasonla\/"},"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"smasonla","author_link":"https:\/\/blog.uvm.edu\/manual\/author\/smasonla\/"},"rttpg_comment":0,"rttpg_category":"<a href=\"https:\/\/blog.uvm.edu\/manual\/category\/block\/\" rel=\"category tag\">Block<\/a> <a href=\"https:\/\/blog.uvm.edu\/manual\/category\/images\/\" rel=\"category tag\">Image Styles<\/a> <a href=\"https:\/\/blog.uvm.edu\/manual\/category\/media-2\/\" rel=\"category tag\">Media<\/a>","rttpg_excerpt":"Gallery blocks have two settings: the number of columns, and whether or not images should be cropped. The default number of columns is three, and the maximum number of columns is eight. We don&#8217;t recommend using more than 4 columns. Gallery Reusable Block Name: Gallery__ If the number of images cannot be divided into the&hellip;","_links":{"self":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/1787","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/types\/post"}],"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=1787"}],"version-history":[{"count":18,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/1787\/revisions"}],"predecessor-version":[{"id":5350,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/1787\/revisions\/5350"}],"wp:attachment":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/media?parent=1787"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/categories?post=1787"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/tags?post=1787"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}