Style the single image attachment page

jentanbernardus · Jun 25, 2012 · 8e9799c · 8e9799c
1 parent 8a67a3d
commit 8e9799c
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 9 deletions.
diff --git a/source/assets/stylesheets/_patterns.scss b/source/assets/stylesheets/_patterns.scss
@@ -155,17 +155,18 @@ img[class*="wp-image-"],
 .paged #nav-above {
 	display: block;
 }
-.nav-previous {
+.nav-previous,
+.previous-image {
 	float: left;
 	width: 50%;
 }
-.nav-next {
+.nav-next,
+.next-image {
 	float: right;
 	text-align: right;
 	width: 50%;
 }
 
-
 /*---------------------------------------------------------
 	Author profiles
 ------------------------------------------------------------ */

diff --git a/source/assets/stylesheets/_scaffolding.scss b/source/assets/stylesheets/_scaffolding.scss
@@ -57,7 +57,8 @@ body.custom-background #page {
 }
 @media screen and (min-width: 600px) {
 	body.page-template-full-width-page-php #primary,
-	body.page-template-homepage-php #primary {
+	body.page-template-homepage-php #primary,
+	body.single-attachment #primary {
 		width: 100%;
 	}
 }

diff --git a/source/assets/stylesheets/_view_attachment.scss b/source/assets/stylesheets/_view_attachment.scss
@@ -0,0 +1,17 @@
+/* attachment.css.scss
+ * Styling for the single image attachment view
+ * ------------------------------------------------------------------ */
+
+.image-attachment div.attachment {
+	overflow: hidden;
+	text-align: center;
+}
+.image-attachment div.attachment img {
+	display: block;
+	height: auto;
+	margin: 0 auto;
+	max-width: 100%;
+}
+.image-attachment .entry-caption {
+	@include rem('margin-top', $vbase/3);
+}
diff --git a/source/assets/stylesheets/style.css.scss b/source/assets/stylesheets/style.css.scss
@@ -7,6 +7,7 @@
 @import "scaffolding";
 @import "view_index";
 @import "view_archive";
+@import "view_attachment";
 @import "view_content-aside";
 @import "view_content-image";
 @import "view_content-link";

diff --git a/source/functions/functions.php b/source/functions/functions.php
@@ -315,10 +315,10 @@ function twentytwelve_body_class( $classes ) {
 add_filter( 'body_class', 'twentytwelve_body_class' );
 
 /**
- * Adjust $content width for full-width template.
+ * Adjust $content width for full-width and single image attachment templates.
  */
 function twentytwelve_content_width() {
-	if ( is_page_template( 'full-width-page.php' ) ) {
+	if ( is_page_template( 'full-width-page.php' ) || is_attachment() ) {
 		global $content_width;
 		$content_width = 960;
 	}

diff --git a/source/templates/image.php b/source/templates/image.php
@@ -18,7 +18,7 @@
 					<header class="entry-header">
 						<h1 class="entry-title"><?php the_title(); ?></h1>
 
-						<div class="entry-meta">
+						<footer class="entry-meta">
 							<?php
 								$metadata = wp_get_attachment_metadata();
 								printf( __( '<span class="meta-prep meta-prep-entry-date">Published </span> <span class="entry-date"><time class="entry-date" datetime="%1$s" pubdate>%2$s</time></span> at <a href="%3$s" title="Link to full-size image">%4$s &times; %5$s</a> in <a href="%6$s" title="Return to %7$s" rel="gallery">%8$s</a>', 'twentytwelve' ),
@@ -33,7 +33,7 @@
 								);
 							?>
 							<?php edit_post_link( __( 'Edit', 'twentytwelve' ), '<span class="edit-link">', '</span>' ); ?>
-						</div><!-- .entry-meta -->
+						</footer><!-- .entry-meta -->
 
 						<nav id="image-navigation" role="navigation">
 							<span class="previous-image"><?php previous_image_link( false, __( '&larr; Previous', 'twentytwelve' ) ); ?></span>
@@ -70,7 +70,7 @@
 }
 ?>
 								<a href="<?php echo esc_url( $next_attachment_url ); ?>" title="<?php the_title_attribute(); ?>" rel="attachment"><?php
-								$attachment_size = apply_filters( 'twentytwelve_attachment_size', array( 800, 800 ) );
+								$attachment_size = apply_filters( 'twentytwelve_attachment_size', array( 960, 960 ) );
 								echo wp_get_attachment_image( $post->ID, $attachment_size );
 								?></a>