Recent Posts Thumbnail Sizing

Support
#1

Hello!

I have a client who is not too tech savvy so trying to make this as simple as possible for them…

I’m using the recent posts shortcode, the thumbnail image is the problem.

The client wants the thumbnails to be square-shaped, 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 the client doesn’t know how to resize/crop images.

How can I achieve the large square look without the distortion and without having to manually resize/crop each image?

Thank you

#2

Hi There,

Thank you for writing in! Regretfully there is no way around this but you need to explain to your client how this works. They need to upload a square oriented image if they want to display it as perfect square.

Lets take this image as an example, there is no way we can fit this image on a square container without squeezing or cropping it.

Hope this shed some lights,
Cheers!

#3

I think there is a way around this:

  1. Create an image size with hard cropping with hight and width the same. Can set this in WP media settings or make or change custom image size: https://theme.co/apex/forum/t/change-theme-featured-images-and-thumbnail-sizes/2453

  2. Change recent posts shortcode to allow setting of the above cropped image size name: https://theme.co/apex/forum/t/recent-posts-shortcode-change-image-size-add-excerpt/1517

#4

I wanted to post my solution for anyone else who needs this feature…
I ended up getting the desired affect by adding this code to my child theme’s function.php:

   // 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' => 'false',
    'no_sticky'    => '',
    'no_image'     => '',
    'img_size'     => '',
    '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 : '';
  $img_size      = ( $img_size     != '' ) ? $img_size : 'entry-cropped';
  $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(), $img_size );
    $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 style="color:initial;">' . 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( __( 'Permalink to: "%s"', 'cornerstone' ), 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' );
}
// =============================================================================

Then I added to Customizer > Custom > Global CSS:

.x-recent-posts .x-recent-posts-img {
    background-size: contain;
   padding-top:25%;

}

works like a charm.

March 2021 Update: The above code example has been adjusted to account for a change to a function name.

1 Like
#5

Thanks for sharing your solution. :slight_smile: