Featured Image: Side by side layout for “Display post as: Title + Featured image”
Xtreme has many nice Featured Image Layout options for posts when displayed as Excerpts or Full or on the Single post page.
Unfortunately, these do not apply to the Featured Image when displaying posts as “Title + Featured image”
Below is the way to make the Featured Image and the Post Title display side by side when the “Title + Featured image” is used.
You would most likely want to do the above when displaying a list of posts in the sidebar, in which case, you would be using a Weaver Show Posts Filter and Widget to do that.
- Create a filter that display posts as “Title + Featured Image”
- Select the options to hide the meta info lines and comment box
- Insert a “Weaver Show Posts” widget in your sidebar and select the above created filter to be used by the widget.
Then add the CSS rules below in the Theme Global Custom CSS Rule box, replacing filtername by the name of the show posts filter.
You can adjust the proportion of image versus text as well as the space between them by changing the % in the rules below, just make sure the total is 100%.
- First rule width % is for the image, and margin % for the space between image and text
- Second rule width % is for the Post title
- Third rule is to adjust the properties of the post title like its font size.
You can also revert the order between image and title by swapping float:righ/left, or changing the order values in the rules using the flex order property.
.atw-show-posts-filter-filtername article .wvrx-fi-link {float:left;width:24%;margin:0 3% 0 0;} .atw-show-posts-filter-filtername .entry-header {float:right;width:73%;} .atw-show-posts-filter-filtername .entry-header .post-title {font-size:0.6em;}
If you have deactivated the link on the featured image, use the rules below instead
.atw-show-posts-filter-filtername article > span {float:left;width:24%;margin:0 3% 0 0;} .atw-show-posts-filter-filtername .entry-header {float:right;width:73%;} .atw-show-posts-filter-filtername .entry-header .post-title {font-size:0.6em;}
If you want to center image and text vertically, you can use the rules below instead
.atw-show-posts-filter-filtername .post {display:flex;align-items:center} .atw-show-posts-filter-filtername .entry-header {display:flex;order:2;} .atw-show-posts-filter-filtername article .wvrx-fi-link {display:flex;flex:0 0 25%;order:1;margin:0 3% 0 0;} .atw-show-posts-filter-filtername .entry-header .post-title {font-size:.8em;}
If you have deactivated the featured image link use the rules below instead
.atw-show-posts-filter-filtername .post {display:flex;align-items:center;} .atw-show-posts-filter-filtername .entry-header {display:flex;order:2;} .atw-show-posts-filter-filtername article > span {display:flex;flex:0 0 25%;order:1;margin:0 3% 0 0;} .atw-show-posts-filter-filtername .entry-header .post-title {font-size:.8em;}