<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><style type="text/css"><!--
#msg dl { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fc0 solid; padding: 6px; }
#msg ul, pre { overflow: auto; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<title>[15609] trunk/wp-content/themes/twentyten:
Fix image size handling in Twenty Ten.</title>
</head>
<body>
<div id="msg">
<dl>
<dt>Revision</dt> <dd><a href="http://trac.wordpress.org/changeset/15609">15609</a></dd>
<dt>Author</dt> <dd>nacin</dd>
<dt>Date</dt> <dd>2010-09-12 15:21:29 +0000 (Sun, 12 Sep 2010)</dd>
</dl>
<h3>Log Message</h3>
<pre>Fix image size handling in Twenty Ten. props lancewillett, iandstewart, see <a href="http://trac.wordpress.org/ticket/14303">#14303</a> for trunk.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkwpcontentthemestwentyteneditorstylecss">trunk/wp-content/themes/twentyten/editor-style.css</a></li>
<li><a href="#trunkwpcontentthemestwentytenstylecss">trunk/wp-content/themes/twentyten/style.css</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkwpcontentthemestwentyteneditorstylecss"></a>
<div class="modfile"><h4>Modified: trunk/wp-content/themes/twentyten/editor-style.css (15608 => 15609)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-content/themes/twentyten/editor-style.css 2010-09-10 23:24:34 UTC (rev 15608)
+++ trunk/wp-content/themes/twentyten/editor-style.css 2010-09-12 15:21:29 UTC (rev 15609)
</span><span class="lines">@@ -1,15 +1,13 @@
</span><span class="cx"> /*
</span><span class="cx"> Theme Name: Twenty Ten
</span><ins>+Description: Used to style the TinyMCE editor.
</ins><span class="cx"> */
</span><del>-/*
-Used to style the TinyMCE editor.
-*/
</del><span class="cx"> html .mceContentBody {
</span><del>- max-width:640px;
</del><ins>+ max-width: 640px;
</ins><span class="cx"> }
</span><span class="cx"> * {
</span><ins>+ color: #444;
</ins><span class="cx"> font-family: Georgia, "Bitstream Charter", serif;
</span><del>- color: #444;
</del><span class="cx"> line-height: 1.5;
</span><span class="cx"> }
</span><span class="cx"> p,
</span><span class="lines">@@ -40,10 +38,10 @@
</span><span class="cx"> }
</span><span class="cx"> hr {
</span><span class="cx"> background-color: #e7e7e7;
</span><del>- border:0;
</del><ins>+ border: 0;
+ clear: both;
</ins><span class="cx"> height: 1px;
</span><span class="cx"> margin-bottom: 18px;
</span><del>- clear:both;
</del><span class="cx"> }
</span><span class="cx"> /* Text elements */
</span><span class="cx"> p {
</span><span class="lines">@@ -58,22 +56,22 @@
</span><span class="cx"> margin: 0 0 18px 1.5em;
</span><span class="cx"> }
</span><span class="cx"> ol ol {
</span><del>- list-style:upper-alpha;
</del><ins>+ list-style: upper-alpha;
</ins><span class="cx"> }
</span><span class="cx"> ol ol ol {
</span><del>- list-style:lower-roman;
</del><ins>+ list-style: lower-roman;
</ins><span class="cx"> }
</span><span class="cx"> ol ol ol ol {
</span><del>- list-style:lower-alpha;
</del><ins>+ list-style: lower-alpha;
</ins><span class="cx"> }
</span><span class="cx"> ul ul,
</span><span class="cx"> ol ol,
</span><span class="cx"> ul ol,
</span><span class="cx"> ol ul {
</span><del>- margin-bottom:0;
</del><ins>+ margin-bottom: 0;
</ins><span class="cx"> }
</span><span class="cx"> dl {
</span><del>- margin:0 0 24px 0;
</del><ins>+ margin: 0 0 24px 0;
</ins><span class="cx"> }
</span><span class="cx"> dt {
</span><span class="cx"> font-weight: bold;
</span><span class="lines">@@ -82,20 +80,20 @@
</span><span class="cx"> margin-bottom: 18px;
</span><span class="cx"> }
</span><span class="cx"> strong {
</span><ins>+ color: #000;
</ins><span class="cx"> font-weight: bold;
</span><del>- color: #000;
</del><span class="cx"> }
</span><span class="cx"> cite,
</span><span class="cx"> em,
</span><span class="cx"> i {
</span><ins>+ border: none;
</ins><span class="cx"> font-style: italic;
</span><del>- border: none;
</del><span class="cx"> }
</span><span class="cx"> big {
</span><span class="cx"> font-size: 131.25%;
</span><span class="cx"> }
</span><span class="cx"> ins {
</span><del>- background: #ffffcc;
</del><ins>+ background: #ffc;
</ins><span class="cx"> border: none;
</span><span class="cx"> color: #333;
</span><span class="cx"> }
</span><span class="lines">@@ -129,11 +127,11 @@
</span><span class="cx"> }
</span><span class="cx"> sup,
</span><span class="cx"> sub {
</span><ins>+ font-size: 10px;
</ins><span class="cx"> height: 0;
</span><span class="cx"> line-height: 1;
</span><ins>+ position: relative;
</ins><span class="cx"> vertical-align: baseline;
</span><del>- position: relative;
- font-size: 10px;
</del><span class="cx"> }
</span><span class="cx"> sup {
</span><span class="cx"> bottom: 1ex;
</span><span class="lines">@@ -142,10 +140,10 @@
</span><span class="cx"> top: .5ex;
</span><span class="cx"> }
</span><span class="cx"> a:link {
</span><del>- color:#0066cc;
</del><ins>+ color: #06c;
</ins><span class="cx"> }
</span><span class="cx"> a:visited {
</span><del>- color:#743399;
</del><ins>+ color: #743399;
</ins><span class="cx"> }
</span><span class="cx"> a:active,
</span><span class="cx"> a:hover {
</span><span class="lines">@@ -157,13 +155,13 @@
</span><span class="cx"> dd,
</span><span class="cx"> pre,
</span><span class="cx"> hr {
</span><del>- margin-bottom:24px;
</del><ins>+ margin-bottom: 24px;
</ins><span class="cx"> }
</span><span class="cx"> ul ul,
</span><span class="cx"> ol ol,
</span><span class="cx"> ul ol,
</span><span class="cx"> ol ul {
</span><del>- margin-bottom:0;
</del><ins>+ margin-bottom: 0;
</ins><span class="cx"> }
</span><span class="cx"> pre,
</span><span class="cx"> kbd,
</span><span class="lines">@@ -188,9 +186,9 @@
</span><span class="cx"> h5,
</span><span class="cx"> h6 {
</span><span class="cx"> color: #000;
</span><ins>+ font-weight: normal;
+ line-height: 1.5em;
</ins><span class="cx"> margin: 0 0 20px 0;
</span><del>- line-height: 1.5em;
- font-weight: normal;
</del><span class="cx"> }
</span><span class="cx"> h1 {
</span><span class="cx"> font-size: 2.4em;
</span><span class="lines">@@ -212,11 +210,11 @@
</span><span class="cx"> }
</span><span class="cx"> table {
</span><span class="cx"> border: 1px solid #e7e7e7 !important;
</span><ins>+ border-collapse: collapse;
+ border-spacing: 0;
+ margin: 0 -1px 24px 0;
</ins><span class="cx"> text-align: left;
</span><del>- margin: 0 -1px 24px 0;
</del><span class="cx"> width: 100%;
</span><del>- border-collapse: collapse;
- border-spacing: 0;
</del><span class="cx"> }
</span><span class="cx"> tr th,
</span><span class="cx"> thead th {
</span><span class="lines">@@ -232,12 +230,16 @@
</span><span class="cx"> border-top: 1px solid #e7e7e7 !important;
</span><span class="cx"> padding: 6px 24px;
</span><span class="cx"> }
</span><del>-
-
</del><span class="cx"> img {
</span><span class="cx"> margin: 0;
</span><del>- max-width: 640px;
</del><span class="cx"> }
</span><ins>+img.size-auto,
+img.size-large,
+img.size-full,
+img.size-medium {
+ max-width: 100%;
+ height: auto;
+}
</ins><span class="cx"> .alignleft,
</span><span class="cx"> img.alignleft {
</span><span class="cx"> display: inline;
</span><span class="lines">@@ -265,18 +267,19 @@
</span><span class="cx"> margin-bottom: 12px;
</span><span class="cx"> }
</span><span class="cx"> .wp-caption {
</span><ins>+ background: #f1f1f1;
</ins><span class="cx"> border: none;
</span><del>- background: #f1f1f1;
</del><ins>+ -khtml-border-radius: 0;
+ -moz-border-radius: 0;
+ -webkit-border-radius: 0;
+ border-radius: 0;
</ins><span class="cx"> color: #888;
</span><span class="cx"> font-size: 12px;
</span><span class="cx"> line-height: 18px;
</span><del>- text-align: center;
</del><span class="cx"> margin-bottom: 20px;
</span><ins>+ max-width: 632px !important; /* prevent too-wide images from breaking layout */
</ins><span class="cx"> padding: 4px;
</span><del>- -moz-border-radius: 0;
- -khtml-border-radius: 0;
- -webkit-border-radius: 0;
- border-radius: 0;
</del><ins>+ text-align: center;
</ins><span class="cx"> }
</span><span class="cx"> .wp-caption img {
</span><span class="cx"> margin: 5px;
</span><span class="lines">@@ -285,5 +288,5 @@
</span><span class="cx"> margin: 0 0 4px;
</span><span class="cx"> }
</span><span class="cx"> .wp-smiley {
</span><del>- margin:0;
</del><ins>+ margin: 0;
</ins><span class="cx"> }
</span><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkwpcontentthemestwentytenstylecss"></a>
<div class="modfile"><h4>Modified: trunk/wp-content/themes/twentyten/style.css (15608 => 15609)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-content/themes/twentyten/style.css 2010-09-10 23:24:34 UTC (rev 15608)
+++ trunk/wp-content/themes/twentyten/style.css 2010-09-12 15:21:29 UTC (rev 15609)
</span><span class="lines">@@ -4,7 +4,7 @@
</span><span class="cx"> Description: The 2010 theme for WordPress is stylish, customizable, simple, and readable -- make it yours with a custom menu, header image, and background. Twenty Ten supports six widgetized areas (two in the sidebar, four in the footer) and featured images (thumbnails for gallery posts and custom header images for posts and pages). It includes stylesheets for print and the admin Visual Editor, special styles for posts in the "Asides" and "Gallery" categories, and has an optional one-column page template that removes the sidebar.
</span><span class="cx"> Author: the WordPress team
</span><span class="cx"> Version: 1.1
</span><del>-Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style
</del><ins>+Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu
</ins><span class="cx"> */
</span><span class="cx">
</span><span class="cx">
</span><span class="lines">@@ -761,86 +761,91 @@
</span><span class="cx"> /* =Images
</span><span class="cx"> -------------------------------------------------------------- */
</span><span class="cx">
</span><del>-#content img {
- margin: 0;
- height: auto;
- max-width: 640px;
- width: auto;
</del><ins>+/*
+Resize images to fit the main content area.
+- Applies only to images uploaded via WordPress by targeting size-* classes.
+- Other images will be left alone. Use "size-auto" class to apply to other images.
+*/
+img.size-auto,
+img.size-full,
+img.size-large,
+img.size-medium,
+.attachment img {
+ max-width: 100%; /* When images are too wide for containing element, force them to fit. */
+ height: auto; /* Override height to match resized width for correct aspect ratio. */
</ins><span class="cx"> }
</span><del>-#content .attachment img {
- max-width: 900px;
-}
-#content .alignleft,
-#content img.alignleft {
</del><ins>+.alignleft,
+img.alignleft {
</ins><span class="cx"> display: inline;
</span><span class="cx"> float: left;
</span><span class="cx"> margin-right: 24px;
</span><span class="cx"> margin-top: 4px;
</span><span class="cx"> }
</span><del>-#content .alignright,
-#content img.alignright {
</del><ins>+.alignright,
+img.alignright {
</ins><span class="cx"> display: inline;
</span><span class="cx"> float: right;
</span><span class="cx"> margin-left: 24px;
</span><span class="cx"> margin-top: 4px;
</span><span class="cx"> }
</span><del>-#content .aligncenter,
-#content img.aligncenter {
</del><ins>+.aligncenter,
+img.aligncenter {
</ins><span class="cx"> clear: both;
</span><span class="cx"> display: block;
</span><span class="cx"> margin-left: auto;
</span><span class="cx"> margin-right: auto;
</span><span class="cx"> }
</span><del>-#content img.alignleft,
-#content img.alignright,
-#content img.aligncenter {
</del><ins>+img.alignleft,
+img.alignright,
+img.aligncenter {
</ins><span class="cx"> margin-bottom: 12px;
</span><span class="cx"> }
</span><del>-#content .wp-caption {
</del><ins>+.wp-caption {
</ins><span class="cx"> background: #f1f1f1;
</span><span class="cx"> line-height: 18px;
</span><span class="cx"> margin-bottom: 20px;
</span><ins>+ max-width: 632px !important; /* prevent too-wide images from breaking layout */
</ins><span class="cx"> padding: 4px;
</span><span class="cx"> text-align: center;
</span><span class="cx"> }
</span><del>-#content .wp-caption img {
</del><ins>+.wp-caption img {
</ins><span class="cx"> margin: 5px 5px 0;
</span><span class="cx"> }
</span><del>-#content .wp-caption p.wp-caption-text {
</del><ins>+.wp-caption p.wp-caption-text {
</ins><span class="cx"> color: #888;
</span><span class="cx"> font-size: 12px;
</span><span class="cx"> margin: 5px;
</span><span class="cx"> }
</span><del>-#content .wp-smiley {
</del><ins>+.wp-smiley {
</ins><span class="cx"> margin: 0;
</span><span class="cx"> }
</span><del>-#content .gallery {
</del><ins>+.gallery {
</ins><span class="cx"> margin: 0 auto 18px;
</span><span class="cx"> }
</span><del>-#content .gallery .gallery-item {
</del><ins>+.gallery .gallery-item {
</ins><span class="cx"> float: left;
</span><span class="cx"> margin-top: 0;
</span><span class="cx"> text-align: center;
</span><span class="cx"> width: 33%;
</span><span class="cx"> }
</span><del>-#content .gallery img {
</del><ins>+.gallery img {
</ins><span class="cx"> border: 2px solid #cfcfcf;
</span><span class="cx"> }
</span><del>-#content .gallery .gallery-caption {
</del><ins>+.gallery .gallery-caption {
</ins><span class="cx"> color: #888;
</span><span class="cx"> font-size: 12px;
</span><span class="cx"> margin: 0 0 12px;
</span><span class="cx"> }
</span><del>-#content .gallery dl {
</del><ins>+.gallery dl {
</ins><span class="cx"> margin: 0;
</span><span class="cx"> }
</span><del>-#content .gallery img {
</del><ins>+.gallery img {
</ins><span class="cx"> border: 10px solid #f1f1f1;
</span><span class="cx"> }
</span><del>-#content .gallery br+br {
</del><ins>+.gallery br+br {
</ins><span class="cx"> display: none;
</span><span class="cx"> }
</span><del>-#content .attachment img { /* single attachment images should be centered */
</del><ins>+#content .attachment img {/* single attachment images should be centered */
</ins><span class="cx"> display: block;
</span><span class="cx"> margin: 0 auto;
</span><span class="cx"> }
</span></span></pre>
</div>
</div>
</body>
</html>