Twenty Thirteen: improvements to Image post format handling to use a custom image size instead of filtering a $content_width variable.

Includes CSS cleanup and markup improvements to both video and image templates, moving the media HTML piece out of the `header` element.

Props obenland, closes #23620.

git-svn-id: http://core.svn.wordpress.org/trunk@23839 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-content/themes/twentythirteen/content-image.php

@@ -9,11 +9,11 @@
 ?>
 
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
-	<header class="entry-header">
 	<div class="entry-media">
-			<?php the_image(); ?>
+		<?php the_image( 'twentythirteen-image-post-format' ); ?>
-		</div>
+	</div><!-- .entry-media -->
 
+	<header class="entry-header">
 		<?php if ( is_single() ) : ?>
 		<h1 class="entry-title"><?php the_title(); ?></h1>
 		<?php else : ?>

wp-content/themes/twentythirteen/content-video.php

@@ -9,11 +9,11 @@
 ?>
 
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
-	<header class="entry-header">
 	<div class="entry-media">
 		<?php the_video(); ?>
-		</div>
+	</div><!-- .entry-media -->
 
+	<header class="entry-header">
 		<?php if ( is_single() ) : ?>
 		<h1 class="entry-title"><?php the_title(); ?></h1>
 		<?php else : ?>

wp-content/themes/twentythirteen/functions.php

@@ -100,6 +100,9 @@ function twentythirteen_setup() {
 	add_theme_support( 'post-thumbnails' );
 	set_post_thumbnail_size( 604, 270, true );
 
+	// Register custom image size for image post formats.
+	add_image_size( 'twentythirteen-image-post-format', 724, 1288 );
+
 	// This theme uses its own gallery styles.
 	add_filter( 'use_default_gallery_style', '__return_false' );
 }
@@ -527,7 +530,7 @@ add_filter( 'comment_class', 'twentythirteen_comment_class' );
  * @since Twenty Thirteen 1.0
  */
 function twentythirteen_content_width() {
-	if ( has_post_format( 'image' ) || has_post_format( 'video' ) || is_attachment() ) {
+	if ( has_post_format( 'video' ) || is_attachment() ) {
 		global $content_width;
 		$content_width = 724;
 	}

wp-content/themes/twentythirteen/style.css

@@ -1409,6 +1409,22 @@ footer.entry-meta {
  * ----------------------------------------------------------------------------
  */
 
+.entry-media {
+	margin: 0 auto 24px;
+	max-width: 724px;
+	width: 100%;
+}
+
+.sidebar .entry-media {
+	max-width: 1040px;
+	padding: 0 316px 0 0;
+}
+.entry-media > * {
+	display: block;
+	margin: 0 auto;
+	max-width: 100%;
+}
+
 /* Aside */
 .format-aside {
 	background-color: #f7f5e7;
@@ -1470,9 +1486,7 @@ footer.entry-meta {
 }
 
 .format-audio .entry-media {
-	margin: 0 auto 24px;
 	max-width: 604px;
-	width: 100%;
 }
 
 .format-audio .entry-media:before {
@@ -1660,39 +1674,6 @@ footer.entry-meta {
 	font-weight: bold;
 }
 
-.format-image .entry-header {
-	max-width: 724px;
-}
-
-.format-image .entry-header img {
-	height: auto;
-	max-width: 724px;
-}
-
-.format-image .entry-content .size-full {
-	margin: 0 -60px;
-	max-width: 724px;
-}
-
-.format-image .wp-caption {
-	margin: 0 auto;
-	text-align: center;
-}
-
-.format-image .wp-caption-text {
-	padding: 0 5px;
-	text-align: left;
-}
-
-.format-image .wp-caption.alignleft:first-of-type,
-.format-image .wp-caption.alignright:first-of-type {
-	margin: 0;
-}
-
-.format-image p:last-child {
-	margin: 0;
-}
-
 .format-image .categories-links,
 .format-image .tags-links {
 	display: none;
@@ -1861,14 +1842,10 @@ footer.entry-meta {
 }
 
 .format-video .entry-content a,
-.single-format-video .entry-content a,
+.format-video .entry-meta a,
-.format-video .entry-meta a {
-	color: #fbfaf3;
-}
-
 .format-video .entry-content a:hover,
 .format-video .entry-meta a:hover {
-	color: #ea9629;
+	color: #fbfaf3;
 }
 
 .format-video .entry-title {
@@ -1876,10 +1853,6 @@ footer.entry-meta {
 	font-weight: 400;
 }
 
-.format-video .entry-header {
-	max-width: 724px;
-}
-
 .format-video .entry-meta {
 	color: #220e10;
 }