Docs

[shogun]

Hi is there a way to serve scaled images not larger than 400px wide on blog and archive pages? I am using integrity stack and masonary style layout.

The load time on my blog is super slow mainly because x-theme is serving the full featured image which is not needed on the blog page or archive page where the images are never larger then 400px wide.

p.s. I don’t want to have the actual featured image to be smaller because then it would not look good when people share individual posts on Facebook.

Thanks

[Rue Nel]

Hello There,

Thanks for writing in! To resolve this issue, set the featured image not larger than 400px, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.blog .has-post-thumbnail .entry-featured,
.archive .has-post-thumbnail .entry-featured {
  position: relative;
  overflow: hidden;
}

.blog .entry-thumb img,
.archive .entry-thumb img {
  min-width: 50%;
  max-width: 400px;
  margin: 0 auto;
}

Hope this helps. Please let us know how it goes.

[shogun]

Hi, thanks for your reply.

No this is not the solution I was looking for. I want to serve images that are actually smaller in size. Otherwise the theme will load the larger picture and then show them smaller, which does not reduce loading time.

I want to be able to serve the “Medium Size” image as defined under “Settings – Media” instead of the full sized Featured Image.

Best regards.

[Rue Nel]

Hello There,

Thank you for your clarifications! Now I think I know what you want. What you are trying to accomplish requires a template customization, we would like to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Once you already have your child theme active and ready, please insert this following code in your child theme’s functions.php file.

// Custom feature image image
// =============================================================================
function x_featured_image( $cropped = '' ) {

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

  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 it is the blog index or archive page
    //
    if ( is_home() || is_archive() ) {
      $thumb = get_the_post_thumbnail( NULL, 'medium', NULL );
    }

    switch ( is_singular() ) {
      case true:
        printf( '<div class="entry-thumb" style="%s; min-height: 200px; background-size: cover;"></div>', $bgimage );
        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;
    }

  }

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

The medium dimension will be displayed in the featured image. Please make sure that you have setup the size of the medium dimension for at least 400×400. You can check it in Settings > Media. You might need to regenerate the thumbnails (https://wordpress.org/plugins/regenerate-thumbnails/).

We would loved to know if this has work for you. Thank you.

[shogun]

Worked like a charm. Thank you!

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[shogun]

Hi again. I encountered a problem with this solution. My masonary blog page looks perfect but the problem is when I share a single post on Facebook I don’t get the large featured image. So I get this error from Facebook Sharing Debugger:

“Provided og:image URL, http://xxxxx.jpg?fit=300%2C168 was not valid because it did not meet the minimum size constraint of 200px by 200px.”

I want large image on a single post that I can share. But small images on my masonary blog page.

Is this possible?

[Rupok]

Hi there,

Same image will be used on both places, so it’s not possible to use different version for blog page. But if your image is at least 400×400, you should not get this error.

Thanks!

[shogun]

Are you sure Rupok?

What was the point with Rue Nel’s post above?

Is there no way to make the theme use
“IF blog or archive THEN “Medium size”

“IF single THEN “Large size” (or original size)?

[Christian]

That is possible with further modification. Regretfully, further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer.

Thanks for understanding.

[Author]

Posts