Docs

[britneygardner]

Hello! The question I’m posting is referring to britneygardner.com/knowliketrust.

I’m using the recent blog posts widget and despite the featured image being sized to the blog post featured images, they’re not showing up the right way. As you can see on the page, text within the image is being cut off.

What is the best way to make the entire image show on the recent posts area?

[britneygardner]

This reply has been marked as private.

[Nico]

Hi There,

Thanks for writing in.

You could follow the thread below to prevent the recent post from cutting off.

https://community.theme.co/forums/topic/prevent-recent-post-thumbnails-from-cutting-off/

Let us know how it goes.

Thanks.

[britneygardner]

That worked for the first recent posts shortcode on the page but not the rest of them.

http://britneygardner.com/knowliketrust/

[Joao]

Hi There,

Upon checking your setup your first image is way smaller than the others

http://britneygardner.com/wp-content/uploads/2016/06/16-Episode-Image-862×560.jpg

http://britneygardner.com/wp-content/uploads/2016/06/Keating-Episode-Image.jpg

Please format the other images to the same size as the first for optimal results.

Let us know how it goes,

Thanks

Joao

[britneygardner]

Bringing this back up again because after checking multiple things, that can’t be the problem. The image was uploaded at 1000px wide and resized by the theme since there’s a sidebar.

[Friech]

Hi There,

Sidebar has nothing to do with cropping the image. Was the code provided here: https://community.theme.co/forums/topic/prevent-recent-post-thumbnails-from-cutting-off/#post-603411 did not work on your end?

Since you want to emphasise the text on your image, please keep the image aspect ratio (1000px x 560px).

Thanks.

[britneygardner]

Hello –

I inspected the source and you’re correct – the theme is using a resized image. I am uploading all images of the same size, 1000px x 650px.

You can see on the original file path here: http://britneygardner.com/wp-content/uploads/2016/07/21-Episode-Image.jpg

I’m attaching a new/recent screenshot to show the problem. The code in the linked forum topic fixed the FIRST recent post, but as shown I have a series of them on this podcast page. The rest of the short codes for the recent posts are still cropping the image.

[britneygardner]

To clarify – somewhere, somehow the theme is resizing these images. I’m uploading them at the original, 1000×650 size only.

Regardless of that, the above fix only altered the TOP shortcode on my page britneygardner.com/knowliketrust and I need them all uniform.

[Paul R]

Hi,

I was able to fix the image problem by changing your code in your child theme’s functions.php file to this.

// Displaying Excerpt in Recent Posts
// =============================================================================

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

    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-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( __( 'Permalink to: "%s"', csl18n() ), 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_filter('wp_head', 'custom_recent_posts');

function custom_recent_posts() {
  remove_shortcode( 'x_recent_posts' );
  add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2' );
remove_shortcode( 'recent_posts' );
  add_shortcode( 'recent_posts', 'x_shortcode_recent_posts_v2' );
}

Kindly check on your end.

Thanks

[britneygardner]

Yes, all fixed now. Thank you!

[Nabeel A]

Glad we could help 🙂

Cheers!

[Author]

Posts