Docs

[Israel G]

Hi,

I use X-theme to show my astrophotography work and my images are not displayed exactly as I process them.
When using Essential Grid, they look as they should (you can check here: http://www.astronomylab.net/galeria/) but not on post or Revolution Slider (ex: http://www.astronomylab.net/astrofotografia-de-cielo-profundo/nebulosa-iris/).

My site max width is set at 1300px and I upload my images the same size (1300px wide).
I don’t know what is happening but X seems to blur my pictures.

Thanks in advance for the help.

[Jade]

Hi there,

I tried to check on the photos but they seem to look normal on my end. In case I missed what you are trying to point out, kindly provide us with the screenshots so well easily find the issue you are referring to.

Thank you.

[Israel G]

Hi Jade,

It seems that X is upsizing my images.
My site max width is set at 1300px and I would like this value to be real. I don’t mind if X downsizes my images as they still look ok.
Hope you can see what I am referring to. See attached files.

Thank you.

[Israel G]

Files are too big to be attached but I need them to be that big in order to show you what I am talking about. Please check these links.

https://www.dropbox.com/s/w4cqptpzp4gsce6/Essential%20Grid%20view%20p.jpg?dl=0
https://www.dropbox.com/s/7o1zdz6zcbxeq4z/Featured%20image%20p.jpg?dl=0

Thank you.

[Christopher]

Hi there,

Please resize attachments and upload them again. Featured image looks fine on my end, see the attachment.

Thanks.

[Rad]

Hi there,

In Essential Grid, you can choose what size of the image that you can display. While in featured image, it defaults to entry size and it’s a bit smaller on full-size. To fix it, you can add this code to your child theme’s functions.php

  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 this helps.

[Israel G]

Hi there,

– Christopher – It doesn’t look fine too me.
– Rad – I added the code you suggested and doesn’t fix my issue.

I checked my website on a 22″ monitor and everything looks fine, but when using my own 24″ monitor, images are somehow resized and start to look bad.
I guess it has something to do with the responsive feature from the theme. I still don’t understand why my max site width and my images (uploaded at the same width) don’t look as they should.

Any others suggestions?..

Thank you.

[Rad]

Hi there,

How should appear? I checked and the images are correctly displaying, the code works since it displays the original image (1300×966), your uploaded image http://www.astronomylab.net/wp-content/uploads/2016/11/Nebulosa-Iris-web2.jpg is just about the size of 13″ screen.

Would you mind providing a mockup screenshot of how we should see it?

Thanks!

[Israel G]

Hi there,

Please, check this link to see what is happening with my images and what I am trying to say… https://www.dropbox.com/s/xeu482sglq7wgzf/Images%20comparison.jpg?dl=0

Top and bottom images are the exactly same image/file. (1300×966 px).
On the top is the one displayed on Chrome. Bottom is the same image in Photoshop at 100% size.
As you can see the top image is not the same size as the bottom one and it is kind of blurred.
You can check my site layout setting on the attachment.

My image size and X settings perfectly match.
I hope I explain myself better this time.

Thank you.

[Rue Nel]

Hello There,

Thank you for the clarifications. The featured images being served in your single post is using the cropped version of the image. The image size were calculated based on the site width in the customizer. If you want to display the full image as your featured image, please add the following code in your child theme’s functions.php file

// Display the original image of the feature image in single post
// =============================================================================
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 );
      }
    }

    if ( is_singular() ) {
      $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;
    }

  }

}
// =============================================================================

Please let us know if this works out for you.

[Author]

Posts