Docs

[pdopchev]

Trying to set the height of the post entry feature in

After searching on the forum found the following code to make the feature full width but it would be great, if I could set the height as well:

/* Full Width Header Image - Posts */
.single-post .x-container.max.main {
     max-width: 100%;
}

.single-post .x-container.width.main {
    width: 100%;
}

.single-post .entry-featured,
.single-post .entry-thumb,
.single-post .entry-featured img {
    width: 100%;
}

.single-post .entry-wrap {
    max-width: 1200px;
    margin: 0 auto;
}

.single-post .entry-title,
.single-post .p-meta,
.single-post .comment-respond
{
  	margin: 0 2% 2%;
} 

.single-post .x-comments-area {
   max-width: 800px;
   margin: 0px auto;
}

this is the page I am referring to: http://www.enjoycrestedbutte.com/crested-butte-dog-sledding

trying to have something just like this page: http://www.enjoycrestedbutte.com/crested-butte-trails-tonys-trail-whetstone-deli-loop/ without setting specific image dimensions since the images will be used by an essential grid (the grid will be using the post feature image for a “grid image” and don’t want it to be distorted when displayed in the grid): http://www.enjoycrestedbutte.com/crested-butte-ski-and-snow-activity-guide/

Thank you!

[Friech]

Hi There,

Thanks for writing in! With the image orientation you have, I’m afraid its either the image would be cropped:

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

Or distorted:

.single-post .entry-featured img {
	height: 450px;
}

That’s the only way you can have the looks of the sample site featured image.

Cheers!

[pdopchev]

Thank you! Had to adjust it for different screen sizes but it did the job!

[Rupok]

Glad that you are all set now. Have a nice day!

[pdopchev]

Hi guys,

Came back to this thread after trying to make the featured image work but currently experiencing some difficulties…

The client is looking to have the feature image display nicely on mobile (small screens) and up to a 15.4″ screens. For small screens an image ratio of 2×1 works great (2 times wide and 1 time high). The issue comes up when images are displayed on a 15.4″ screen – it looks a bit pixelated and distorted. So far have tried with images 1200x600px and 1500x750px. *If image is set to native height (600px or 750px) it fills the whole screen and the client is looking for a similar look as the one on mobile. What would be your advice?

1) how to make images not be pixelated?
*) how could I keep the image from filling the whole screen at 15.4 and display nicely?

Have the following code as of now:

/* Limit the height of the entry photo in Desktop*/
@media only screen and (min-width:768px) and (max-width: 1199px) {.single-post .entry-thumb {
	height: 400px;
}
}

@media only screen and (min-width:1200px) and (max-width: 1440px) {.single-post .entry-thumb {
	height: 500px; /* main issue */
}
}

@media only screen and (min-width: 1441px) {.single-post .entry-thumb {
	height: 750px;
}
}

link:http://www.enjoycrestedbutte.com/crested-butte-trails-long-lake/

[Paul R]

Hi,

To fix it, add the code below in your child theme’s functions.php file.

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:
          $thumb = get_the_post_thumbnail( NULL, 'full', NULL );
          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;
      }

    }

  }

Hope that helps.

[pdopchev]

You guys are amazing! Thank you!

[Rahul]

You’re most welcome!

Let us know if we can help with anything else.

[Author]

Posts