Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Revamp image styling

  • Loading branch information...
commit 804ddc940695aac4a791d179635a2b17f8b152f7 1 parent 67ba4d1
@obenland authored
Showing with 58 additions and 48 deletions.
  1. +48 −1 functions.php
  2. +4 −1 image.php
  3. +6 −46 style.css
View
49 functions.php
@@ -999,7 +999,7 @@ function the_bootstrap_img_caption_shortcode( $empty, $attr, $content ) {
}
return '<figure ' . $id . 'class="wp-caption thumbnail ' . $align . '" style="width: '.$width.'px;">
- ' . do_shortcode( $content ) . '
+ ' . do_shortcode( str_replace( 'class="thumbnail', 'class="', $content ) ) . '
<figcaption class="wp-caption-text">' . $caption . '</figcaption>
</figure>';
}
@@ -1048,6 +1048,53 @@ function the_bootstrap_widget_categories_dropdown_args( $args ) {
/**
+ * Adds the .thumbnail class when images are sent to editor
+ *
+ * @author Konstantin Obenland
+ * @since 2.0.0 - 29.08.2012
+ *
+ * @param string $html
+ * @param int $id
+ * @param string $caption
+ * @param string $title
+ * @param string $align
+ * @param string $url
+ * @param string $size
+ * @param string $alt
+ *
+ * @return string Image HTML
+ */
+function the_bootstrap_image_send_to_editor( $html, $id, $caption, $title, $align, $url, $size, $alt ) {
+ if ( $url ) {
+ $html = str_replace( '<a ', '<a class="thumbnail" ', $html );
+ } else {
+ $html = str_replace( 'class="', 'class="thumbnail ', $html );
+ }
+
+ return $html;
+}
+add_filter( 'image_send_to_editor', 'the_bootstrap_image_send_to_editor', 10, 8 );
+
+
+/**
+ * Adjusts content_width value for full-width and single image attachment
+ * templates, and when there are no active widgets in the sidebar.
+ *
+ * @author WordPress.org
+ * @since 2.0.0 - 29.08.2012
+ *
+ * @return void
+ */
+function the_bootstrap_content_width() {
+ if ( is_attachment() ) {
+ global $content_width;
+ $content_width = 940;
+ }
+}
+add_action( 'template_redirect', 'the_bootstrap_content_width' );
+
+
+/**
* Returns the Theme version string
*
* @author Konstantin Obenland
View
5 image.php
@@ -82,8 +82,11 @@
// or, if there's only 1 image, get the URL of the image
$next_attachment_url = wp_get_attachment_url();
}
+
+ list( $src, $width, $height ) = wp_get_attachment_image_src( $post->ID, 'full' );
+ $link_class = ( $GLOBALS['content_width'] > $width ) ? ' attachment-table' : '';
?>
- <a href="<?php echo $next_attachment_url; ?>" title="<?php the_title_attribute(); ?>" rel="attachment" class="thumbnail">
+ <a href="<?php echo $next_attachment_url; ?>" title="<?php the_title_attribute(); ?>" rel="attachment" class="thumbnail<?php echo $link_class; ?>">
<?php echo wp_get_attachment_image( $post->ID, 'full' ); ?>
</a>
View
52 style.css
@@ -129,11 +129,6 @@ article.page {
font-size: inherit;
}
-.entry-attachment figure {
- display: table;
- margin: 0 auto;
-}
-
.entry-content .twitter-tweet-rendered {
max-width: 100% !important;
}
@@ -185,10 +180,6 @@ article.page {
word-wrap: break-word;
}
-.widget img {
- height: auto;
-}
-
.widget .wp-caption {
display: inline-block;
}
@@ -201,24 +192,13 @@ article.page {
margin: 0 20px 20px 0;
}
-.thumbnail > img {
- width: 100%;
- width: auto\9; /* Cure IE8 max-width bug */
-}
-
-header img,
-.entry-content img,
-.comment-content img,
-.widget img {
- max-width: 100%; /* Fluid images for posts, comments, and widgets */
+.entry-attachment .thumbnail.attachment-table {
+ display: table;
+ margin: 0 auto;
}
-header img,
-img[class*="align"],
-img[class*="wp-image-"],
-img[class*="attachment-"],
-img[class*="avatar"] {
- height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
+.thumbnail > img {
+ width: auto\9; /* Cure IE8 max-width bug */
}
img.wp-smiley {
@@ -323,11 +303,7 @@ table .label {
/* =WordPress Core
-------------------------------------------------------------- */
-.alignnone {
- margin: 5px 20px 20px 0;
-}
-
-.aligncenter, div.aligncenter {
+.aligncenter {
display:block;
margin: 0 auto 20px;
}
@@ -342,18 +318,6 @@ table .label {
margin: 0 20px 20px 0;
}
-a img.alignright {
- margin: 5px 0 20px 20px;
-}
-
-a img.alignnone {
- margin: 5px 20px 20px 0;
-}
-
-a img.alignleft {
- margin: 5px 20px 20px 0;
-}
-
.wp-caption {
max-width: 100%;
}
@@ -381,10 +345,6 @@ a img.alignleft {
margin: 5px 0 20px 20px;
}
-.wp-caption.aligncenter {
- text-align: center;
-}
-
.sticky {}
.bypostauthor {}
Please sign in to comment.
Something went wrong with that request. Please try again.