How can I load a medium thumbnail size in the recent posts cornerstone module instead of the full size image. I had a previous function you gave me in my functions.php file that would do this in an older version of x but it doesn’t work with x-pro. Thanks!
Hi There,
Feel free to compare the previous code you have to the content from this file: recent-posts.php on this folder: \wp-content\themes\pro\cornerstone\includes\shortcodes. Look for the entry-cropped and update accordingly.
Hope this helps.
I have a client who is not too tech savvy so trying to make this as simple as possible for them… using the recent posts shortcode, the thumbnail image is the problem. Client wants the thumbnails to be large and more square, which I have done using the following css:
.x-recent-posts .x-recent-posts-img {
background-size: 100% 100% !important;
padding-bottom: 90%;
}
However, as you can see on this page for example:
http://gypsykitchenvibes.com/gkitchen/recipes/drinks/
The images are distorted because client doesn’t know how to resize. Any ideas how I can achieve the large square look without the distortion and without having the client to do much extra work? I thought maybe some new hard crop thumbnail size, but I’m not entirely sure how to implement it, plus I would hate to chop off any of the photos as client uses a lot of time and effort taking the photos.
Thank you
Thanks, I was able to change it to medium in the parent theme function and that works perfectly for me. How do I wrap the recent-posts.php code in my child theme’s functions.php file so it will override the parent theme function?
Hello There,
Thanks for updating in! To modify the recent post element and display medium size image, please add the following code in your child theme’s functions.php file
// Change image size in 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(), 'medium' );
$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';
}
// $excerpt = ( $show_excerpt ) ? '<div class="x-recent-posts-excerpt"><p>' . preg_replace('/<a.*?more-link.*?<\/a>/', '', cs_get_excerpt_for_social() ) . '</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' );
}
// =============================================================================
Hope this helps. Please let us know how it goes.
March 2021 Update: The above code example has been adjusted to account for a change to a function name.
Great, thanks!
Glad we could help.
Cheers!