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.
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>