I cant get recent posts to style correctly

seanlincoln · June 9, 2019, 3:15pm

Hi,
I’m trying to add styling to the recent posts shortcode, but there are a few things I still can’t get to work.
what I want to achieve.

I’m using the shortcode: [recent_posts count=“5” orientation=“vertical” style=“width: 306px;”].

Remove Border, increase margin at bottom of posts, increase width. (these I think are all done)
Remove Image when hovering. (this I think is also done)
have the opacity of 0.9 when hovering… (this I can’t get to work and instead it shows opacity of the Site Links colour, selected by the theme options… instead I want the opacity to be 0.9 of the image itself just for user experience to show it been clicked.
Show the entire title in the content of the recent posts. (this I think is done now)
I’m not sure if this is possible, but when the feature image is being scaled, it’s cutting the edge of the image so the whole image doesn’t get shown.
remove the “permalinks: title” when hovering over the recent post, I have tried using JS to do this but it hasn’t worked.

This is the code im currently using in custom CSS section:

  /* Recent Posts Styling */
	/* Removes all padding (border), 
       increases width to 305px,
       creates margin between each recent post.*/
  .x-recent-posts a {
    padding: 0;
    margin-bottom: 30px;
    width: 305px;
  }
	/* Removes date from the post content */
  .x-recent-posts .x-recent-posts-date {
      display: none !important;
  }
  /* removes whitespace to show full title */
  .x-recent-posts .h-recent-posts{
  white-space:normal;
  }
  /* Removes the link icon when hovering */
  .x-recent-posts .x-recent-posts-img:before {
    display: none;
  }
  /* Recent Posts Styling */

This is the code im using in the JS Section:
jQuery('.x-recent-post5 with-image a').removeAttr('title');

URL: https://www.fm-society.com

Any help would be awesome!

rad · June 9, 2019, 3:43pm

Hi Sean,

Thanks for reaching out.

In that case, please change your CSS to this

 /* Recent Posts Styling */
	/* Removes all padding (border), 
       increases width to 305px,
       creates margin between each recent post.*/
  .x-recent-posts a {
    padding: 0;
    margin-bottom: 30px;
    width: 305px;
  }
	/* Removes date from the post content */
  .x-recent-posts .x-recent-posts-date {
      display: none !important;
  }
  /* removes whitespace to show full title */
  .x-recent-posts .h-recent-posts{
  white-space:normal;
  }
  /* Removes the link icon when hovering */
  .x-recent-posts .x-recent-posts-img:before {
    display: none;
  }
.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img:after {
    opacity: 0.90;
}
.x-recent-posts .x-recent-posts-img {
    padding-bottom: 55.45%;
    background: center center/contain no-repeat;
}
  /* Recent Posts Styling */

And change your javascript to this

jQuery('.x-recent-posts a').removeAttr('title');

Hope this helps.

seanlincoln · June 9, 2019, 3:52pm

Thanks for your reply,
The JS is working perfectly thanks.

The other two outstanding issues with the opacity and image scaling don’t seem to have worked.

rad · June 9, 2019, 4:08pm

Hi Sean,

Those should be fixed by these which are added to above CSS,

.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img:after {
    opacity: 0.90;
}
.x-recent-posts .x-recent-posts-img {
    padding-bottom: 55.45%;
    background: center center/contain no-repeat;
}

Perhaps what you need is this

.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img:after {
    opacity: 0.10;
}
.x-recent-posts .x-recent-posts-img {
    padding-bottom: 55.45%;
    background: center center/contain no-repeat;
}

So 10% for the color but 90% for the image? As for scaling, would you mind providing a screenshot? It fits correctly on my end since it has aspect ratio locked.

Thanks!

seanlincoln · June 9, 2019, 4:43pm

hi,
yes the opacity is now working well, although is it possible to change colour is uses the opacity with?, its currently using the site link color i selected which is red, which makes the image a slight pink colour when hovering, i think an opacity of 0.10 of black would be better.

regarding the image scaling, i have created a new image, with the same size but has a 12px border around.

This is the original image on the website.

this is the scaled image on the recent post, as you can see the border is being cropped.

rad · June 9, 2019, 5:12pm

Hi Sean,

Sure, please change that CSS to this

.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img:after {
    opacity: 0.10;
    background: #000;
}
.x-recent-posts .x-recent-posts-img {
padding-bottom: 53.45%;
background: center center/contain no-repeat;
}

Then please add this additional javascript for cropping fix


jQuery ( function($) {
$('.x-recent-posts-img').each( function() {

$(this).attr('style', $(this).attr('style').replace(/-[0-9].+x[0-9].+\./, '.') );

} );
} );

Hope this helps.

seanlincoln · June 9, 2019, 5:54pm

This is all now working perfectly…
i really appreciate the help!!

Thanks
Sean

rad · June 9, 2019, 6:21pm

You’re most welcome!

seanlincoln · June 9, 2019, 10:08pm

as mentioned this is now working great,
however is the featured being cropped when scaling in recent posts not a bug?,
surely the image should scale without cropping by default?

Sean

ruenel · June 9, 2019, 10:25pm

Hello Sean,

The featured image has been used as a background image of the space provided for the image. It is set to cover that area which is why, it will zoom in or zoom out depending on the width of the featured image area. To avoid this, please update the custom css:

.x-recent-posts .x-recent-posts-img {
    padding-bottom: 55.45%;
    background: center center/contain no-repeat;
    background-size: contain !important;
}

Background size should be set to contain to force the whole image to display.

Hope this helps.

seanlincoln · June 9, 2019, 11:34pm

Thanks for your reply,
I have tested your code, however the same issue happens with the left and right edge of the image being cropped.

I’ll just have to stick with the solution Rad was able to provide, i just thought it would of been nice to do it without need a js hack, as it flickers for a second when the page loads.

Sean

ruenel · June 10, 2019, 12:41am

You are most welcome!
If you need anything else we can help you with, don’t hesitate to open another thread.

system · June 20, 2019, 12:41am

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.