Docs

[jsguzmanb]

Hi

I had an issue where I wanted the Recent Posts Image to appear full and not cropped.

This thread solved it by adding a function to the child´s functions.php

https://community.theme.co/forums/topic/recent-posts-cropped-images/

However, I have two instances of the Recent Posts shortcode in my site. One in my homepage, and one in my blog.

The homepage one is working perfectly, but the blog one no (Could it have to do that one is horizontal, and the other vertical?

Here is the site

http://butakavideomarketing.com/

Thank you very much!

[jsguzmanb]

This reply has been marked as private.

[Nabeel A]

Hi there,

Thanks for writing in! You can try adding the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

@media screen and (min-width: 767px) {
.blog .entry-featured, .archive .entry-featured {
    float: none !important;
    width: 100% !important;
    height: auto !important;
}
}

Let us know how this goes!

[jsguzmanb]

Hi!

Thanks for the quick answer!

The edit I´m looking for is in the Recent Posts Widget found in the blog, specifically the class x-recent-posts-img, but as I have two instances (one in Home, one in the Blog), I gave each one a class (.recent-home and .recent-blog) so I could style each one individually. My problem resides in the one in the blog (with class .recent-blog)

I have the following Custom CSS applied to that class

.recent-blog .x-recent-posts-img {
float: left;
width: 50%;
padding-bottom: 100px;
margin-right:10px;
background:top left cover no-repeat !important;
}

.recent-blog a {
background-color: #3A2E2C;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border:none;
}

.recent-blog .h-recent-posts {
text-overflow: inherit;
white-space: normal;
line-height: 20px;
}

But the thing the image looks cropped, and no style I give it shows me the full image starting in the top left corner. If you look in the Recent Posts section in the Home (titled “Todo lo que quieres saber del Video Marketing”), you see what I am looking for

Thanks again!

[Joao]

Hi There,

Upon comparing your home page with your blog page your images look exactly the same.

Would you mind clarifying the issue.

Thanks

Joao

[jsguzmanb]

Hi I am refering to the bar on the right (with the smaller icons).

Thanks!

[Nabeel A]

Hi again,

Can you please provide some screenshots so we have a better understanding of the issue?

Thanks!

[jsguzmanb]

Of Course

This is the right way (as seen in the home page)

And the wrong way is highlighted in red. You can see that the images are cropped

Thanks!

[Rue Nel]

Hello There,

Thank you for the clarifications and sending us the screenshots. By default, the recent post is using the “entry-fullwidth” as the size of the feature image. This is one of the reason why the image got cropped. To resolve your issue, please find this line in your code:

$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'entry-fullwidth' );

and replace it with this line:

$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );

You can also use this css code in the customizer:

.site .x-recent-posts .x-recent-posts-img {
    background-size: contain;
}

Hope this helps.

[Author]

Posts