Image Alignment

If you are including images in your post listings, you may need to add some additional styling. Display Posts does not load any styles on your site currently, so it is up to your theme (or you) to provide the styling.

Here are some style options you can use:

• Left aligned image
• Top aligned image

Default Styling

Here’s the default styling in TwentyNineteen, the default WordPress theme:

Shortcode

[display-posts include_excerpt="true" excerpt_length="20" image_size="thumbnail" wrapper="div"]

Result

---

Left aligned image

The following CSS will let you create a post listing with left-aligned images.

Note that we’ve updated the shortcode below to include a wrapper_class of “image-left”. This allows us to target only this shortcode with our CSS, rather than affecting every instance of the shortcode throughout the site.

Shortcode

[display-posts include_excerpt="true" excerpt_length="20" image_size="thumbnail" wrapper="div" wrapper_class="display-posts-listing image-left"]

Result

This code snippet goes in Appearance > Customize > Additional CSS or your theme’s stylesheet.

.display-posts-listing.image-left .listing-item {
	overflow: hidden; 
	margin-bottom: 32px;
	width: 100%;
}

.display-posts-listing.image-left .image {
	float: left;
	margin: 0 16px 0 0;
}

.display-posts-listing.image-left .title {
	display: block;
}

.display-posts-listing.image-left .excerpt-dash { 
	display: none; 
}

---

Top aligned image

In the following example, we’re going to feature a large image at the top, followed by the post title on its own line, followed by the excerpt.

We limited the CSS styles to post listings that have a wrapper class of “image-top” so it doesn’t affect other instances of the shortcode.

Shortcode

[display-posts include_excerpt="true" excerpt_length="20" image_size="large" wrapper="div" wrapper_class="display-posts-listing image-top"]

Result

This code snippet goes in Appearance > Customize > Additional CSS or your theme’s stylesheet.

.display-posts-listing.image-top .listing-item {
	margin-bottom: 32px;
}

.display-posts-listing.image-top .listing-item .title {
	display: block;
}

.display-posts-listing.image-top .listing-item .excerpt-dash {
	display: none;
}