Change display of featured image for pages in twenty seventeen theme

Question

Using the theme Twenty Seventeen, with a two column layout I would like featured images to go underneath the header on the left hand side column. This stops there being two consecutive large images that require lots of scrolling.

How does one change the location of the featured image in the Twenty Seventeen theme?

I've created a child theme with amendments to the CSS etc but I'm struggling to identify how one changes this aspect of the theme. I think the relevant files are:

• content-front-page.php : this seems a bit easier to modify as it has a clear CSS class assignment for the image
• content-page.php : this has no references to the image
• style.css : relevant bits would be overridden in my child theme's style.css

---

PS I don't have the rep to add a theme-twenty-seventeen tag, could someone create it and add it (requires 300 rep)

Answer 1

You are struggling with wrong files. You can find post files in theme-folder/template-parts/post/content.php file.

You'll find this code you can add your classes or whatever in your child theme.

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php
    if ( is_sticky() && is_home() ) :
        echo twentyseventeen_get_svg( array( 'icon' => 'thumb-tack' ) );
    endif;
?>
<header class="entry-header">
    <?php
        if ( 'post' === get_post_type() ) :
            echo '<div class="entry-meta">';
                if ( is_single() ) :
                    twentyseventeen_posted_on();
                else :
                    echo twentyseventeen_time_link();
                    twentyseventeen_edit_link();
                endif;
            echo '</div><!-- .entry-meta -->';
        endif;

        if ( is_single() ) {
            the_title( '<h1 class="entry-title">', '</h1>' );
        } else {
            the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
        }
    ?>
</header><!-- .entry-header -->

<?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?>
   <!-- post thumbnail code -->
    <div class="post-thumbnail">
        <a href="<?php the_permalink(); ?>">
            <?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
        </a>
    </div><!-- .post-thumbnail -->
<?php endif; ?>

thumbnail section mentioned in html comments.