Changeset 23839

Timestamp:

03/28/2013 07:02:51 AM (12 years ago)

Author:

lancewillett

Message:

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.

Location:

trunk/wp-content/themes/twentythirteen

Files:

• content-image.php (modified) (1 diff)
• content-video.php (modified) (1 diff)
• functions.php (modified) (2 diffs)
• style.css (modified) (5 diffs)

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

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

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

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

trunk/wp-content/themes/twentythirteen/functions.php

@@ -100 +100 @@
     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.
@@ -528 +531 @@
  */
 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;

trunk/wp-content/themes/twentythirteen/style.css

@@ -1410 +1410 @@
  */
 
+.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 {
@@ -1471 +1487 @@
 
 .format-audio .entry-media {
-    margin: 0 auto 24px;
     max-width: 604px;
-    width: 100%;
 }
 
@@ -1659 +1673 @@
     font-size: 28px;
     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;
 }
 
@@ -1862 +1843 @@
 
 .format-video .entry-content a,
-.single-format-video .entry-content a,
-.format-video .entry-meta a {
-    color: #fbfaf3;
-}
-
+.format-video .entry-meta a,
 .format-video .entry-content a:hover,
 .format-video .entry-meta a:hover {
-    color: #ea9629;
+    color: #fbfaf3;
 }
 
@@ -1875 +1852 @@
     font-size: 50px;
     font-weight: 400;
-}
-
-.format-video .entry-header {
-    max-width: 724px;
 }