Hi there,
On my home page: https://busybuthealthy.com/
I have 2 main image pulling through recent posts. Because they are so big, I want to make sure that whole feature image displays even though I know that will cause there to be padding on the left and right. To do this, I’ve set the background size to ‘contain’. However, the second post ‘7 DIY Starbucks Protein Boxes’ seems to still be cropping somehow.
Can you please let me know what I’m missing? Thank you
Hello Adwin,
Thanks for writing in!
Please be informed that by default, the featured images will be automatically cropped if the full image is wider than the maximum site width in X > Theme Options > layout & Design > Site Max Width.
Do you want to display the full image in the recent posts element instead? If that is the case, please add the following code in your child theme’s functions.php file
// Custom Recent Post shortcode
// =============================================================================
function x_shortcode_recent_posts_v2code( $atts ) {
extract( shortcode_atts( array(
'id' => '',
'class' => '',
'style' => '',
'type' => 'post',
'count' => '',
'category' => '',
'offset' => '',
'orientation' => '',
// 'show_excerpt' => 'true',
'no_sticky' => '',
'no_image' => '',
'fade' => ''
), $atts, 'x_recent_posts' ) );
$allowed_post_types = apply_filters( 'cs_recent_posts_post_types', array( 'post' => 'post' ) );
$type = ( isset( $allowed_post_types[$type] ) ) ? $allowed_post_types[$type] : 'post';
$id = ( $id != '' ) ? 'id="' . esc_attr( $id ) . '"' : '';
$class = ( $class != '' ) ? 'x-recent-posts cf ' . esc_attr( $class ) : 'x-recent-posts cf';
$style = ( $style != '' ) ? 'style="' . $style . '"' : '';
$count = ( $count != '' ) ? $count : 3;
$category = ( $category != '' ) ? $category : '';
$category_type = ( $type == 'post' ) ? 'category_name' : 'portfolio-category';
$offset = ( $offset != '' ) ? $offset : 0;
$orientation = ( $orientation != '' ) ? ' ' . $orientation : ' horizontal';
// $show_excerpt = ( $show_excerpt == 'true' );
$no_sticky = ( $no_sticky == 'true' );
$no_image = ( $no_image == 'true' ) ? $no_image : '';
$fade = ( $fade == 'true' ) ? $fade : 'false';
$js_params = array(
'fade' => ( $fade == 'true' )
);
$data = cs_generate_data_attributes( 'recent_posts', $js_params );
$posts = get_posts( array(
'orderby' => 'date',
'post_type' => "{$type}",
'posts_per_page' => "{$count}",
'offset' => "{$offset}",
"{$category_type}" => "{$category}",
'ignore_sticky_posts' => $no_sticky
) );
$output = "<div {$id} class=\"{$class}{$orientation}\" {$style} {$data} data-fade=\"{$fade}\" >";
foreach ($posts as $post) {
if ( $no_image == 'true' ) {
$image_output = '';
$image_output_class = 'no-image';
} else {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
$bg_image = ( $image[0] != '' ) ? ' style="background-image: url(' . $image[0] . ');"' : '';
$image_output = '<div class="x-recent-posts-img"' . $bg_image . '></div>';
$image_output_class = 'with-image';
}
$output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( $post->ID ) . '" title="' . esc_attr( sprintf( csi18n('shortcodes.recent-posts-permalink'), the_title_attribute( array( 'echo' => false, 'post' => $post->ID ) ) ) ) . '">'
. '<article id="post-' . $post->ID . '" class="' . implode( ' ', get_post_class('', $post->ID) ) . '">'
. '<div class="entry-wrap">'
. $image_output
. '<div class="x-recent-posts-content">'
. '<h3 class="h-recent-posts">' . get_the_title( $post->ID ) . '</h3>'
. '<span class="x-recent-posts-date">' . get_the_date( '', $post->ID ) . '</span>'
. '</div>'
. '</div>'
. '</article>'
. '</a>';
}
$output .= '</div>';
return $output;
}
add_action('wp_head', 'change_recent_posts_to_v2');
function change_recent_posts_to_v2() {
remove_shortcode( 'x_recent_posts' );
add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2code' );
}
// =============================================================================
We would love to know if this has worked for you. Thank you.
Hello that didn’t seem to do anything
we would like the image to show full size top appear on the homepage feed, right now this post it’s not doing it, on the it’s being cropped into a square
Thanks!
Hi Adwin,
Where did you put your background size ‘contain’ CSS? I am not seeing it on your page-source, you need that plus Ruenel’s php code to achieve what you need.
.x-recent-posts .x-recent-posts-img {
background-size:contain !important;
}
You can add custom CSS on Theme Options > CSS area.
If that did not work still, try resetting the feature image (remove/add).
Cheers!
I have this code entered:
.x-recent-posts.hometoppost .x-recent-posts-img {
background-size: contain !important;
}
As I have lots of recent posts on the site, but I only want the .hometoppost to be contained. Will this work with the code you sent previously?
Hey Adwin,
Yes, that will work.
Okay, it doesnt seem to be working though
Hello Adwin,
The css code works a shown in the image below:
The recent posts element still displaying the cropped version of the featured image. You will need both the PHP code and the css code to make sure that the recent posts element will display the full image.
If nothing is working on your end, please provide us access to your site so that we can fix it for you.
Hello Thanks for this, this seemed to work, but now the excerpt is gone 
I will add the login to the secure note now so you can take a peek
Thanks
Hello Adwin,
It turns out that you already have a custom recent posts element code in your child theme’s functions.php file. So that the excerpts will display, I went ahead and removed the code I gave and then used the existing recent posts element code. I only change the line 85:
from this:
$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'entry-cropped' );
to this:
$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
Please check your homepage now.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.