Blurry featured image on blog

Hey,

How can I get a sharper image for the featured image that’s at the top of every blog?

http://temp.thisadventurelife.com/hiking/hiking-ha-ling-peak/

The featured image is roughly 2000 x 1300 yet it looks blurry as not as sharp as what was uploaded.

Thanks,

Hi @shamus

That’s because you have “Site Layout” set to “Fullwidth” and “Content Layout” has a Sidebar, then I believe you manipulated the page with CSS to have the featured image in full width.

To render the image in full width, please add this PHP code in functions.php file in your child theme directory:

  function x_featured_image( $cropped = '' ) {

    function in_array_any($needles, $haystack) {
      return !!array_intersect($needles, $haystack);
    }

    $stack     = x_get_stack();

    $fullwidth = ( in_array_any(['x-full-width-active', 'x-full-width-layout-active'], get_body_class() ) ) ? true : false;

     if ( has_post_thumbnail() ) {

      if ( $cropped == 'cropped' ) {
        if ( $fullwidth ) {
          $thumb = get_the_post_thumbnail( NULL, 'entry-cropped-fullwidth', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry-cropped', NULL );
        }
      } else {
        if ( $fullwidth ) {
          $thumb = get_the_post_thumbnail( NULL, 'entry-fullwidth', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry', NULL );
        }
      }

      switch ( is_singular() ) {
        case true:
          printf( '<div class="entry-thumb">%s</div>', $thumb );
          break;
        case false:
          printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
            esc_url( get_permalink() ),
            esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
            $thumb
          );
          break;
      }

    }

  }

If you don’t know how to create and use Child theme, then please follow this guide:

Thanks.

Hey I’ve added the code but seems nothing changed.

Should I change the site layout or content layout or keep what I have at the moment?

Thanks.

Hi @shamus,

The code given should work and force the theme to show the original version of the image and not the cropped one. The only thing that you should do now is to install this plugin and regenerate all the thumbnails.

Then, please make sure that you will clear any kind of cache plugin that you might have.

kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case if you still have problems.

Thank you.

Still nothing changed.

Secure note added.

Thank you.

Hi @shamus,

I accessed your website and went to Appearance > Editor and checked the functions.php file and changed the code to:


function x_featured_image( $cropped = '' ) {

  $stack     = x_get_stack();
  $fullwidth = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;

  if ( has_post_thumbnail() ) {
    $thumb = get_the_post_thumbnail( NULL, 'full', NULL );

    switch ( is_singular() ) {
      case true:
        printf( '<div class="entry-thumb">%s</div>', $thumb );
        break;
      case false:
        printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
          esc_url( get_permalink() ),
          esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
          $thumb
        );
        break;
    }

  }

}

Now if you check the page you will see that the exact Image Size of the Feature Image is used. The whole resizing feature of the theme is turned off now.

Thank you.

Thanks that worked. But it did remove the preview text on the bottom blogs of the home page. Can you assist me with getting that back to normal?

Hello There,

Thanks for updating in! The code will only affect the featured image. It will not affect in anyway with the classic recent post elements which is the one displaying in your homepage. That is otherwise, you have a custom recent post element code that has been removed or replaced in your child theme’s functions.php file.

Could you please clarify further?

Best Regards.

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