Featured image pixelated

Hey there.

When I upload a image in the featured image setting, it appers like this:

As you can see, the image doesn’t fit entirely into the space provided. The result is a pixelade post image. I don’t knwo why it happens, since in the first articles I create, the image works as it should.

I tried to:

  • create a new article (same problem)
  • change images (same problem)

Maybe this problem could be related to the fact that I installed the child theme?

Thanks in advice and have a great day

Hi There,

Could you please tell us the size of images you’re using? It looks too small, try replacing with the bigger images.

Please also follow the troubleshooting steps below:

  1. Ensure everything is up to date according to our version compatibility list here. Please follow the best practices when updating your theme and plugins. Click here for more information.

  2. Test for a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

  3. Switch to the parent theme to check if the issue persists.

If it still doesn’t help, would you mind providing us with login credentials(by clicking on the Secure Note button at the bottom) so we can take a closer look? To do this, you can make a post with the following info:

  • Link login to your site
  • WordPress Admin username / password

Thanks.

Ok, I’ve inserted the credentials in the secure note.
Thank you

Hey Dario,

There are several domains in your account and I am not sure which domain is in question.

Would you mind providing the URL of the site so that we could check it?

Thank you.

Hey Jade, sure, sorry about that. I’ll put it in a secure note.

Hi,

I tried on my test site and it’s doing the same.

I don’t think it’s a problem, just a wordpress 5 thing. It should display fine on the front end.

For example

Thanks

Hi Paul,

unfortunely it doesn’t display it right! Take a look the homepage: the articles that has a ‘small view’ of the featured image display it pixeled, on the other hand when it’s displayed correctly also in the homepage are displayed correctly.

Thanks!

Hi Dario,

It’s due to the image itself, the original uploaded image isn’t sharp, example https://www..com/wp-content/uploads/2019/01/portfolio-safara.jpg, https://www..com/wp-content/uploads/2019/01/portfolio-leragaz-1.jpg. The other uploaded images quality are good too that’s why they are different on same page. I recommend uploading an image with good quality.

Thanks!

Hi Rad,

I tried with a brand new image. 2000px wide. Nothing changes.

Hello Dario,

Thanks for updating in! Please be advised that the recent post element you used in your homepage will display the cropped version of the featured image and it will be set as background cover to make sure that the whole recent post section is covered with the image. With background cover, the image will be stretched out or zoom in/in to fit the image cropped image.

I went ahead and made necessary changes to the default recent post element. The full image is now displaying in your homepage. I ended up modifying the recent posts element by adding this code in your child theme’s functions.php file

// Full image in 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 );

  $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_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' );
}
// =============================================================================

Please check your site now.

Hi RueNel,

you did it! Problem solved. Thanks a lot, wish you a good day!

Thanks again

On behalf of my colleague, you’re welcome. Cheers! :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.