Docs

[tjw101]

Hi,

I took a look at https://community.theme.co/forums/topic/featured-image-as-background-to-post-title/page/2/ which shows you how to put the title on top of the featured image for all posts (icon stack).

Now i want to make that image full width (see example image attached) rather than being boxed and margined. I also want to the able to set the max height of the background and allow it to display responsively on mobile.

Looking forward to some solutions. Thanks

[tjw101]

The screenshot did not attach. Here is is.

[Friech]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Cheers!

[tjw101]

This reply has been marked as private.

[Joao]

Please add the following code to Appereance > Customizer > Custom > CSS

.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;
}

Hope it helps

Joao

[tjw101]

hi, this does not make the image full width background – the image is still contained. See screenshot.

i currently have content.php in the Icon views folder:

<?php

// =============================================================================
// VIEWS/ICON/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Icon.
// =============================================================================

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="entry-wrap">
    <?php x_icon_comment_number(); ?>
    <div class="x-container max width">
       <?php if ( !is_single() ): ?>
      <?php x_get_view( 'icon', '_content', 'post-header' ); ?>
    <?php endif; ?>
      <?php if ( has_post_thumbnail() ) : ?>
      <div class="entry-featured">
        <?php x_featured_image(); ?>
        <?php if (is_single() ): ?>
         <?php x_get_view( 'icon', '_content', 'post-header' ); ?>
       <?php endif; ?>
      </div>
      <?php endif; ?>
      <?php x_get_view( 'global', '_content' ); ?>
    </div>
  </div>
</article>

Plus have added the code from your post above to the custom global css in customizer.

What do I need to change to make the image full width?

Thanks

[Rue Nel]

Hello There,

Thanks for updating in and for providing the screenshot. The featured image should be outsize of the container. Please edit the content.php file and use this code instead:

<?php

// =============================================================================
// VIEWS/ICON/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Icon.
// =============================================================================

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="entry-wrap">
    <?php x_icon_comment_number(); ?>

    <?php if ( has_post_thumbnail() ) : ?>
        <div class="entry-featured">
          <?php x_featured_image(); ?>
          
          <?php if (is_single() ): ?>
            <?php x_get_view( 'icon', '_content', 'post-header' ); ?>
          <?php endif; ?>

        </div>
    <?php endif; ?>

    <div class="x-container max width">

	  <?php if ( !is_single() ): ?>
		<?php x_get_view( 'icon', '_content', 'post-header' ); ?>
	  <?php endif; ?>

      <?php x_get_view( 'global', '_content' ); ?>
    </div>
  </div>
</article>

And then you need to remove this css block:

page .x-main .hentry .entry-featured, 
.single-post .x-main .hentry .entry-featured {
    margin-bottom: 0px;
}

You have to replace it with this code instead:

page .x-main .hentry .entry-featured, 
.single-post .x-main .hentry .entry-featured {
    margin: 0  auto;
    padding: 0 !important;
}

the final result should be something like this: http://prntscr.com/dmf3vs

And if you want to remove the space between the menu and the image (http://prntscr.com/dmf4bs), you can add the following css code in your customizer:

.single .hentry .entry-wrap {
    padding-top: 0;
}

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

[tjw101]

Thanks guys – almost there!

The background image is stretching rather than filling – how do I change that so the images don’t look stretched.

I tried setting the height to 75 (as the images were too high as well) and of course that stretched more (sereenshot fill height)

Also, the changes to content.php have caused problems elsewhere. category pages etc in masonry have had the text moved and that has unbalanced the design (see screenshot masonry-text)

If we can fix both those issues I think we are there.
Thanks!

[Rue Nel]

Hello There,

Thanks for updating in!

So that the changes will take effect only in single post page, please update the code in the content.php file. You can make use of this code instead:

<?php

// =============================================================================
// VIEWS/ICON/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Icon.
// =============================================================================

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="entry-wrap">

    <?php if ( is_single() ) : ?>

      <?php x_icon_comment_number(); ?>

      <?php if ( has_post_thumbnail() ) : ?>
          <div class="entry-featured">
            <?php x_featured_image(); ?>
            
            <?php if (is_single() ): ?>
              <?php x_get_view( 'icon', '_content', 'post-header' ); ?>
            <?php endif; ?>

          </div>
      <?php endif; ?>

      <div class="x-container max width">

      <?php if ( !is_single() ): ?>
      <?php x_get_view( 'icon', '_content', 'post-header' ); ?>
      <?php endif; ?>

        <?php x_get_view( 'global', '_content' ); ?>
      </div>

    <?php else : ?>

      <?php x_icon_comment_number(); ?>
      <div class="x-container max width">
        <?php x_get_view( 'icon', '_content', 'post-header' ); ?>
        <?php if ( has_post_thumbnail() ) : ?>
        <div class="entry-featured">
          <?php x_featured_image(); ?>
        </div>
        <?php endif; ?>
        <?php x_get_view( 'global', '_content' ); ?>
      </div>

    <?php endif; ?>

  </div>
</article>

And then find and remove this css code in your customizer:

.single .has-post-thumbnail .entry-featured, .single .entry-thumb, .single .entry-featured img {
    width: 100%;
    height: 75vh;
    margin: 0px auto;
}

You need to replace it with this code:

.single .has-post-thumbnail .entry-featured, 
.single .entry-thumb {
    max-height: 500px;
    overflow: hidden;
}

.single .has-post-thumbnail .entry-featured, 
.single .entry-thumb, 
.single .entry-featured img {
    width: 100%;
    margin: 0px auto;
}

Please let us know if this works out for you.

[tjw101]

Thanks Guys! I think thats all sorted 🙂

[Rue Nel]

Hello There,

You’re welcome! We are just glad we were able to help you out.
Thanks for letting us know that it has worked for you.

Cheers.

[Author]

Posts