Creating galleries

How to create a gallery

When editing a post or a page, click the “Add Media” button.

Choose “Create Gallery” from the left.

Select the desired images. On the right side you can give them a title and/or a caption.

Click the “Create a new gallery” button.

Make sure the “Link To” is set to “Media File”. This will ensure that when clicking on a thumbnail in the gallery the big version of the image is shown.

Also choose the amount of columns and the size of the gallery images you desire.

Click the “Insert gallery” button.

<gallery ids="101,100,98">

Rounded gallery images

Once you’ve inserted the gallery you can add some classes to it.

In the editor, choose the “Text” mode.

Find the inserted gallery’s shortcode.

Gallery shortcode in editor

Add the “classes” attribute to it with the “rounded” class, to achieve a gallery with images that have rounded corners.

<gallery ids="101,100,98" classes="rounded">

Bordered gallery images

Adding the “bordered” class will add subtle borders around the images.

<gallery ids="101,100,98" classes="bordered">

Rounded & bordered gallery images

You can also combine the classes.

<gallery ids="101,100,98" classes="rounded bordered">

Circular gallery images

Adding the “circular” class will make the gallery images circular.

<gallery ids="101,100,98" classes="circular">

Gallery segment

To make the gallery stand out, you can place it inside the segment shortcode.

<segment><gallery ids="101,100,98" size="medium"></segment>

Inverted gallery segment

The segment itself can also take modifier classes, such as “inverted”, “padded” or “very padded”.

<segment inverted very padded><gallery ids="101,100,98" size="medium"></segment>

Adding a header

If you wish to describe your gallery a header can be added.

<segment primary padded>
  <header center aligned small display>
    My Gallery
    <subheader>WooCommerce dummy product images</subheader>
  </header>
  <divider hidden>
  <gallery ids="101,100,98,75,490,69" size="medium" link="file">
</segment>
View more gallery examples
When working with galleries/images, then it is recommended to keep the WordPress editor in “Text” mode, because otherwise unwanted line breaks and/or paragraphs tend to be added.

Leave a comment

Your email address will not be published. Required fields are marked *