Featured Image = Thumbnail?!?

Support
#1

Hi,

It appears that our featured image is a thumbnail and is not the full size image we want. This is making a blurry image show, but we want the crisp image. Here is a video demonstrating the issue:

https://www.dropbox.com/s/kg74wh3wi6l1byh/Gondwana%20-%20Blurry%20Blog%20Featured%20Image.mov?dl=0

Much Appreciated,
Sean

#2

Hello Sean,

Thanks for writing in! Regretfully your video is not playing. You must have uploaded the incorrect file or something. Anyway, the feature image once you upload it will have to generate 3 image sizes, the thumbnail, medium and large. This is a WordPress default. There are also several image sizes which will be exclusively used for the theme.

You will have to upload at least 1200x800 in dimension for your featured image not to be blurry when displayed in the site. To better assist you with this issue, could you please provide us the url of the page where we can find this blurry featured image?

Thank you in advance.

#3

Hi, Sorry about that. Yes, we’re using an image that is more than 1200 px wide. The issue is that the theme is serving a smaller size than full size. The post is in draft until we can solve the issue, but you can see the video below to witness the issue:

Video Explaining The Issue That Isn’t Broken:
https://bit.ly/2y1FC9F

Thanks for the quick reply,
Sean

#4

Hi Sean,

Before I continue checking, what site URL has this image? The image size is based on the site’s layout width (full-width, box, or max-width) which is automatic.

Though, if you wish to override that behavior, you may add this code to your global custom javascript.

jQuery('.has-post-thumbnail .entry-featured img').each( function() {

jQuery(this).attr('src', jQuery(this).attr('src').replace( new RegExp('(-[0-9].*x[0-9].*)\.jpg$'), ".jpg") );

} );

Thanks!

#5

This is for the Gondwana Ecotours blog.
We’re experiencing the issue with this new blog post: https://gondwanaecotours.com/best-of-alaska-summer-trip/

Also, would you help me understand where that javascript is to be placed?

Thanks!

#6

Hi Sean,

Please try adding the code that @Rad suggested in X > Theme Options > JS.

In case you are still getting the smaller images, please add this to the functions.php file of the child theme:

if ( ! function_exists( 'x_featured_image' ) ) :
  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() ) {

      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, 'full', NULL );
        } else {
          $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;
      }

    }

  }
endif;

Here are some references for the child theme:

https://theme.co/apex/child-themes

https://theme.co/apex/forum/t/setup-how-to-setup-child-themes/57

Hope this helps.

#7

Thank you both!
Worked to perfection!

#8

You’re welcome.

#9

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