Docs

[walterbriggs]

Hello!

We’d like to be able to use the featured image full-width above the content on some pages. I did a search of the forum and found a code to enter in the custom code area:

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

However, it doesn’t seem to be working. A similar code for Posts works on those:

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

I’m just wondering if the code is correct and I’m just doing something else wrong, or if the code no longer works (it was from a 2015 post) and needs an update?

Thanks!

[walterbriggs]

Ah. It appears it might be the template I’m using (Blank – No Container | Header, Footer). It shows up correctly if I use the default template. Is there a way to achieve the same thing with the ‘Blank – No Container | Header, Footer’ template?

Thanks!

[Rupok]

Hi there,

Maybe it won’t work but you can provide the URL (with Blank – No Container | Header, Footer set) and we could check.

Thanks!

[walterbriggs]

This reply has been marked as private.

[Jade]

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.

Once you got the child theme setup and activated, you can access the files though FTP then go to /wp-content/themes/x-child/framework/views/integrity then create a file in the directory named template-blank-4.php. Open the file then add this code:

<?php

// =============================================================================
// VIEWS/INTEGRITY/TEMPLATE-BLANK-4.PHP (No Container | Header, Footer)
// -----------------------------------------------------------------------------
// A blank page for creating unique layouts.
// =============================================================================

?>

<?php get_header(); ?>
  <div class="x-main full" role="main">

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

      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <?php if ( has_post_thumbnail() ) : ?>
          <div class="entry-thumbnail"><?php the_post_thumbnail( 'full' ); ?></div>
        <?php endif; ?>
        <?php x_get_view( 'global', '_content', 'the-content' ); ?>
      </article>

    <?php endwhile; ?>

  </div>

<?php get_footer(); ?>

Then add this in the functions.php of the child theme:

.page-template-template-blank-4 .entry-thumbnail img {
    width: 100%;
    margin-bottom: 30px;
}

After saving the changes in the file, you can open the page, set a Featured Image to it then select Blank – No Container | Header, Footer as the template. Basically the file content about will override the structure of the default Blank – No Container | Header, Footer template and adds the featured image at the top of the content is there is anything set for the page.

Hope this helps.

[walterbriggs]

Hi Jade,

It’s very close, thank you. I think this gives me enough direction to do what I need it to.

Thanks!

[Joao]

That is great

Let us know if you need further help.

Joao

[Author]

Posts