Blocks

Blocks »Gallery Block

Please note this instructions refer to the Classic editor only. If you would like to insert a gallery to a page or a post using the Block Editor please click here.

Image galleries on WordPress.com are a great way to share your pictures with your friends, family, and your followers. An image gallery will display a set of small images attached to a particular post or page. Readers can click on any image to launch a full-size carousel that allows them to scroll through the entire gallery one image at a time. With the slideshow option, images will automatically move from one to the next after a few seconds.

Watch the video below for a quick overview of how it works, and read below for more examples and settings.

You have several choices for how a gallery will be displayed in your post: a thumbnail grid layout, a tiled mosaic-style layout, or in a slideshow. All sites default to the thumbnail grid style. You can also style each gallery individually.

Tiled layouts can display in one of three styles: rectangular tiles, square tiles, or circular tiles. Along with looking great, the rectangular and square tiled layouts also have hover-over captions to save space while making captions accessible. (Check out examples of all three layout options in this post.)

To switch to tiled layouts from the default, head over to Settings → Media in your blog’s WP-Admin Dashboard, scroll down to “Image Gallery Carousel,” and select the box next to “Display all your gallery pictures in a cool mosaic.” Note that choosing this option makes this layout the default for all your blog’s galleries, including those you’ve previously inserted.

When clicked, gallery images are displayed in a full-size carousel view, which you can customize from the Image Galleries Carousel section of the Media Settings.

Below is an example of an image gallery using the default thumbnail setting. If you click on any of the images you will be able to see what the carousel view looks like:

↑ Table of Contents ↑

  1. Open a post or page for editing. If it is a new post or page, make sure to add a title and save it at least once before trying to insert a gallery or slideshow.
  2. Click the Insert Content button and select the Add Media button.
    Add Media Button
  3. You’ll now see the images in your Media Library. You can add new images from the web with the Add via URL button, or you can add new images from your computer by clicking on Add New, navigating to the images on your hard drive, selecting them, and clicking “Open”:
    Screen Shot 2015-11-09 at 4.14.28 PM

    or by dragging and dropping them from your computer’s desktop into the Media Library window:
    Screen Shot 2015-11-09 at 4.34.11 PM (2)
  4. After the images have finished uploading, you can deselect any you don’t want to include in the gallery by clicking on them — click again to re-select:
    Screen Shot 2015-11-09 at 4.31.13 PM

    The numbers that appear on the images as you click indicate the order in which they’ll appear in the gallery.
  5. When you’ve selected all of the images you’d like, click Continue at the bottom right to proceed to the gallery settings.
  6. On the following screen you will see a preview of your gallery. You can change the layout with the Layout dropdown and see a live preview:
    Screen Shot 2015-11-09 at 4.51.38 PM
  7. You can select the Edit tab to remove images, drag them to a different place to change the order, or add a captions. You can also edit the following options, which will be available based on the currently chosen layout:
    • Link to: Does not apply to slideshows.
      • Attachment Page: A specialized page in your blog that shows the image in your selected theme.
      • Media File: A direct link to the full-size uploaded image.
    • Columns: The number of columns of thumbnails to display. This may be affected by your choice of theme, so be sure and test a bit with your current theme. This option does not apply to slideshows.
    • Random Order: Check this box to randomize the order of images in your gallery or slideshow. That means the order will change randomly every time the page is loaded.
    • Layout: Specify the type of gallery here. The options are a default gallery of thumbnail images, a gallery with rectangular tiles, a gallery with square tiles, a gallery with circular tiles, or a slideshow.
  8. When you’ve finished editing your gallery, click Insert.

Note: If you select Individual Images, this will not create a gallery, but instead it will add the images to the page as though you had added them one by one. It isn’t possible to convert from Individual Images into a gallery style.


↑ Table of Contents ↑

  1. Open a post or page with a gallery for editing and make sure that you are in the Visual editing mode.
  2. Click on the gallery and then click the Edit icon that appears.
    Screen Shot 2015-11-09 at 4.52.28 PM
  3. Adjust the Gallery Settings if necessary.
  4. Make sure to click the Update button to save your settings.

↑ Table of Contents ↑

The gallery shortcode can be used in its simplest form like this:

[gallery]

This shortcode will display the images attached to the post or page.

Note that after you’ve published or updated a post or page including the gallery shortcode, the Visual editor will no longer display the shortcode itself. To edit an already-entered shortcode, simply switch to the Text editor, where you will be able to see and edit the code.

To insert a tiled gallery, add the relevant shortcode addition after “gallery”:

type=”rectangular”
type=”square”
type=”circle”

To insert a slideshow gallery type, use this shortcode:

[gallery type=”slideshow”]

You can also pass other settings with the gallery shortcode.

OptionDescriptionChoicesDefault Setting
columnsNumber of columns used to display the imagesAn integer greater than 0 (not valid for the default rectangular grid)3
typeType of image arrangement to display“thumbnail”,”rectangular”, “square”, “circle” or “slideshow”.rectangular
orderbyHow to order the imagesID, menu_order, rand, title + ASC, DESCmenu_order ASC, ID ASC
sizeSize of the images to displaythumbnail, medium, large, full (only valid for the default thumbnail grid)thumbnail
autostartStart the slideshow on page load“true” or “false”true
idThe gallery will display images which are attached to that post.Any post or page ID that has images attached to itDefault is to show the gallery post
includeThe gallery will include specific imagescomma separated attachment IDs – include=”23,39,45″N/A
excludeThe gallery will exclude specific images. If this option is being used, other attached images won’t be added to the gallery.comma separated attachment IDs – exclude=”24,30,43″N/A

Note: To get an attachment ID for an image, go to your Media Library and click on the title of the image you want. You can find the ID in the URL (the number after post=).

link-image-id

You can follow almost the same steps for getting a post ID. Instead of going to your Media Library though, go to your Posts screen and then click on the title of the post you need.

Examples:
[gallery id=”402″]
[gallery columns=”5″ orderby=”title DESC, ID ASC”]


↑ Table of Contents ↑

You can also manage gallery styles individually. To do so, go to Settings → Media. Under the section Image Gallery Carousel, uncheck the box Display all your gallery pictures in a cool mosaic and click Save, to keep the default thumbnail grid layout across your site.

media-settings

When you want to include a gallery in a post, insert it as usual and then simply switch over to the Text tab in the post editor and add the code for the gallery style you want to use (see Gallery Shortcodes).

If you do not add a style, it will default to the thumbnail grid layout.


↑ Table of Contents ↑

This is how each type of gallery style looks like. Styling each gallery individually will work only when the checkbox that says “Display all your gallery pictures in a cool mosaic” is unchecked in Settings → Media. For more information on how to style each gallery individually, please see Manage Gallery Styles Individually.

[gallery type=”rectangular”]

[gallery type=”square”]

note: If the gallery image count is a multiple of 3, they will display in the same, small size. If not, one image will be made larger to balance the layout, avoiding extraneous squares on their own line.

[gallery type=”circle”]

note: If the gallery image count is a multiple of 3, they will display in the same, small size. If not, one image will be made larger to balance the layout, avoiding extraneous circles on their own line.

default view

[gallery type=”slideshow”]


↑ Table of Contents ↑

Troubleshooting

If you have trouble creating a gallery in your post, try entering the title and saving it as a draft before you upload any images.


↑ Table of Contents ↑

Learn more

Photoblogging Made Easy: Exploring Gallery Types (The WordPress.com Blog, March 12, 2014)

Pages: 1 2 View All

Not quite what you're looking for?

Get Help