Docs

[bedingfield]

Hi there,

I wondered if this is at all possible for the featured image in a blog post.

If you look at this site, they have a featured image spanning the whole width of the page while the content remains cemented.

http://pitchfork.com/features/lists-and-guides/9910-overlooked-albums-2016/

My page has the centred copy with a featured image contained within.

http://elyrunners.club/tarpley-20-beytron-suffolk/

Is it possible to do what I ask?

Thank you for your time.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

.single-post .x-container.max.width.offset {
    width: 100%;
    max-width: 100%;
}
.entry-content.content {
    width: 80%;
    margin: 0 auto;
}

Remove this code :

.single-post .blog-width {
    margin: 0 auto;
    width: 70%;
}

Hope it helps.

[bedingfield]

Great. Thank you. but I would like to keep title, date and tags at 80% and also comments. Can it be done?

Thank you

[Nico]

Hi There,

Would you mind sharing us an image of what you want to achieve. Probably a screenshot with labels on it so we could fully understand the customization you want to achieve and we could suggest the best code if possible

Thanks.

[bedingfield]

Hi there,

Essentially I want everything from below header to bottom of comments to remain at 70% width, but would like the featured image to be full width like my frontage slider is.

http://elyrunners.club/wymondham-20/

Only for blog posts though.

Does that make sense?

thank you

[Rue Nel]

Hello There,

Thanks for the updates. To achieve that, you must edit your wp-single.php first. You can make use of this code:

<?php

// =============================================================================
// VIEWS/RENEW/WP-SINGLE.PHP
// -----------------------------------------------------------------------------
// Single post output for Renew.
// =============================================================================

?>

<?php get_header(); ?>

   <div class="x-container max width offset">
   <div class="x-main full" role="main">
   

      <?php while ( have_posts() ) : the_post(); ?>

        <?php if ( has_post_thumbnail() ) : ?>
          <div class="entry-featured">
            <?php x_featured_image(); ?>
          </div>
        <?php endif; ?>

        <div class="blog-width" role="main">
          <?php x_get_view( 'renew', 'content', get_post_format() ); ?>
          <?php x_get_view( 'global', '_comments-template' ); ?>
        </div>
        
      <?php endwhile; ?>
      
  </div>
  </div>

<?php get_footer(); ?>

And then you also need to have this custom css code:

.single-post .entry-wrap .entry-featured {
  display: none;
}

Please let us know if this works out for you.

[bedingfield]

Hi there,

Thank you for the help here. I have done it slightly different so I get a full width.

I just have some white space above the featured image I would like to remove so I have the image tight to the header.

http://elyrunners.club/folksworth-15/

What CSS would do that please?

Once thats done I just need to resize images to reduce depth.

thanks again 🙂

PS: I am assuming that it would not be easy to have the posts title above the full width image like so, wouldn’t it?

http://pitchfork.com/features/rising/9854-boogie-a-rapper-of-consequence/

[bedingfield]

Think I got the CSS. I did this…

	
.single-post .entry-wrap .entry-featured {
  	display: none;
  	}
	
.single-post  header.x-header-landmark {
    margin: 0;
    padding: 0;
	}
	
.single-post .entry-featured {
  margin-top:-10px;
  padding-top:-10px;
  }

Is this OK?

Thank you.

Is it possible to have post title above featured image?

[Rad]

Hi there,

It’s margin, please try this one,

.single-post  .entry-featured {
margin-top: 0px;
}

About the post title, you mean overlaying covering the featured image? Or the featured image should be under the title?

You may try this,

.single-post .entry-header {
    margin-bottom: 0px;
    position: relative;
    top: -300px;
}

Hope this helps.

[bedingfield]

Many thanks for this.

As regards titles. I’m trying to replicate this page, where it has the page title the same width as the copy, but has a fullwidth featured image.

so….

title (70% width)
featured image (full width)
copy (70% width)

I guess this would involve some PHP wizardry

As this…

http://pitchfork.com/features/rising/9854-boogie-a-rapper-of-consequence/

Thank you.

[Rue Nel]

Hello There,

The only way you can have the same layout is to have a custom template. That is why I suggested to have something like in my previous reply. And to have the way you wanted, I guess we might need to update your code. You need to have this instead:

<?php

// =============================================================================
// VIEWS/RENEW/WP-SINGLE.PHP
// -----------------------------------------------------------------------------
// Single post output for Renew.
// =============================================================================

?>

<?php get_header(); ?>

   <div class="x-main full" role="main">
   

      <?php while ( have_posts() ) : the_post(); ?>
        
          <?php x_get_view( 'renew', 'content', get_post_format() ); ?>
          <?php x_get_view( 'global', '_comments-template' ); ?>
        
      <?php endwhile; ?>
      
  </div>

<?php get_footer(); ?>

And then you also need to add another file by following this steps:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/RENEW/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Renew.
// =============================================================================

?>

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

  	<div class="x-container max width offset">
  	  <div class="blog-width" role="main">
    	<?php x_get_view( 'renew', '_content', 'post-header' ); ?>
      </div>
    </div>
    
    <?php if ( has_post_thumbnail() ) : ?>
      <div class="entry-featured">
        <?php x_featured_image(); ?>
      </div>
    <?php endif; ?>

    <div class="x-container max width offset">
  	  <div class="blog-width" role="main">
    	<?php x_get_view( 'global', '_content' ); ?>
      </div>
    </div>
    
  </div>
</article>

3] Save the file named as content.php
4] Upload this file to your server in the child theme’s folder
wp-content/theme/x-child/framework/views/renew/

Hope this would work out for you.

[bedingfield]

thats great. Thank you so much 🙂

[Prasant Rai]

You are most welcome. 🙂

[bedingfield]

Rue has been very helpful with my problems.

I am nearly there, but I wondered how I would be able to show the excerpt just below the title, then meta, then tags.

Can this be done easily?

http://elyrunners.club/thames-path-100/

Thank you so much.

Also, when doing these changes, I notice it affects the way blog index displays. It replicates the blog post. Can blog index/ category index display as before (i.e.. image, title, then excerpt)? Or is that too complex?

http://elyrunners.club/category/race-report/

Karl

[Rue Nel]

Hello Karl,

In my last reply, I suggested a code and it change your single blog post including the blog index/archive pages. To display the old layout (with image, title, then excerpt), I would you to update the content.php file and use this instead:

<?php

// =============================================================================
// VIEWS/RENEW/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Renew.
// =============================================================================

?>

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

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

	  	<div class="x-container max width offset">
	  	  <div class="blog-width" role="main">
	    	<?php x_get_view( 'renew', '_content', 'post-header' ); ?>
	      </div>
	    </div>
	    
	    <?php if ( has_post_thumbnail() ) : ?>
	      <div class="entry-featured">
	        <?php x_featured_image(); ?>
	      </div>
	    <?php endif; ?>

	    <div class="x-container max width offset">
	  	  <div class="blog-width" role="main">
	    	<?php x_get_view( 'global', '_content' ); ?>
	      </div>
	    </div>

    <?php else : ?>

    	<?php x_get_view( 'renew', '_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' ); ?>

    <?php endif; ?>
    
  </div>
</article>

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

[Author]

Posts