Docs

[fredericobt]

Hello.

My site uses Ethos stack. I want to use featured image as background to the post title.
My reference (benchmark): http://demo.codestag.com/blink/2014/10/27/a-new-look-for-an-established-blog/.

What I have done so far:
1) I followed this: https://community.theme.co/forums/topic/featured-image-as-background-to-post-title/.
2) Then I made some adjustments: https://community.theme.co/forums/topic/ethos-blog-post-main-image-full-width/#post-245551
3) My CSS code right now is:

/* POST FEATURED IMAGE */
.page .x-main .hentry .entry-featured, .single-post .x-main .hentry .entry-featured {
  margin-bottom: 0px;
}
.single .has-post-thumbnail .entry-featured {
	position: relative;
}
.single .has-post-thumbnail .entry-featured .entry-header {
  position: absolute;
  z-index: 99;
  top: 20%;
  width: 100%;
  padding: 5% 15% 5% 15%;
  margin: 5% 0px 5% 0px;
  color: white;
  background-color: rgba(0, 0, 0, 0.6);
}
.single .has-post-thumbnail .entry-featured, .single .entry-thumb, .single .entry-featured img {
  width: 100%;
  height: 100vh;
  margin: 0px auto;
}
.single .has-post-thumbnail .entry-featured .entry-title {
  color: #FFFFFF;
}

My blog post: http://www.energiaeletrica.net/sistema-internacional-de-unidades/

HOWEVER, I want to keep background aspect ratio just like my reference.
That site uses background-image within a section while I am using img inside a div.
I couldn’t edit X PHP Files to make this modification.
Is there an easy way to replicate the same effect with an img inside a div? That’s what I am trying to do without success.

Regards.

[Lely]

Hi There,

Please try adding this custom javascript on Appearance > Customize > Custom > Edit Global Javascript:

jQuery(document).ready(function($) {
    $('.single-post .entry-featured').css("background-image", "url("+$('.single-post .entry-thumb img').attr('src')+")");
  $('.single-post .entry-thumb img').remove();
});

The script will get the source of the feature image and then add it as background. It will then remove the featured image.

Hope this helps.

[fredericobt]

EXACTLY!

Thank you, Lely!

[Rahul]

That’s great!

Let us know if you have anything further to ask. We’d be happy to assist you with everything.

Thanks for using X!

[Antony H]

I’m trying to do something similar to this using Renew. I added:

(function($) {
$(‘.single .entry-featured’).insertAfter(‘header.masthead’);
})(jQuery);

To the custom Javascript section in the Customizer and it works, but the image is too tall and has a border around it. I want no border and a 300px height if possible please. Can you advise me please?

Thanks!

[Antony H]

This reply has been marked as private.

[Thai]

Hi There,

Please add the following CSS:

.single-post .entry-featured {
    padding: 0;
    border: 0;
    max-height: 300px;
}
.single-post .entry-thumb img {
    height: 300px;
    width: auto;
    min-width: inherit;
    margin: 0 auto;
    display: block;
}

Hope it helps 🙂

[Antony H]

Hi there, thank you for much for getting back to me. I don’t know how but I somehow missed your reply, so I’m sorry it’s taken me so long to reply.

This code results in a red box either side of the image. I still want the image full width if possible please, just contained within the 300-400px high container.

Thanks!

[Thai]

Hi There,

Please delete the provided CSS and try with this CSS instead:

.single-post .entry-featured {
    padding: 0;
    border: 0;
    max-height: 300px;
    overflow: hidden;
}

Hope it helps 🙂

[Antony H]

Woohoo! Genius guys.

One last thing and I promise to stop bugging you. On larger screens the image looks a bit pixelated even though the original images are huge, I’m guessing it’s because, by default the featured image must use a smaller version of the image and not the original. Is there a way to make sure it uses the original for maximum quality please?

Thanks so much one again.

[Thai]

Hi There,

Because this requires a template change, I’d advise that you setup 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.

After that add this code at 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' ) );
        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.

[Antony H]

Thank you guys, the code didn’t seem to do anything though. Sorry!

[Thai]

Hi There,

Please provide us with your admin account so we can take a closer look.

Thanks.

[Antony H]

This reply has been marked as private.

[Thai]

Hey There,

I’ve just cleared the WP-rocket cache, I could see that the image is original size right now.

Regards!

[Author]

Posts