Properly size images

[michaelxxx]

Follow up to this topic

The link you provided does not help. I already did all image optimizations.

• I use caching (WP Rocket)
• I use a CDN
• all images are optimized with ShortPixel
• all images have a webp Version
• Gzip Compression is activated

The problem is that the images from the recent_posts shortcode don’t seem to be sized correctly, right? The image is taken in 1200x800 pixels and then scaled to 401x320 pixels. Am I seeing this correctly?

So how can I specify in the recent_posts shortcode which image size is taken?

At the moment I have this code in my functions.php

    // Recent Posts
// =============================================================================
function x_shortcode_recent_posts_v2( $atts ) {
  extract( shortcode_atts( array(
    'id'           => '',
    'class'        => '',
    'style'        => '',
    'type'         => 'post',
    'count'        => '',
    'category'     => '',
    'offset'       => '',
    'orientation'  => '',
    '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';
  $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' );
  }

With this code the recent post background images have the full size of 1200x800, right?

How can I modify this code to use the medium or small thumbnails?

I have for example these sizes also in my upload folder:
…wp-content/uploads/2020/deutschland/11/bacharach-reisebericht-titelbild-800x533.jpg
…wp-content/uploads/2020/deutschland/11/bacharach-reisebericht-titelbild-400x267.jpg

Important is that they are not cropped.

[marc_a]

Hi @michaelxxx,

Thanks for reaching out.

I check your website https://one-million-places.com/ on both Google Page Speed and Gtmetrix but I don’t see that you have a problem with properly size images. The background image in your homepage recent posts is not cropped, as you can see they are properly displaying. Regarding the image size of your featured image, the image displayed in the front-end will differ on the size of your section, let say for example you have a 3 columns layout, so the image will get the width of your section and it will display the image on that size. If you want to display the full size of your image, you need to change the layout of your recent posts, let say 1 post per row, in that way, it will display the full image size.

Hope that helps.

Thank you.