Post Thumbnails

This page is part of the plugin documentation for the Related Posts by Taxonomy plugin.

If the format “thumbnails” is used the plugin searches for related posts that have a post thumbnail. If you want it to search for all related post regardless if a post has a post thumbnail see this example.

By default the widget or shortcode will display post thumbnails in columns of three. Change the columns with the columns attribute.

The html markup (display) for the related thumbnail gallery is the same as a WordPress gallery. See HTML markup.

Shortcode usage

Use the format, image_size and columns attributes to display related post thumbnails. Example to show 6 related medium post thumbnails in two columns.

[related_posts_by_tax posts_per_page="6" format="thumbnails" image_size="medium" columns="2"]

HTML markup

The default HTML markup used for the post thumbnail gallery is the same as a WordPress gallery. Your theme however can make changes to the default markup. So the HTML markup can differ depending what theme you’re using.

With this plugin’s gallery filters you can:

  • change the HTML tags that are used for the related posts thumbnail gallery
  • change the HTML in captions
  • change the HTML for the image link

To completely use your own HTML markup create your own template for it. This means you have to style the thumbnails yourself (if the markup is different than a WordPress gallery). See this example.

Styling

The styling for the related post thumbnail gallery is done by your theme’s stylesheet and not by this plugin.

The only styles this plugin provides is the same default inline styles as used by WordPress galleries. These inline styles can be removed with a WordPress filter, but it means you have to create the styles for galleries yourself in your theme’s stylesheet.

Change the gallery style
To change the styling it’s recommended you create a child theme and put the new styles in the child theme’s stylesheet. Or use a custom css plugin and make the changes there.

Css tutorial

Css Selectors

Use these Css selectors to change the styles for the related post thumbnail galleries in your (child) theme’s stylesheet.

Note: Selectors can be changed by your theme. See markup

/* gallery container */
.related-gallery {}

/* gallery item container */
.related-gallery .gallery-item {}

/* image container */
.related-gallery .gallery-icon {} 
.related-gallery .portrait {}
.related-gallery .landscape {}

/* image */
.related-gallery .gallery-item img {}

/* image caption (post title) */
.related-gallery .gallery-caption {}