{"id":11284896,"date":"2019-03-07T09:41:44","date_gmt":"2019-03-07T09:41:44","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&#038;p=11284896"},"modified":"2024-06-06T16:55:08","modified_gmt":"2024-06-06T16:55:08","slug":"gallery-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/gallery-block\/","title":{"rendered":"Gallery block"},"content":{"rendered":"\n<p class=\"has-text-align-right has-small-font-size\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/blocks\/\">Go back to the list of <strong>Blocks<\/strong><\/a><\/p>\n\n\n\n<p>The <em>Gallery block<\/em> allows you to easily add multiple photos and automatically arrange them in a gallery. You can control the number of columns and the size of the images in the gallery. <\/p>\n\n\n\n<p>The Gallery block can be added to a page by clicking on the\u00a0Block Inserter\u00a0<strong>(+)<\/strong> icon and selecting the\u00a0Gallery block.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter is-resized size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"542\" src=\"https:\/\/wordpress.org\/documentation\/files\/2021\/12\/Screen-Shot-2021-12-21-at-4.09.44-PM-1024x542.png\" alt=\"Image showing the Quick Inserter with gallery in the search field. \" class=\"wp-image-15185965\" style=\"width:369px;height:195px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2021\/12\/Screen-Shot-2021-12-21-at-4.09.44-PM-1024x542.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2021\/12\/Screen-Shot-2021-12-21-at-4.09.44-PM-300x159.png 300w, https:\/\/wordpress.org\/documentation\/files\/2021\/12\/Screen-Shot-2021-12-21-at-4.09.44-PM-768x407.png 768w, https:\/\/wordpress.org\/documentation\/files\/2021\/12\/Screen-Shot-2021-12-21-at-4.09.44-PM-1536x813.png 1536w, https:\/\/wordpress.org\/documentation\/files\/2021\/12\/Screen-Shot-2021-12-21-at-4.09.44-PM-2048x1084.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Adding the Gallery block<\/figcaption><\/figure>\n\n\n\n<p>Alternatively, you can type <code>\/gallery<\/code> and press Enter.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter is-resized size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"726\" src=\"https:\/\/wordpress.org\/documentation\/files\/2021\/12\/Screen-Shot-2021-12-21-at-4.08.17-PM-1024x726.png\" alt=\"Image of the slash inserter with the gallery block listed.\" class=\"wp-image-15185961\" style=\"width:356px;height:252px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2021\/12\/Screen-Shot-2021-12-21-at-4.08.17-PM-1024x726.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2021\/12\/Screen-Shot-2021-12-21-at-4.08.17-PM-300x213.png 300w, https:\/\/wordpress.org\/documentation\/files\/2021\/12\/Screen-Shot-2021-12-21-at-4.08.17-PM-768x544.png 768w, https:\/\/wordpress.org\/documentation\/files\/2021\/12\/Screen-Shot-2021-12-21-at-4.08.17-PM.png 1326w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Adding the Gallery block with  <em>\/gallery<\/em> shortcut<\/figcaption><\/figure>\n\n\n\n<p class=\"has-text-align-left has-background\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/adding-a-new-block\/\">Detailed instructions on adding blocks<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"block-toolbar\">Block toolbar<\/h2>\n\n\n\n<p>Each block has its own block-specific controls that allow you to manipulate the block right in the editor.<\/p>\n\n\n\n<p>The\u00a0Gallery block\u00a0has a toolbar for the individual images as well as a toolbar for the entire Gallery block.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"664\" height=\"120\" src=\"https:\/\/wordpress.org\/documentation\/files\/2019\/03\/gallery-toolbar.png\" alt=\"Gallery block toolbar options\" class=\"wp-image-16356320\" style=\"width:332px;height:60px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2019\/03\/gallery-toolbar.png 664w, https:\/\/wordpress.org\/documentation\/files\/2019\/03\/gallery-toolbar-300x54.png 300w\" sizes=\"auto, (max-width: 664px) 100vw, 664px\" \/><figcaption class=\"wp-element-caption\">Gallery block toolbar options<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">For the Gallery block<\/h3>\n\n\n\n<p>The main options in the Gallery block toolbar are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Transform to<\/li>\n\n\n\n<li>Block moving handles\n<ul class=\"wp-block-list\">\n<li>Drag and drop <\/li>\n\n\n\n<li>Move up and down<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Change alignment<\/li>\n\n\n\n<li>Caption <\/li>\n\n\n\n<li>Add button<\/li>\n\n\n\n<li>More options<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Transform to<\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/08\/Screen-Shot-2022-08-20-at-10.15.52-AM-1.png\" alt=\"Transforming the gallery block into a different type of block\" class=\"wp-image-15934561\" style=\"width:367px;height:262px\" \/><\/figure>\n\n\n\n<p>You can transform or change the block to another block including the Group, Image, and Column blocks. <\/p>\n\n\n\n<p>When you change the block type to the Image block, every image in your gallery will be converted into a single image block. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Block moving handles<\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"610\" height=\"142\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/08\/Screen-Shot-2022-08-20-at-10.16.08-AM.png\" alt=\"Moving a gallery block\" class=\"wp-image-15934565\" style=\"width:394px;height:92px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/08\/Screen-Shot-2022-08-20-at-10.16.08-AM.png 610w, https:\/\/wordpress.org\/documentation\/files\/2022\/08\/Screen-Shot-2022-08-20-at-10.16.08-AM-300x70.png 300w\" sizes=\"auto, (max-width: 610px) 100vw, 610px\" \/><\/figure>\n\n\n\n<p>The block-moving handles allow you to move the block up and down the editor. Use the six dots icon to drag and drop the\u00a0Gallery\u00a0block and place it anywhere on the page. Alternatively, click on the up and down arrows to move the block up or down.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/adding-a-new-block\/\"><\/a><a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/documentation\/article\/moving-blocks\/\" target=\"_blank\">Get more information about moving a block within the editor.<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Change alignment<\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"464\" height=\"610\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/08\/Screen-Shot-2022-08-20-at-10.16.28-AM.png\" alt=\"Gallery block alignment and width\" class=\"wp-image-15934566\" style=\"width:232px;height:305px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/08\/Screen-Shot-2022-08-20-at-10.16.28-AM.png 464w, https:\/\/wordpress.org\/documentation\/files\/2022\/08\/Screen-Shot-2022-08-20-at-10.16.28-AM-228x300.png 228w\" sizes=\"auto, (max-width: 464px) 100vw, 464px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Align left<\/strong> &#8211; Make the block align-center<\/li>\n\n\n\n<li><strong>Align center<\/strong> &#8211; Make the block alignment centered<\/li>\n\n\n\n<li><strong>Align right <\/strong>&#8211; Make the&nbsp;block align-right<\/li>\n\n\n\n<li><strong>Wide width<\/strong> &#8211; Increase the width of the block beyond the content size<\/li>\n\n\n\n<li><strong>Full width<\/strong> &#8211; Extend the block to cover the full width of the screen.<\/li>\n<\/ul>\n\n\n\n<p><em>Wide width<\/em> and <em>Full width<\/em> alignment options are only available if they are enabled in your theme.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Caption<\/h4>\n\n\n\n<p>You can add this by clicking on the caption icon on the settings toolbar.  <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"641\" src=\"https:\/\/wordpress.org\/documentation\/files\/2019\/03\/gallery-caption-1024x641.png\" alt=\"Adding a caption to the gallery block\" class=\"wp-image-16356316\" style=\"width:512px;height:321px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2019\/03\/gallery-caption-1024x641.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2019\/03\/gallery-caption-300x188.png 300w, https:\/\/wordpress.org\/documentation\/files\/2019\/03\/gallery-caption-768x481.png 768w, https:\/\/wordpress.org\/documentation\/files\/2019\/03\/gallery-caption.png 1338w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Adding a caption to the Gallery block<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Adding images<\/h4>\n\n\n\n<p>The <strong>Add<\/strong> button in the Gallery block lets you add images to the gallery.  You have two options to add images to the Gallery block:\u00a0<strong>Open Media Library<\/strong> and <strong>Upload<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"532\" height=\"354\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/08\/Screen-Shot-2022-08-20-at-10.16.45-AM.png\" alt=\"Adding images to the gallery block\" class=\"wp-image-15934580\" style=\"width:347px;height:231px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/08\/Screen-Shot-2022-08-20-at-10.16.45-AM.png 532w, https:\/\/wordpress.org\/documentation\/files\/2022\/08\/Screen-Shot-2022-08-20-at-10.16.45-AM-300x200.png 300w\" sizes=\"auto, (max-width: 532px) 100vw, 532px\" \/><figcaption class=\"wp-element-caption\">Adding images to the Gallery block<\/figcaption><\/figure>\n\n\n\n<p>The Upload option allows you to upload a new image or multiple images to the\u00a0Gallery block\u00a0and to your media library. The Media Library option lets you select from previously uploaded images in your Media Library. <\/p>\n\n\n\n<p>You can also drag and drop multiple images at the same time from your explorer or finder window into the Gallery block.<\/p>\n\n\n\n<p>Alternatively, you can open the main inserter panel on the editor and open the media tab. Then, you can drag and drop images from the media library and Openverse into the Gallery block.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Options<\/h4>\n\n\n\n<p>These controls give you the option to copy, duplicate, and edit your block as HTML.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background\" style=\"background-color:#e5f5fa\"><a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/documentation\/article\/moving-blocks\/\" target=\"_blank\"><\/a><a href=\"https:\/\/wordpress.org\/documentation\/article\/more-options\/\">Read about these and other settings.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Toolbar for images in the gallery<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Move images<\/h4>\n\n\n\n<p>After you add images to the Gallery block, you can change the order of images in the gallery. Click on an image and in the block toolbar use the <strong>move left<\/strong> and <strong>move right<\/strong> arrow handles to arrange the images as you like.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"309\" src=\"https:\/\/wordpress.org\/documentation\/files\/2019\/03\/moving-images-1024x309.png\" alt=\"Moving images in your gallery\" class=\"wp-image-16356239\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2019\/03\/moving-images-1024x309.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2019\/03\/moving-images-300x90.png 300w, https:\/\/wordpress.org\/documentation\/files\/2019\/03\/moving-images-768x232.png 768w, https:\/\/wordpress.org\/documentation\/files\/2019\/03\/moving-images.png 1466w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Moving images in your gallery<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Add a link to an image<\/h4>\n\n\n\n<p>To add a link to an image, click the link icon in the block toolbar for the selected image. You can paste a URL for the link, type in the text field to search for a page. You can also link to the <strong>Media file<\/strong> of the image or the <strong>Attachment Page<\/strong> for the image.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"518\" src=\"https:\/\/wordpress.org\/documentation\/files\/2019\/03\/adding-links-1024x518.png\" alt=\"Adding a link to the images in the gallery block\" class=\"wp-image-16356241\" style=\"width:512px;height:259px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2019\/03\/adding-links-1024x518.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2019\/03\/adding-links-300x152.png 300w, https:\/\/wordpress.org\/documentation\/files\/2019\/03\/adding-links-768x388.png 768w, https:\/\/wordpress.org\/documentation\/files\/2019\/03\/adding-links.png 1036w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Adding a link to the images in the Gallery block<\/figcaption><\/figure>\n\n\n\n<p>You can change the link settings by clicking the down arrow in the top right corner. You can choose to open the link in a new tab, add CSS class for the link and link rel attribute, if needed.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"454\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/08\/Screen-Shot-2022-08-20-at-4.21.57-PM.png\" alt=\"Settings for the image link\" class=\"wp-image-15935049\" style=\"width:356px;height:210px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/08\/Screen-Shot-2022-08-20-at-4.21.57-PM.png 770w, https:\/\/wordpress.org\/documentation\/files\/2022\/08\/Screen-Shot-2022-08-20-at-4.21.57-PM-300x177.png 300w, https:\/\/wordpress.org\/documentation\/files\/2022\/08\/Screen-Shot-2022-08-20-at-4.21.57-PM-768x453.png 768w\" sizes=\"auto, (max-width: 770px) 100vw, 770px\" \/><figcaption class=\"wp-element-caption\">Settings for the image link<\/figcaption><\/figure>\n\n\n\n<p>After you add a link to the image, you can click the link icon in the block toolbar and choose the <strong>pen<\/strong> icon to edit the link or the <strong>X<\/strong> icon to delete the link.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"464\" src=\"https:\/\/wordpress.org\/documentation\/files\/2019\/03\/editing-link-1024x464.png\" alt=\"Removing a link in an image\" class=\"wp-image-16356243\" style=\"width:512px;height:232px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2019\/03\/editing-link-1024x464.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2019\/03\/editing-link-300x136.png 300w, https:\/\/wordpress.org\/documentation\/files\/2019\/03\/editing-link-768x348.png 768w, https:\/\/wordpress.org\/documentation\/files\/2019\/03\/editing-link.png 1032w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Editing the link on the image<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Crop an image<\/h4>\n\n\n\n<p>Here&#8217;s a video showing how you can crop an image in the gallery, zoom in, rotate and crop by keeping the aspect ratio of the selected image.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/documentation\/files\/2019\/03\/cropping-gallery-images.mp4\"><\/video><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Replace an image<\/h4>\n\n\n\n<p>You can replace images in your gallery with the <em>Replace<\/em> button in the block toolbar of the selected image. This will allow you to upload a new image to the media library or select another image from your library.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"367\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/replace-image-1024x367.png\" alt=\"Image showing the replace toolbar. \" class=\"wp-image-16356245\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/replace-image-1024x367.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/replace-image-300x108.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/replace-image-768x275.png 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/replace-image.png 1372w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Replacing images in your gallery<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Remove an image<\/h4>\n\n\n\n<p>To remove an image from your gallery, select the image in the gallery and either click <kbd>delete<\/kbd> on your keyboard or select the three-dot menu on the block toolbar of the selected image and select <strong>Remove Image<\/strong>. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"773\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/remove-image-1024x773.png\" alt=\"Removing images from the gallery block\" class=\"wp-image-16356307\" style=\"width:512px;height:387px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/remove-image-1024x773.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/remove-image-300x226.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/remove-image-768x579.png 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/remove-image.png 1450w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Removing images from the Gallery block<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Adding captions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Caption for images<\/h3>\n\n\n\n<p>You can caption your images individually by editing the &#8220;Add caption&#8221; text with the image. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"422\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/image-caption-1024x422.png\" alt=\"Adding captions to images in the gallery block\" class=\"wp-image-16356309\" style=\"width:512px;height:211px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/image-caption-1024x422.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/image-caption-300x124.png 300w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/image-caption-768x316.png 768w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/image-caption.png 1146w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Adding captions to images in the Gallery block<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Caption for the gallery<\/h3>\n\n\n\n<p>You can add this by clicking on the caption icon on the block settings toolbar.  <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"641\" src=\"https:\/\/wordpress.org\/documentation\/files\/2019\/03\/gallery-caption-1024x641.png\" alt=\"Adding a caption to the gallery block\" class=\"wp-image-16356316\" style=\"width:512px;height:321px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2019\/03\/gallery-caption-1024x641.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2019\/03\/gallery-caption-300x188.png 300w, https:\/\/wordpress.org\/documentation\/files\/2019\/03\/gallery-caption-768x481.png 768w, https:\/\/wordpress.org\/documentation\/files\/2019\/03\/gallery-caption.png 1338w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Adding a caption to the Gallery block<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"block-settings\">Block settings<\/h2>\n\n\n\n<p>Every block has specific options in the editor sidebar in addition to the options found in the block toolbar.&nbsp;<em>If you do not see the sidebar, simply click the &#8216;sidebar&#8217; icon.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"482\" height=\"255\" src=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/image-1.png\" alt=\"Sidebar icon to display the Block settings\" class=\"wp-image-16359443\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/image-1.png 482w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/image-1-300x159.png 300w\" sizes=\"auto, (max-width: 482px) 100vw, 482px\" \/><figcaption class=\"wp-element-caption\">Sidebar icon to display the Block settings<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">For the Gallery block<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Columns<\/h4>\n\n\n\n<figure class=\"wp-block-image alignright size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"302\" height=\"706\" src=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/2024-01-16_15-30.png\" alt=\"Gallery block settings panel\" class=\"wp-image-16359445\" style=\"width:237px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/2024-01-16_15-30.png 302w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/2024-01-16_15-30-128x300.png 128w\" sizes=\"auto, (max-width: 302px) 100vw, 302px\" \/><figcaption class=\"wp-element-caption\">Showing settings for the Gallery block<\/figcaption><\/figure>\n\n\n\n<p>You can choose how many columns your Gallery block can have. <\/p>\n\n\n\n<p>Select between 1 column and 8 columns. Keep in mind that you can only select as many columns as you have images. <\/p>\n\n\n\n<p>This means that if you add 4 images, you&#8217;ll be given the option for a maximum of 4 columns. This number will increase as you add more images until you reach the maximum of 8. Even if you add more images to the Gallery, you will not be able to add more than 8 columns.<\/p>\n\n\n\n<p>Your images will automatically arrange themselves to look good no matter how many columns you select. Try changing the setting and see what you like best. <\/p>\n\n\n\n<p>To change the setting you can either manually enter the number of columns you want or visually change the number by using the slider to drag the number up and down.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Crop images<\/h4>\n\n\n\n<p>You can select whether or not you&#8217;d like all of your images to be cropped in your Gallery block. <\/p>\n\n\n\n<p>This option is useful if you have images of varying sizes and shapes. Cropping them will make the images in each row of the gallery the same size. You can toggle this option on and off to see which way you prefer.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Link to<\/h4>\n\n\n\n<p>You have 3 options for linking the images in your gallery: Attachment Page, Media File, and None. This determines what happens when your visitors click on the images in your gallery. You can also add custom links for each image from the block toolbar of the selected image.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Attachment page<\/strong>: Selecting this option will link the image to its WordPress media <a href=\"https:\/\/wordpress.org\/documentation\/article\/inserting-images-into-posts-and-pages\/#step-4-attachment-details\">attachment<\/a> page. This is an informational page about your image, which includes the image, the caption, the image description, and a comment field.<\/li>\n\n\n\n<li><strong>Media file<\/strong>: Selecting this option will link the image to the image file in the original size in a new browser window.<\/li>\n\n\n\n<li><strong>None<\/strong>: Selecting this option will not link the image to anything.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Image sizes<\/h4>\n\n\n\n<p>The&nbsp;<em>Image Size<\/em>&nbsp;setting allows you to set all the images to the size you choose.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Thumbnail:<\/strong>&nbsp;Displays a small thumbnail-sized version of your image on the page\/post. Note, by default the Thumbnail size is a square, so some cropping of your original image may occur.<\/li>\n\n\n\n<li><strong>Medium:<\/strong>&nbsp;Displays a medium-sized version of your image on the page\/post. This is a good size to use with Left\/Right alignments, as it leaves sufficient space for legible text to either side.<\/li>\n\n\n\n<li><strong>Large<\/strong>: Displays a large-sized version of your image on the page\/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space.<\/li>\n\n\n\n<li><strong>Full Size:<\/strong>&nbsp;Displays a full-sized version of your image on the page\/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space. If your original image is larger than this column width, the full size of the image may not be displayed.<\/li>\n<\/ul>\n\n\n\n<p><em>Note: <em>For these images sizes to work, your theme needs to support them.<\/em><\/em><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Style Settings <\/h4>\n\n\n\n<p>You can access the Style settings for the Gallery and Image block by clicking on the Styles tab. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"303\" height=\"447\" src=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/2024-01-16_15-33.png\" alt=\"The styles tab on the gallery block's settings panel\" class=\"wp-image-16359446\" style=\"width:303px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/2024-01-16_15-33.png 303w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/2024-01-16_15-33-203x300.png 203w\" sizes=\"auto, (max-width: 303px) 100vw, 303px\" \/><figcaption class=\"wp-element-caption\">Accessing style settings for a block<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Color<\/h4>\n\n\n\n<p>The Gallery block<strong> <\/strong>provides color settings options to change the text, background, and link colors for the block<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#e5f5fa\">For details, refer to this support article: <a href=\"https:\/\/wordpress.org\/documentation\/article\/colors-settings-overview\/\">Color settings overview<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Dimensions<\/h4>\n\n\n\n<p>The Gallery block<strong> <\/strong>provides dimension settings options to add padding and margin.<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#e5f5fa\">For details refer to this support article: <a href=\"https:\/\/wordpress.org\/documentation\/article\/dimension-controls-overview\/\">Dimension settings overview<\/a><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/wordpress.org\/documentation\/files\/2019\/03\/gallery-dimensions.mp4\"><\/video><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Advanced settings<\/h4>\n\n\n\n<figure class=\"wp-block-image alignright size-full is-resized\"><a href=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/2024-01-16_15-34.png\"><img loading=\"lazy\" decoding=\"async\" width=\"298\" height=\"440\" src=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/2024-01-16_15-34.png\" alt=\"The advanced section on the gallery block's settings panel\" class=\"wp-image-16359447\" style=\"width:229px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/2024-01-16_15-34.png 298w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/2024-01-16_15-34-203x300.png 203w\" sizes=\"auto, (max-width: 298px) 100vw, 298px\" \/><\/a><figcaption class=\"wp-element-caption\">The \u201cAdvanced\u201d tab lets you add HTML anchor and CSS class(es) to your block.<\/figcaption><\/figure>\n\n\n\n<p>Block Name field lets you add a name for the gallery, which will appear on the editor&#8217;s list view. That will help you to navigate the list view and find the right block easier.<\/p>\n\n\n\n<p>HTML anchor allows you to do \u201c<a href=\"https:\/\/wordpress.org\/documentation\/article\/page-jumps\/\">page jumping<\/a>\u201d to the gallery. Page jumping, also sometimes referred to as anchor links, is where you click a link and instantly get moved somewhere further up or down a long page.<\/p>\n\n\n\n<p>To enable this, you put an HTML anchor in the Advanced settings in the Gallery block. You can then create a link to this anchor anywhere on the page and it scrolls to the Gallery block.<\/p>\n\n\n\n<p>The advanced tab also lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">For images in the gallery <\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Image settings<\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"305\" height=\"431\" src=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/image-3.png\" alt=\"The image settings panel for the image inside a gallery block\" class=\"wp-image-16359448\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/image-3.png 305w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/image-3-212x300.png 212w\" sizes=\"auto, (max-width: 305px) 100vw, 305px\" \/><\/figure>\n\n\n\n<p>For each image in the gallery, add alternative text to help with accessibility. ALT text can describe the purpose of the image. Leave the ALT text field empty if the image is purely decorative. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Resolution<\/h4>\n\n\n\n<p>The\u00a0<em>Resolution<\/em>\u00a0setting allows you to set the image size for individual images in the gallery. You can choose between Thumbnail, Medium, Large and Full size.<\/p>\n\n\n\n<p>There&#8217;s also the <em>Expand on click <\/em>toggle to enable the lightbox feature. This will let visitors to enlarge the image into its full size by clicking on the image.<\/p>\n\n\n\n<p><em>Note: <em>For these image sizes to work, your theme needs to support them.<\/em><\/em><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Styles <\/h4>\n\n\n\n<p>You can vary the styles of the images in the Gallery block by choosing the Styles settings. You have two different style options in the block sidebar, when you select an image.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"314\" height=\"580\" src=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/image-4.png\" alt=\"Styles for images within the gallery\" class=\"wp-image-16359449\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2024\/01\/image-4.png 314w, https:\/\/wordpress.org\/documentation\/files\/2024\/01\/image-4-162x300.png 162w\" sizes=\"auto, (max-width: 314px) 100vw, 314px\" \/><figcaption class=\"wp-element-caption\">Styles settings for images within the gallery<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Filter options<\/h4>\n\n\n\n<p>You can create a filter effect on images without actually changing the original image.<\/p>\n\n\n\n<p>The filter option allows you to add this filter color to your block content from the block toolbar.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/filters-settings-overview\/\">Read more about the filter options<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Border<\/h4>\n\n\n\n<p>The Gallery block provides border settings options to add border color, width, and radius.<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#e5f5fa\">For details refer to this support article: <a href=\"https:\/\/wordpress.org\/documentation\/article\/border-settings-overview\/\">Border settings overview<\/a><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/08\/Screen-Shot-2022-08-18-at-1.51.12-PM-1.png\" alt=\"The border control on the settings panel\" class=\"wp-image-15929710\" style=\"width:375px;height:176px\" \/><figcaption class=\"wp-element-caption\">Border settings for the individual images in the gallery<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Advanced settings<\/h4>\n\n\n\n<figure class=\"wp-block-image alignright size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/08\/Screen-Shot-2022-08-21-at-10.18.40-AM-1.png\" alt=\"The advanced settings for the image block\" class=\"wp-image-15936206\" style=\"width:207px;height:362px\" \/><figcaption class=\"wp-element-caption\">Advanced settings for the Gallery block<\/figcaption><\/figure>\n\n\n\n<p>The advanced settings for each image have a Title attribute, HTML anchor, and CSS class fields.<\/p>\n\n\n\n<p>The Title attribute field is designed to describe the&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3.org\/TR\/html52\/dom.html#the-title-attribute\" target=\"_blank\">role of the image on your page<\/a>. Many devices and browsers don\u2019t display this text.<\/p>\n\n\n\n<p>HTML anchor allows you to do \u201c<a href=\"https:\/\/wordpress.org\/documentation\/article\/page-jumps\/\">page jumping<\/a>\u201d to that specific image. Page jumping, also sometimes referred to as anchor links, is where you click a link and instantly get moved somewhere further up or down a long page.<\/p>\n\n\n\n<p>To enable this, you put an HTML Anchor in your photo and create a link that jumps to the anchor.<\/p>\n\n\n\n<p>The advanced tab also lets you add a CSS class to your block, allowing you to write custom CSS and style the image as you choose. <\/p>\n\n\n\n<p><em>Note: Based on which style you choose for the image block in the <a href=\"#styles-settings\" data-type=\"internal\" data-id=\"#styles-settings\">Styles settings<\/a>, WordPress automatically adds a CSS class to the image block under Additional CSS class(es). You can add additional classes with spaces.<\/em><\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group changelog has-very-dark-gray-color has-very-light-gray-background-color has-text-color has-background is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading has-medium-font-size\" id=\"changelog\">Changelog <\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Updated 2024-01-16\n<ul class=\"wp-block-list\">\n<li>Updated screenshots and content for 6.3<\/li>\n\n\n\n<li>Fixed text formatting consistecy<\/li>\n\n\n\n<li>Added missing alt text to screenshots <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2023-03-29\n<ul class=\"wp-block-list\">\n<li>Added the option to clear duotone<\/li>\n\n\n\n<li>Added information about the style settings tab<\/li>\n\n\n\n<li>Added caption button for Gallery <\/li>\n\n\n\n<li>Updated screenshot and Videos for 6.2  <\/li>\n\n\n\n<li>Added Alt text  <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2022-12-12\n<ul class=\"wp-block-list\">\n<li>Added color settings<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2022-11-20\n<ul class=\"wp-block-list\">\n<li>Adjusted images for mobile view <\/li>\n\n\n\n<li>Added caption for images <\/li>\n\n\n\n<li>Removed redundant content <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2022-08-21<ul><li>Added 6.0 screenshots and videos.Updated block toolbar with Add button and replace the info with the updated process for adding images to the gallery.Reordered the info to separate for the block toolbar and block sidebar. Adding Dimensions to the block settings with video.Updating the blosk settings for images.<\/li><\/ul>\n<ul class=\"wp-block-list\">\n<li>Adding details for image customizations with content, screenshots and video.<\/li>\n\n\n\n<li>Added ALT tags for images.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2021-12-21\n<ul class=\"wp-block-list\">\n<li>Updated all screenshots for 5.9 with higher resolution.<\/li>\n\n\n\n<li>Added in a context related to the refactoring. <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2021-02-02\n<ul class=\"wp-block-list\">\n<li>Updated the 5.5 video with 5.6 gifs<\/li>\n\n\n\n<li>Updated all screenshots with 5.6<\/li>\n\n\n\n<li>Added details to Advanced block settings options<\/li>\n\n\n\n<li>Updated out-of-date contents<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2020-10-05\n<ul class=\"wp-block-list\">\n<li>Updated the video<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2020-09-14\n<ul class=\"wp-block-list\">\n<li>Updated 5.5 screenshots<\/li>\n\n\n\n<li>Updated Block toolbar new features<\/li>\n\n\n\n<li>Updated Block settings new features<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2020-06-18\n<ul class=\"wp-block-list\">\n<li>Added &#8216;Link back to blocks&#8217; to the top of the page<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2020-04-24\n<ul class=\"wp-block-list\">\n<li>Added Drag &amp; Drop multiple images to the Gallery block<\/li>\n\n\n\n<li>Added video to change the background color as group block<\/li>\n\n\n\n<li>Added updated UI displays for WordPress 5.4 <\/li>\n\n\n\n<li>Added &#8220;More Options&#8221; to the Block Toolbar section and updated the existing once to fit other block descriptions. <\/li>\n\n\n\n<li>Reorganized the post into 3 sections: How to add gallery and images, Block Toolbar and Block Settings. <\/li>\n\n\n\n<li>Converted all reusable blocks to regular blocks. <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Created 2019-03-07<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Go back to the list of Blocks The Gallery block allows you to easily add multiple photos and automatically arrange them in a gallery. You can control the number of columns and the size of the images in the gallery. The Gallery block can be added to a page by clicking on the\u00a0Block Inserter\u00a0(+) icon [&hellip;]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[80,84],"class_list":["post-11284896","helphub_article","type-helphub_article","status-publish","hentry","category-customization","category-media-blocks"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11284896","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=11284896"}],"version-history":[{"count":19,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11284896\/revisions"}],"predecessor-version":[{"id":16360316,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11284896\/revisions\/16360316"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=11284896"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=11284896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}