Featured image stretched too much

Support
#1

hi there - me again for the final time.

I love the larger featured image in a blog page but hate what it does to the image (unless you are on mobile). It stretches the image to such an extent that it is unviewable on my larger screens. See issue below - you will need to view on a larger screen.

Thanks in advance

#2

Hi Mick,

Thanks for reaching out.

May I know what do you mean by what it does? The image has 1440px width and should be normal to appear at 1440px screen (full-width). And it looks nice and if you’re referring to clipping and so on, it’s due to the added custom CSS.

.single-post .entry-thumb img {
    position: absolute;
    height: auto;
    width: auto;
}

.single-post .entry-thumb {
    height: 450px;
    overflow: hidden;
}

.entry-thumb img, .entry-featured .x-video-inner {
    width: 100%;
    height: 410px;
    object-fit: cover;
}

Question is, how do you prefer it displayed? The full-width image looks nice since it’s 1440px image.

Thanks!

#3

Hey - this is how it looks on my screen

As you can see, the crop looks really bad and only shows a very small area of the image. If you scroll down, you will see the same image as it should be displayed.

#4

Hi @mickshah,

In this case, you have to setup a child theme:

Then add the following code under functions.php fie locates in your child theme:

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, 'entry-fullwidth', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry', NULL );
        }
      }

      switch ( is_singular() ) {
        case true:
          printf( '<div class="entry-thumb">%s</div>', get_the_post_thumbnail( NULL, 'full', NULL ) );
          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;
      }

    }

}

Hope it helps :slight_smile:

#5

Tried this and till no joy… :frowning:

Can you take a look at my site and help me fix these issues?

#6

Hello Mick,

Thanks for updating the thread.

Can you please share the login details of your website in secure note for us to take a closer look?

Thanks.

#7

I have just sent youw login details - please can you confirm you have received it.
Thanks

#8

Hi Mick,

The CSS that I mentioned are still there, please check this video recording https://www.dropbox.com/s/kirvbovoalcr859/bandicam%202019-04-12%2007-31-03-935.mp4?dl=0

Please remove them from your custom CSS, some of it are within @media, so removing one will not fix it on every device. You must remove them all.

I guess you wish to have wide image but shorter and that’s why you’re clipping it? But again, the clipping is done by your CSS so please remove them. And if you wish to use wide but shorter image then please upload a non-square image.

Thanks!

#9

Thank you so much for showing me - I really appreciate it. However, my screen does not look the same as yours and I dont have the confidence in deleting CSS code to make this image the same as you show me in the video. Is there any chance you could delete the code your end using the details I have sent? I would really appreciate it. Thanks Mick

#10

Hi Mick,

I went ahead and commented out the css codes that my colleague have specified.

Kindly check in your end.

Thanks

#11

Thank you so much.

#12

You are most welcome. :slight_smile:

#13

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