Show Archive Page Featured Images on Left of Post Extract

This post may contain referral links which may earn a commission for this site

An earlier post covered how to show blog module featured images to the left of the post text. Here's the equivalent CSS for doing the same thing on the standard category / archive / search pages:

/* Place category / archive / search images on left of text */
/* src: https://divibooster.com/show-archive-page-featured-images-on-left-of-post-extract/ */
@media only screen and (min-width: 981px) {

	body.archive .et_pb_post img,
	body.search .et_pb_post img {
		height: 180px !important;
		width: 335px;
		float: left;
		left: 0;
		margin-right: 25px;
	}

	body.archive .et_pb_post,
	body.search .et_pb_post { 
	    clear: both; 
	    min-height: 180px 
	}

	/* Move text over when there is no thumbnail */
	body.archive .et_pb_post:not(.has-post-thumbnail) {
	    margin-left: 360px;
	}

}

The final block of CSS that starts "/* Move text over…" re-positions the text even if there isn't an image available, so that the text lines up the same for every item. You may wish to delete this if you'd like to keep extracts with no image as full width.

Hundreds of new features for Divi
in one easy-to-use plugin

2 Comments

  1. Hey, Dan. This works great, but is there a way to maintain the proper aspect ratio on the thumbnails of the featured images? I've made some adjustments to the height to accommodate a tall image on a new post, and now it's (obviously) stretching thumbnails for other posts on the page. ???

    Reply
    • Hey Bill! You can use the object-fit CSS property for this, e.g.

      body.archive .et_pb_post img,
      body.search .et_pb_post img {
          object-fit: cover !important;
      }
      

      The width / height you have specified defines a "bounding box" area for the image and normally the image is stretched / shrunk to fit this area exactly (equivalent to "object-fit: fill"). A value of "cover" instead preserves the aspect ratio of the image and generally results in the image being resized and cropped in one of its dimensions so that the result covers the bounding box without any distortion. Another value you could use is "contain" which ensures that the aspect ratio is maintained and the image shrunk to fully fit within the bounding box (which means the image may be smaller in one of its dimensions that the bounding box).

      I hope that makes sense!

      Reply

Leave a Reply to dan Cancel reply

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