sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Twenty Fourteen: better logic for featured image HTML output, and add fallback message for focusable anchor elements, for accessibility. Fixes #25325.

Browse Source 
git-svn-id: https://develop.svn.wordpress.org/trunk@25802 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Lance Willett 2013-10-15 23:23:08 +00:00
parent 867f084ca0
commit 2c88403c32
12 changed files with 52 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/wp-content/themes/twentyfourteen/content-aside.php
View File

@ -9,7 +9,7 @@
?> ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php twentyfourteen_featured_thumbnail(); ?> <?php twentyfourteen_post_thumbnail(); ?>
<header class="entry-header"> <header class="entry-header">
<?php if ( in_array( 'category', get_object_taxonomies( get_post_type() ) ) && twentyfourteen_categorized_blog() ) : ?> <?php if ( in_array( 'category', get_object_taxonomies( get_post_type() ) ) && twentyfourteen_categorized_blog() ) : ?>

6
src/wp-content/themes/twentyfourteen/content-gallery.php
View File

@ -25,12 +25,12 @@ endif;
?> ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if( is_single() && $image ) : ?> <?php if ( is_single() && $image ) : ?>
<div class="attachment-featured-thumbnail"> <div class="featured-thumbnail">
<?php echo wp_get_attachment_image( $image, 'featured-thumbnail-large' ); ?> <?php echo wp_get_attachment_image( $image, 'featured-thumbnail-large' ); ?>
</div> </div>
<?php elseif ( $image ) : ?> <?php elseif ( $image ) : ?>
<a class="attachment-featured-thumbnail" href="<?php the_permalink(); ?>" rel="<?php the_ID(); ?>"> <a class="featured-thumbnail" href="<?php the_permalink(); ?>" rel="<?php the_ID(); ?>">
<?php echo wp_get_attachment_image( $image, 'featured-thumbnail-large' ); ?> <?php echo wp_get_attachment_image( $image, 'featured-thumbnail-large' ); ?>
</a> </a>
<?php endif; ?> <?php endif; ?>

2
src/wp-content/themes/twentyfourteen/content-image.php
View File

@ -9,7 +9,7 @@
?> ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php twentyfourteen_featured_thumbnail(); ?> <?php twentyfourteen_post_thumbnail(); ?>
<header class="entry-header"> <header class="entry-header">
<?php if ( in_array( 'category', get_object_taxonomies( get_post_type() ) ) && twentyfourteen_categorized_blog() ) : ?> <?php if ( in_array( 'category', get_object_taxonomies( get_post_type() ) ) && twentyfourteen_categorized_blog() ) : ?>

2
src/wp-content/themes/twentyfourteen/content-link.php
View File

@ -9,7 +9,7 @@
?> ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php twentyfourteen_featured_thumbnail(); ?> <?php twentyfourteen_post_thumbnail(); ?>
<header class="entry-header"> <header class="entry-header">
<?php if ( in_array( 'category', get_object_taxonomies( get_post_type() ) ) && twentyfourteen_categorized_blog() ) : ?> <?php if ( in_array( 'category', get_object_taxonomies( get_post_type() ) ) && twentyfourteen_categorized_blog() ) : ?>

7
src/wp-content/themes/twentyfourteen/content-page.php
View File

@ -9,9 +9,10 @@
?> ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php twentyfourteen_featured_thumbnail(); ?> <?php
twentyfourteen_post_thumbnail();
<?php the_title( '<header class="entry-header"><h1 class="entry-title">', '</h1></header><!-- .entry-header -->' ); ?> the_title( '<header class="entry-header"><h1 class="entry-title">', '</h1></header><!-- .entry-header -->' );
?>
<div class="entry-content"> <div class="entry-content">
<?php <?php

2
src/wp-content/themes/twentyfourteen/content-quote.php
View File

@ -9,7 +9,7 @@
?> ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php twentyfourteen_featured_thumbnail(); ?> <?php twentyfourteen_post_thumbnail(); ?>
<header class="entry-header"> <header class="entry-header">
<?php if ( in_array( 'category', get_object_taxonomies( get_post_type() ) ) && twentyfourteen_categorized_blog() ) : ?> <?php if ( in_array( 'category', get_object_taxonomies( get_post_type() ) ) && twentyfourteen_categorized_blog() ) : ?>

2
src/wp-content/themes/twentyfourteen/content-video.php
View File

@ -9,7 +9,7 @@
?> ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php twentyfourteen_featured_thumbnail(); ?> <?php twentyfourteen_post_thumbnail(); ?>
<header class="entry-header"> <header class="entry-header">
<?php if ( in_array( 'category', get_object_taxonomies( get_post_type() ) ) && twentyfourteen_categorized_blog() ) : ?> <?php if ( in_array( 'category', get_object_taxonomies( get_post_type() ) ) && twentyfourteen_categorized_blog() ) : ?>

2
src/wp-content/themes/twentyfourteen/content.php
View File

@ -11,7 +11,7 @@
?> ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php twentyfourteen_featured_thumbnail(); ?> <?php twentyfourteen_post_thumbnail(); ?>
<header class="entry-header"> <header class="entry-header">
<?php if ( in_array( 'category', get_object_taxonomies( get_post_type() ) ) && twentyfourteen_categorized_blog() ) : ?> <?php if ( in_array( 'category', get_object_taxonomies( get_post_type() ) ) && twentyfourteen_categorized_blog() ) : ?>

37
src/wp-content/themes/twentyfourteen/inc/template-tags.php
View File

