Hi,
I just made my first Pin image that I also set as my featured image. The problem is the following: my image is cropped. It appears beautifully on my blog page, but not on my homepage where my post displays. How can I fix that? Thanks!
Hello There,
Thanks for writing in!
Please be advised that by default, the images in the recent posts elements which can be found in your homepage is using the entry cropped size. If you want it to display the fullwidth image, it will require some modification which will override the defaults.
Because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.
After the child theme is set up, please add the following code in your child theme’s functions.php file
// Add Excerpts to the recent post element
// =============================================================================
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 );
$output = "<div {$id} class=\"{$class}{$orientation}\" {$style} {$data} data-fade=\"{$fade}\" >";
$q = new WP_Query( array(
'orderby' => 'date',
'post_type' => "{$type}",
'posts_per_page' => "{$count}",
'offset' => "{$offset}",
"{$category_type}" => "{$category}",
'ignore_sticky_posts' => $no_sticky
) );
if ( $q->have_posts() ) : while ( $q->have_posts() ) : $q->the_post();
if ( $no_image == 'true' ) {
$image_output = '';
$image_output_class = 'no-image';
} else {
$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
$bg_image = ( $image[0] != '' ) ? ' style="background-size: contain; background-image: url(' . $image[0] . ');"' : '';
$image_output = '<div class="x-recent-posts-img"' . $bg_image . '></div>';
$image_output_class = 'with-image';
}
// $excerpt = ( $show_excerpt ) ? '<div class="x-recent-posts-excerpt"><p>' . preg_replace('/<a.*?more-link.*?<\/a>/', '', cs_get_raw_excerpt() ) . '</p></div>' : '';
$output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( get_the_ID() ) . '" title="' . esc_attr( sprintf( csi18n('shortcodes.recent-posts-permalink'), the_title_attribute( 'echo=0' ) ) ) . '">'
. '<article id="post-' . get_the_ID() . '" class="' . implode( ' ', get_post_class() ) . '">'
. '<div class="entry-wrap">'
. $image_output
. '<div class="x-recent-posts-content">'
. '<h3 class="h-recent-posts">' . get_the_title() . '</h3>'
. '<span class="x-recent-posts-date">' . get_the_date() . '</span>'
// . $excerpt
. '</div>'
. '</div>'
. '</article>'
. '</a>';
endwhile; endif; wp_reset_postdata();
$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 loved to know if this has work for you. Thank you.
Hello,
I’ve tried entering the code in the child theme’s function like you said but it didn’t work. Is there any other way to make that work?
Hi Stephanie,
Sorry but the Classic Recent Posts element is not designed for that type of layout. You need to utilize the The Grid or Essential Grid extension if you want a recent post with Masonry Layout (like on your blog page). You can see examples below from each extension.
Thank you for understanding,
I downloaded “The Grid” plugin, but it only changed how my image displays on my Blog Page. The problem is how my featured blog post images display on my Homepage, not the blog page.
Hi @StephanieBelec,
I’m not sure what you mean, The Grid has no effect on the blog page unless you customize it through templates.
As for home page featured images, please try @RueNel code. It will only work if you’ll add your recent posts as shortcode within text element and not as recent post element. Like [x_recent_posts count="5"], please do that first.
Thanks!
I’m not good at all with coding, I have understood how to download the child’s theme and open its function file, but when I’ve tried the code, it didn’t change anything. I’m probably doing it wrong.
And I don’t understand what you mean by: it will only work if I add my recent post as shortcode within text element and not as recent post element…
Hello There,
I have inspected your homepage and I can see that you already have implemented what I have suggested in my first reply. One last thing to do so that the recent post element will display the full image is this. Please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)
.x-recent-posts .x-recent-posts-img {
background-size: contain;
}
And the final result would be like this:
We would loved to know if this has work for you. Thank you.
That’s an easy code I can do 
but is it normal that the second image is full size, but not using all the space ?
And the first image still not displays full width/height even with the code 
It only shows half of the image
Hi There,
Please consider that images in recent posts are added as a background image and take the size of the container. The images that you have are not square so it is not possible to have a good view with the images that you used, you should add images that are more compatible with the square view.
Regards!
Will do. Thank you
You are most welcome.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.