Image Max Width On Pages

[TwoTallTravellers]

On this page (and other pages in the future) I want the top image to be full width.

About Us - Two Tall Travellers

The problem I am having is that I have already set this in the global CSS;

.x-main.full {
max-width: 1200px;
width: 100%;
margin: auto;
}
.x-main.left {
max-width: 840px;
margin: auto;
}
.x-container.max {
max-width: 1150px;

The reason i did this is because in posts i wanted a max width so it looks neat. is there any way of getting the image at the top to be full width?

Cheers

Kev

[albrecht]

Hi Kev,

Thanks for writing in.

To achieve that, you will need to install x /pro’s child theme, then add this code to the child theme’s functions.php.

function add_full_image(){ ?>
  <?php 
      if ( is_page() && has_post_thumbnail()  ) : 
        global $post;
        $src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full', false );
  ?>   
        <div class="custom-content" style="text-align: center;">
          <img src="<?php echo $src[0]; ?>" />
        </div>
  <?php endif; ?>

<?php }
add_action('x_after_masthead_end', 'add_full_image');

What it does is, it displays the page’s featured image at the top. So if you want a certain page to have a full top image then just upload the image to the featured image section.

Hope it helps.