@ -155,26 +155,31 @@ add_action( 'edit_category', 'twentyfourteen_category_transient_flusher' );
add_action( 'save_post', 'twentyfourteen_category_transient_flusher' ); add_action( 'save_post', 'twentyfourteen_category_transient_flusher' );
/** /**
* Display featured image with appropriate HTML tag. * Displays an optional featured image, with an anchor element
* * when on index views, and a div element when on a single view.
* @since Twenty Fourteen 1.0
* *
* @return void * @return void
*/ */
function twentyfourteen_featured_thumbnail() { function twentyfourteen_post_thumbnail() {
if ( ! post_password_required() ) : if ( post_password_required() )
if ( has_post_thumbnail() && is_singular() ) : return;
if ( is_singular() ) :
?> ?>
<div class="attachment-featured-thumbnail">
<div class="featured-thumbnail">
<?php the_post_thumbnail( 'featured-thumbnail-large' ); ?> <?php the_post_thumbnail( 'featured-thumbnail-large' ); ?>
</div> </div>
<?php
else : <?php else : ?>
?>
<a href="<?php the_permalink(); ?>" rel="<?php the_ID(); ?>" class="attachment-featured-thumbnail"> <a class="featured-thumbnail" href="<?php the_permalink(); ?>" rel="<?php the_ID(); ?>">
<?php the_post_thumbnail( 'featured-thumbnail-large' ); ?> <?php if ( has_post_thumbnail() ) :
the_post_thumbnail( 'featured-thumbnail-large' );
else : ?>
<p class="screen-reader-text"><?php _e( 'No featured image.', 'twentyfourteen' ); ?></p>
<?php endif; ?>
</a> </a>
<?php
endif; <?php endif; // End is_singular()
endif;
} }

2
src/wp-content/themes/twentyfourteen/rtl.css
View File

@ -367,7 +367,7 @@ blockquote.alignleft {
/* Mobile list style */ /* Mobile list style */
@media screen and (max-width: 400px) { @media screen and (max-width: 400px) {
.list-view .attachment-featured-thumbnail img { .list-view .featured-thumbnail img {
float: right; float: right;
margin: 0 0 3px 10px; margin: 0 0 3px 10px;
} }

22
src/wp-content/themes/twentyfourteen/style.css
View File

@ -560,7 +560,7 @@ img.wp-post-image {
} }
.attachment-featured-featured img, .attachment-featured-featured img,
.attachment-featured-thumbnail img { .featured-thumbnail img {
height: auto; height: auto;
max-width: 100%; max-width: 100%;
} }
@ -1107,7 +1107,7 @@ span + .edit-link:before,
* ----------------------------------------------------------------------------- * -----------------------------------------------------------------------------
*/ */
.attachment-featured-thumbnail { .featured-thumbnail {
background: #767676; background: #767676;
background-attachment: fixed; background-attachment: fixed;
background-image: -webkit-linear-gradient(135deg, #767676 12.5%, #fff 12.5%, #fff 50%, #767676 50%, #767676 62.5%, #fff 62.5%); background-image: -webkit-linear-gradient(135deg, #767676 12.5%, #fff 12.5%, #fff 50%, #767676 50%, #767676 62.5%, #fff 62.5%);
@ -1123,7 +1123,7 @@ span + .edit-link:before,
z-index: 0; z-index: 0;
} }
.attachment-featured-thumbnail:hover { .featured-thumbnail:hover {
background: #919191; background: #919191;
background-attachment: fixed; background-attachment: fixed;
background-image: -webkit-linear-gradient(135deg, #919191 12.5%, #fff 12.5%, #fff 50%, #919191 50%, #919191 62.5%, #fff 62.5%); background-image: -webkit-linear-gradient(135deg, #919191 12.5%, #fff 12.5%, #fff 50%, #919191 50%, #919191 62.5%, #fff 62.5%);
@ -1131,13 +1131,13 @@ span + .edit-link:before,
background-size: 4px 4px; background-size: 4px 4px;
} }
.attachment-featured-thumbnail img { .featured-thumbnail img {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
} }
.has-featured-image .attachment-featured-thumbnail, .has-featured-image .featured-thumbnail,
.format-standard .attachment-featured-thumbnail { .format-standard .featured-thumbnail {
display: block; display: block;
} }
@ -2637,14 +2637,14 @@ span + .edit-link:before,
*/ */
@media screen and (max-width: 400px) { @media screen and (max-width: 400px) {
.list-view .attachment-featured-thumbnail { .list-view .featured-thumbnail {
background: none; background: none;
min-height: 0; min-height: 0;
width: auto; width: auto;
z-index: 2; z-index: 2;
} }
.list-view .attachment-featured-thumbnail img { .list-view .featured-thumbnail img {
float: left; float: left;
margin: 0 10px 3px 0; margin: 0 10px 3px 0;
width: 84px; width: 84px;
@ -2707,7 +2707,7 @@ span + .edit-link:before,
} }
@media screen and (min-width: 401px) { @media screen and (min-width: 401px) {
a.attachment-featured-thumbnail:hover img { a.featured-thumbnail:hover img {
opacity: 0.85; opacity: 0.85;
} }
@ -2809,8 +2809,8 @@ span + .edit-link:before,
margin: -3px 2px 0 0; margin: -3px 2px 0 0;
} }
.list-view .site-content .has-featured-image .attachment-featured-thumbnail, .list-view .site-content .has-featured-image .featured-thumbnail,
.list-view .site-content .format-standard .attachment-featured-thumbnail { .list-view .site-content .format-standard .featured-thumbnail {
margin-top: -49px; margin-top: -49px;
} }