Hi,
I would like to prevent the “Recent posts” element from cropping the images, making sure that they are seen in their entirety.
I have already tried to insert in the functions.php of the child theme the code suggested in other topics but I have not solved.
How could I resolve the issue?
Hello @scenaryo,
Thanks for writing in!
The featured images displayed in recent posts element were used as a background image set to cover the featured image area. To display the full image, 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 !important;
}
If this do not work for you, please provide the url of the page where we can find the featured images so we can double check it.
Please let us know how it goes.
Thanks very much for the reply.
Unfortunately, that’s not what I want to get.
I want the image to be seen in its entirety, filling all the spaces.
The website address is https://www.celanienoteca.it (towards the end of the page there is the “Recent post slider” element).
In practice, now it is like this:
Instead this is what I would like:
Thanx!
Hello @scenaryo,
The recent post shortcode gets the entry-cropped version of the featured image which is the cropped version of the original image. To override that, please install and activate the child theme and login through FTP then edit the functions.php then add this code:
// Recent Posts
// =============================================================================
function x_shortcode_recent_posts_v2( $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_filter('wp_head', 'x_recent_posts_image');
function x_recent_posts_image() {
remove_shortcode( 'x_recent_posts' );
remove_shortcode( 'recent_posts' );
add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2' );
add_shortcode( 'recent_posts', 'x_shortcode_recent_posts_v2' );
}
Then add this code in the Global CSS:
.x-recent-posts .x-recent-posts-img {
background-size: contain !important;
padding-bottom: 100%;
}
Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.
Hope this helps.
Thanx Jade,
I had already read this thing before and tried to make the change but, as you can see, I still don’t get the desired result
Hey @scenaryo,
The images you’re using are actually more in height than width that’s why you’re seeing spaces on the sides of the image, to fix this you can try adding the following code as well:
.home .x-recent-posts .x-recent-posts-img {
min-height: 340px;
}
Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!
Thanx Nabeel,
it works perfectly!
This forum is one of the best place on the net!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.