Docs

[martinezg]

Hi,

I am trying to achieve the attached look to my posts, where the featured image for the post appears full width including the header.

I know it involves changing something in x/framework/views/integrity/content.php as well as CSS but after a few hours I haven’t figured it out.

I tried this but didnt work. How can I achieve that look?

integrity/content.php

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

	<?php if ( has_post_thumbnail() && 'post' == get_post_type() ) {
        $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'x-large' ); ?>
        <div class="entry-background" style="background-image: url(<?php echo esc_url( $thumbnail[0] ); ?>)">
            <header class="entry-header">
                <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
            </header><!-- .entry-header -->
        </div><!-- .entry-background -->
    
    <?php } else { ?>
        <header class="entry-header">
            <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
        </header><!-- .entry-header -->
    <?php } ?>

	<div class="entry-content">
        <div class="entry-meta">
	        <?php posted_on(); ?>
		</div><!-- .entry-meta -->
		<?php the_content(); ?>
		<?php
			wp_link_pages( array(
				'before' => '<div class="page-links">' . __( 'Pages:', 'x' ),
				'after'  => '</div>',
			) );
		?>
	</div><!-- .entry-content -->

</article><!-- #post-## -->

CSS

.entry-background {
    background-position: center;
    background-size: cover;
    height: 480px;
    left: 0;
    padding: 10px;
    position: relative;
    width: 100%;
	margin-top: -60px;
}

.entry-background {
    position: absolute;
    top: 51px;
}

.entry-background:before {
    background-color: #000;
    content: '';
    height: 100%;
    left: 0;
    opacity: 0.4;
    filter: alpha(opacity=40);
    position: absolute;
    width: 100%;
    top: 0;
}

[Rue Nel]

Hello There,

Thanks for writing in! Would you mind providing us the url of your site with login credentials so we can take a closer look and fix the issue? 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.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password
– FTP Hostname
– FTP Username
– FTP Password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[martinezg]

This reply has been marked as private.

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.single-post .x-container.max.width.offset {
    max-width: 100%;
    width: 100%;
    margin-top: 0;
}

.single-post  .entry-wrap,
.single-post .x-comments-area {
    width: 90%;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}
.single-post .entry-featured {
    margin-bottom: 25px;
}

Hope it helps 🙂

[martinezg]

Thanks. I’ve placed this code in CSS but what is does is make the image bigger. How can I make it also appear behind the navbar and have the post title in the centre. I have reattached the screenshot here of the look I want to achieve.

[Rad]

Hi there,

Please add this CSS as well,

@media (min-width: 980px){
    .single-post .masthead{
        height: 0px;
    }
    .single-post .x-navbar {
        background-color: transparent;
    }
    .single-post .has-post-thumbnail .entry-featured {
        position: relative;
        top: -40px;
        left: -50px;
        right: -50px;
        width: calc( 100% + 100px);
    }
    .single-post .has-post-thumbnail .entry-header {
        position: relative;
        top: -200px;
        text-align: center;
    }
    .single-post .has-post-thumbnail .entry-header h1 {
        color:#fff;
    }
}

Cheers!

[martinezg]

That’s great! thanks!

One more tweak that I need to do with it. How do I make the image full width and then crop it on the top and bottom so it doesnt take the entire screen?

http://crowdlacuna.com/more-choice-more-satisfaction/

[Rupok]

Hi there,

You have set container width/max-width from Customize > Layout and Design so you can’t get this fullwidth. You need to set content width to 100% along with the container width.

Hope this makes sense.

[martinezg]

So I cannot use CSS only for the image? Changing the layout and design section affect the entire site design so it messes all up. Some thing like navbar or sliders are truly full width already.

[Rue Nel]

Hello There,

Sorry for the confusion. To resolve your issue, please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($){
  $('.single-post .entry-featured').insertAfter( $('.single-post .masthead') );
})(jQuery);

Please let us know if this works out for you.

[Author]

Posts