<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[38868] trunk/src/wp-content/themes/twentyseventeen: Twenty Seventeen: Display featured image on static front page</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/38868">38868</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/38868","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>davidakennedy</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2016-10-21 22:14:26 +0000 (Fri, 21 Oct 2016)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>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 <a href="https://core.trac.wordpress.org/ticket/38402">#38402</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpcontentthemestwentyseventeencomponentsheaderheaderimagephp">trunk/src/wp-content/themes/twentyseventeen/components/header/header-image.php</a></li>
<li><a href="#trunksrcwpcontentthemestwentyseventeencomponentspagecontentfrontpagephp">trunk/src/wp-content/themes/twentyseventeen/components/page/content-front-page.php</a></li>
<li><a href="#trunksrcwpcontentthemestwentyseventeeninctemplatefunctionsphp">trunk/src/wp-content/themes/twentyseventeen/inc/template-functions.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpcontentthemestwentyseventeencomponentsheaderheaderimagephp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentyseventeen/components/header/header-image.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentyseventeen/components/header/header-image.php 2016-10-21 21:47:15 UTC (rev 38867)
+++ trunk/src/wp-content/themes/twentyseventeen/components/header/header-image.php 2016-10-21 22:14:26 UTC (rev 38868)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -19,15 +19,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="custom-header-image" style="background-image: url(<?php echo esc_url( $header_image ); ?>)"></div>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php get_template_part( 'components/header/site', 'branding' ); ?>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <?php elseif ( twentyseventeen_is_frontpage() && has_post_thumbnail() ) :
- // If not, fall back to front page's featured image, only on the front page.
- $post_thumbnail_id = get_post_thumbnail_id( $post->ID );
- $thumbnail_attributes = wp_get_attachment_image_src( $post_thumbnail_id, 'twentyseventeen-featured-image' );
- ?>
-
- <div class="custom-header-image" style="background-image: url(<?php echo esc_url( $thumbnail_attributes[0] ); ?>)"></div>
- <?php get_template_part( 'components/header/site', 'branding' ); ?>
-
</del><span class="cx" style="display: block; padding: 0 10px"> <?php else : ?>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php // Otherwise, show a blank header. ?>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="custom-header-simple">
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentyseventeencomponentspagecontentfrontpagephp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentyseventeen/components/page/content-front-page.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentyseventeen/components/page/content-front-page.php 2016-10-21 21:47:15 UTC (rev 38867)
+++ trunk/src/wp-content/themes/twentyseventeen/components/page/content-front-page.php 2016-10-21 22:14:26 UTC (rev 38868)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11,6 +11,23 @@
</span><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><span class="cx" style="display: block; padding: 0 10px"> <article id="post-<?php the_ID(); ?>" <?php post_class( 'twentyseventeen-panel ' ); ?> >
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php if ( has_post_thumbnail() ) :
+ $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );
+
+ $post_thumbnail_id = get_post_thumbnail_id( $post->ID );
+
+ $thumbnail_attributes = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );
+
+ // Calculate aspect ratio: h / w * 100%.
+ $ratio = $thumbnail_attributes[2] / $thumbnail_attributes[1] * 100;
+ ?>
+
+ <div class="panel-image" style="background-image: url(<?php echo esc_url( $thumbnail[0] ); ?>);">
+ <div class="panel-image-prop" style="padding-top: <?php echo esc_attr( $ratio ); ?>%"></div>
+ </div><!-- .panel-image -->
+
+ <?php endif; ?>
+
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="panel-content">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="wrap">
</span><span class="cx" style="display: block; padding: 0 10px"> <header class="entry-header">
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentyseventeeninctemplatefunctionsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentyseventeen/inc/template-functions.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentyseventeen/inc/template-functions.php 2016-10-21 21:47:15 UTC (rev 38867)
+++ trunk/src/wp-content/themes/twentyseventeen/inc/template-functions.php 2016-10-21 22:14:26 UTC (rev 38868)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -34,8 +34,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $classes[] = 'twentyseventeen-front-page';
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Add a class if there is a featured image or custom header.
- if ( has_header_image() || ( has_post_thumbnail() && twentyseventeen_is_frontpage() ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Add a class if there is a custom header.
+ if ( has_header_image() ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> $classes[] = 'has-header-image';
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre>
</div>
</div>
</body>
</html>