How to customise the thumbnails of the WordPress Gallery

Product:

WonderPlugin Gallery

Tutorial:

This tutorial will show you how to customise the thumbnails of a WordPress gallery created with the plugin WonderPlugin Gallery.

1. Change the size of thumbnails

In the plugin, step 3 Options tab, Skin Options, change the value of the option "Thumbnail width / height". You can also specify a different size for medium and small size screen devices.

2. Change the height of the thumbnail title

In the plugin, step 3 Options tab, Advanced Options, enter the following text to the Advanced Options box:

data-thumbtitleheight=60

The above code will change the height of the thumbnail title to 60px.

3. Add multiple lines text to the thumbnail and customise the style

In the plugin, step 1, when adding an image or a video, you can directly enter HTML code to the Title input box to create multiple lines, you can also use CSS code to specify the style of the text.

For example, in the following gallery example, the text of the first image is as following:

<span style="font-size:1.4em;line-height:2em;font-weight:bold;">Kitten</span><br><span>Free image from <a href="https://unsplash.com/" target="_blank">Unsplash</a></span>

The above code creates two lines of text. It also creates a link by directly using the <a> tag.

Here is the gallery example: