0

How to make post thumbnail full width above sidebar and content?

I am using bootstrap for a theme and have a single template named single-thumbnail-featured.php. On this post I need the thumbnail to be full width and the rest of the content and sidebar to be under it.

I have the following code to display the content in question:

<?php get_header(); ?> //Loads the header in which there is a container and a row divs

<div class="main-content col-md-8" role="main">
    <?php while (have_posts()) : the_post(); ?>
    <?php get_template_part( 'content', get_post_format() ); ?>
    <?php endwhile; ?>
</div>
<?php get_sidebar(); ?> // calls the sidebar which is inside a class col-md-4 div

Just wondering how to tweak this code to make the thumbnail is in content.php as in the code bellow to be full width and above the content and sidebar.

content.php code:

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

<header class="entry-header">
    <?php if ( is_single() ) : ?>
        <h1><?php the_title(); ?></h1>
    <?php else: ?>
         <h1><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
    <?php endif; ?>

    <?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
        <figure class="entry-thumbnail">
            <?php the_post_thumbnail( 'post-medium' ); ?>
        </figure>
    <?php endif; ?>
1

The easiest way would be to do away with the content.php file for this template and move everything to your single-thumbnail-featured.php so you don't mess up any other pages using content.php. Then I would simply move the_post_thumbnail() outside the col-md-8 into a full width col-md-12.

single-thumbnail-featured.php

//Loads the header in which there is a container and a row divs
<?php get_header(); ?>
<div class="col-md-12">
    <?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
        <figure class="entry-thumbnail">
            <?php the_post_thumbnail( 'post-medium' ); ?>
        </figure>
    <?php endif; ?>
</div>
<div class="main-content col-md-8" role="main">
    <?php while (have_posts()) : the_post(); ?>

        <?php /* Copy everything EXCEPT the_post_thumbnail() stuff from content.php here */ ?>

    <?php endwhile; ?>
</div>
// calls the sidebar which is inside a class col-md-4 div
<?php get_sidebar(); ?>
  • Thanks a lot for the eye opener. tiredness took over...:) – Madeirense Nov 24 '15 at 14:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.