WordPress.org

Make WordPress Core

Changeset 38868


Ignore:
Timestamp:
10/21/2016 10:14:26 PM (5 years ago)
Author:
davidakennedy
Message:

Twenty Seventeen: Display featured image on static front page

This improves UX, since an image added will be displayed on front end as opposed to not at all. This fix added the front page's featured image above the front page content, similar to how it's handled in the other panels. Also it removed code that was setting the front page's featured image as a fallback to the custom header, and updated the conditions that add the has-header-image to remove reference to the front page's featured image.

Props laurelfulford.

Fixes #38402.

Location:
trunk/src/wp-content/themes/twentyseventeen
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyseventeen/components/header/header-image.php

    r38833 r38868  
    2020        <?php get_template_part( 'components/header/site', 'branding' ); ?>
    2121
    22     <?php elseif ( twentyseventeen_is_frontpage() && has_post_thumbnail() ) :
    23         // If not, fall back to front page's featured image, only on the front page.
    24         $post_thumbnail_id = get_post_thumbnail_id( $post->ID );
    25         $thumbnail_attributes = wp_get_attachment_image_src( $post_thumbnail_id, 'twentyseventeen-featured-image' );
    26         ?>
    27 
    28         <div class="custom-header-image" style="background-image: url(<?php echo esc_url( $thumbnail_attributes[0] ); ?>)"></div>
    29         <?php get_template_part( 'components/header/site', 'branding' ); ?>
    30 
    3122    <?php else : ?>
    3223        <?php // Otherwise, show a blank header. ?>
  • trunk/src/wp-content/themes/twentyseventeen/components/page/content-front-page.php

    r38833 r38868  
    1111?>
    1212<article id="post-<?php the_ID(); ?>" <?php post_class( 'twentyseventeen-panel ' ); ?> >
     13
     14    <?php if ( has_post_thumbnail() ) :
     15        $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );
     16
     17        $post_thumbnail_id = get_post_thumbnail_id( $post->ID );
     18
     19        $thumbnail_attributes = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );
     20
     21        // Calculate aspect ratio: h / w * 100%.
     22        $ratio = $thumbnail_attributes[2] / $thumbnail_attributes[1] * 100;
     23        ?>
     24
     25        <div class="panel-image" style="background-image: url(<?php echo esc_url( $thumbnail[0] ); ?>);">
     26            <div class="panel-image-prop" style="padding-top: <?php echo esc_attr( $ratio ); ?>%"></div>
     27        </div><!-- .panel-image -->
     28
     29    <?php endif; ?>
    1330
    1431    <div class="panel-content">
  • trunk/src/wp-content/themes/twentyseventeen/inc/template-functions.php

    r38833 r38868  
    3535    }
    3636
    37     // Add a class if there is a featured image or custom header.
    38     if ( has_header_image() || ( has_post_thumbnail() && twentyseventeen_is_frontpage() ) ) {
     37    // Add a class if there is a custom header.
     38    if ( has_header_image() ) {
    3939        $classes[] = 'has-header-image';
    4040    }
Note: See TracChangeset for help on using the changeset viewer.