Need help? Check out our Support site, then


Why are images tagged "size-medium" in CSS displaying at full size?

  1. On September 20, I noticed that suddenly many images on my blog were suddenly displaying too large. In some cases they were displayed at several times the size at which I'd set them. Images previously paired side-by-side at equal heights, for example, were now alligned vertically (one on top of the other) with the size of one or both enlarged. This issue appears to be affecting all posts and pages on the site containing images which have not had the default size tags, created when inserting media, removed from the CSS class line of the image editor advanced settings module.

    I'd previously noted that for many months, perhaps a year or so, images marked "size-full" in the CSS line of the image editor > advanced settings module were displaying at full size no matter what dimensions I entered into the width and height boxes of the module. This was troublesome because my practice is to typically alter the dimensions of uploaded images from the default sizes. This is particularly necessary when pairing two images side-by-side as I often do (I also create rows of three images or more on occasion). I'd been aware of that issue for some time and had it under control by always removing the "size-full" tags which would sometimes appear by default. I'd intended to inquire about the default CSS size tagging, but it wasn't urgent, just a nagging inconvenience.

    On September 20, on my first visit of the day to the site, I notice that suddenly (The problem wasn't present on the 19th.) half of my images on the front page are displaying too large, in some cases several times the size at which I had set them, and in one instance ten or twenty times the set size. Investigation of these images soon revealed that all of the expanded images, those displaying larger than the width and height settings, included a "size-medium" tag in the CSS line of advanced settings. The issue is likely affecting thousands of images on my site. It would take me dozens of hours to go through the entire site and remove all of the default CSS tags of "size-medium". Most if not all of the default "size-full" tags have alreadly been removed painstakingly over a series of months.

    Two questions:

    1. Why must any size tag be inserted into the CSS class line of the image editor advanced settings module by default? For those like myself who like to modify the sizes freely and frequently, and seldom use the default size options, this demands that we remove the size tags from each uploaded image, at least those marked "size-full" or "size-medium".

    2. Why would those images with "size-medium" tags in the CSS line of the image editor advance settings module display at full size? And why did they suddenly begin to do so on September 20?

    The blog I need help with is songbook1.wordpress.com.

  2. Searching the forums "image size changes" before creating a new thread actually works. i found these:

    Staff posted a quick explanation of changes and some possible short term solutions at http://en.forums.wordpress.com/topic/photos-have-become-small-and-off-centered?replies=18#post-1448135

    See also the sticky post at the head of the forums > http://en.forums.wordpress.com/topic/images-resizing?replies=1

  3. I had it under control by always removing the "size-full" tags which would sometimes appear by default.

    Images where you removed "size-full" shouldn't be getting resized based on the recent image resizing change.

    Investigation of these images soon revealed that all of the expanded images, those displaying larger than the width and height settings, included a "size-medium" tag in the CSS line of advanced settings.

    Aha! Yeah, any image with the "size-medium" class included will now be resized to match the settings in Settings > Media.

    1. Why must any size tag be inserted into the CSS class line of the image editor advanced settings module by default?

    That's just how WordPress is design, and it works best for *most* use cases. Unfortunately, for someone who has painstakingly changed all the image dimensions, it's something you will have to work around.

    2. Why would those images with "size-medium" tags in the CSS line of the image editor advance settings module display at full size? And why did they suddenly begin to do so on September 20?

    The editor is not displaying images correctly. I have filed this as a bug and am waiting to hear back from the developers. Apologies for the trouble since we are still sorting out the editor after the other update. Hang tight, and we'll get something sorted out for the editor within the next few days I'm sure.

  4. @musicdoc1, could you still post a specific example of one of your posts where you used to have images side-by-side but where the images changes sized? Just one example would be great, preferably one you have not updated after 9/20.

  5. Yes, I certainly will, but can't get to it right. Very busy helping a friend move. Another issue I'd like to address is that I also thought of the fix that apparently worked for forestmtnhike, who said in the related thread http://en.forums.wordpress.com/topic/photos-have-become-small-and-off-centered/page/2?replies=51#post-1448725:

    "I just figured to type in 900 onto the width and height in the medium size area and I checked my blog and so far all the pictures are appearing at that size."

    I thought that if I changed the medium size dimensions on the media settings page of my site to a max width and height equal to or greater than my largest affected images, it might return them to the proper sizes. This fix was unsuccessful for me. After making the modification and updating the front page, none of images I looked at returned to the sizes I'd given them in the width and height boxes of advanced settings. I believe they are all displaying at the original file size. They were unchanged by the modification/fix attempt.

  6. No problem! Post whenever you're ready.

    I thought that if I changed the medium size dimensions on the media settings page of my site to a max width and height equal to or greater than my largest affected images, it might return them to the proper sizes. This fix was unsuccessful for me.

    Correct. That's because you inserted your images in a different way compared to forestmtnhike.

    Your case is a specialized one since you edited the HTML for your images directly.

  7. Got it. But the case of paired images is not unique with regard to the resizing. I just gave that as an example of how it distorts my page design. If one of a pair suddenly becomes twice or ten times the set size, then it upsets the design, looks sloppy. Usually the size change bumps the second down below the first. I've already corrected the paired images on the front page, but there are probably a thousand more pairs on the site. Don't know how many are affected (i.e. which have the "size-medium" tag).

  8. That's okay. I just like the side-by-side image example because I think it's an interesting case, can you link me to an example of a broken one?

  9. Sure.
    But first please allow me give you an idea of the extent of the problem on my site. I have 737 published pages of which 459 have at least one "size-medium" tag, 62%. There are fewer posts, only 55, of which 23 (42%) have these tags. But I've got something like 8,000 attached images in the published posts and pages.

    On one page, which I chose rather randomly, I found 14 images displayed at the wrong size. If that was a typical amount then I'd have well over 6,000 images presently displayed at too large or too small. The number of incorrectly resized images on this particular page is probably greater than the norm for the site, so 6,000 is probably too high an estimate. The page I refer to is http://songbook1.wordpress.com/fx/1944-standards-and-hits/round-midnight/.

    In addition to six unpaired images, there are four pairs displayed improperly on this page. Here are three different combinations:

    1. Both the left and the right images in a side-by-side pair displayed too large:

    <p style="text-align: center;"><img class="size-medium wp-image-41033 alignnone" style="border: 0 none;" title="miles davis 1956-don hunstein-4" alt="" src="http://songbook1.files.wordpress.com/2011/01/miles-davis-1956-don-hunstein-4.jpg?w=292" width="277" height="284" /><img class="alignnone size-medium wp-image-41034" style="border: 0 none;" title="miles_davis_1956_don_hunstein_medium" alt="" src="http://songbook1.files.wordpress.com/2011/01/miles_davis_1956_don_hunstein_medium.jpg?w=199" width="188" height="285" /></p>

    2. Left image too large, right image correct size:

    <p style="text-align: center;"><img class="size-medium wp-image-41038 alignnone" style="border: 0 none;" title="Jimmy Smith-1" alt="" src="http://songbook1.files.wordpress.com/2011/01/jimmy-smith-11.jpg?w=226" width="217" height="290" /><img class="alignnone wp-image-41037" title="Jimmy Smith-3" alt="" src="http://songbook1.files.wordpress.com/2011/01/jimmy-smith-3.jpg" width="248" height="290" /></p>

    3. Left image correct size, right image too large:

    <p style="text-align: center;"><img class=" wp-image-40985 alignnone" style="border: 0 none;" title="grant-green-1961-3-sm" alt="" src="http://songbook1.files.wordpress.com/2011/01/grant-green-1961-3-sm.jpg" width="261" height="256" /><img class="alignnone size-medium wp-image-40986" style="border: 0 none;" title="Guitarist Grant Green" alt="" src="http://songbook1.files.wordpress.com/2011/01/grant-green-1961-2.jpg?w=294" width="249" height="255" /></p>

  10. Correction:
    I don't think any images are displaying "too small" as I'd suggested above. All of the improperly sized images are displaying too large. I think they are displaying at the file size when the "size-medium" or "size-large" CSS tags are used. I've got images embedded on the site with file dimensions up to 4,000 pixels.

  11. Designsimply,

    For "size-large" I meant "size-full".

    You said,

    Images where you removed "size-full" shouldn't be getting resized based on the recent image resizing change.

    You're saying they shouldn't be resized after removing "size-full"? That wasn't a problem, not recently anyway. But I still sometimes get a "size-full" CSS tag by default, or was until fairly recently. And last time I checked they were still causing full size display regardless of my width and height settings. I've begun routinely removing any size tag inserted by default on uploaded images, but only quite recently.

  12. I think they are displaying at the file size when the "size-medium" or "size-large" CSS tags are used.

    What should be happening is when "size-medium" or "size-large" is used, then they're being displayed at the corresponding size listed in Settings > Media. Do you see that happening?

    In your case, since updating Settings > Media sizes may not update all the images like you want (you've used very precise settings), I just wanted to check with our developers to see if it can be fixed in another way. I'm not sure it can, I'm checking to see and will let you know as soon as I have more information.

    I've got images embedded on the site with file dimensions up to 4,000 pixels.

    That's fine.

    But I still sometimes get a "size-full" CSS tag by default, or was until fairly recently.

    The CSS classes like "size-medium" and "size-full" do get added automatically. From now on, they have to be removed if you adjust the image sizes manually via HTML.

  13. I'm having a similar problem. As of several days ago, images that are supposed to display at size-medium (no more than 300 pixels per side) or size-large (no more than 500 pixels) are displaying at the full size allowed by my theme.

    My media settings are all set correctly.

    In my most recent blog post, I have an image that is displaying at 500 x 667 pixels. Here is the html:

    <img class="alignnone size-large wp-image-6868" alt="Willow 3" src="http://theodoragoss.files.wordpress.com/2013/09/willow-3.jpg?w=375" width="375" height="500" />

    The size specifications in the html are not being applied to the image as displayed on the blog.

    Do you know how to fix this? As I said, my media settings are to medium 300 x 300 maximum and large 500 x 500 maximum. I've tried reentering and resaving them, but it doesn't affect the image.

    Thanks!

  14. @musicdoc1, I'm checking to see if I can find a way to remove all of the size-KEYWORD classes for you in one go. I'll need a little time to find out if that's something we can do or not. I will post back here as soon as I have more information.

    @theodoragoss, you've run into one of the bugs I'm tracking where portrait sized images seem to have the width and height applied incorrectly. For your case, please watch this thread for updates: http://en.forums.wordpress.com/topic/images-resizing?replies=2

    As a temporary workaround for the image HTML you mentioned:

    <img class="alignnone size-large wp-image-6868" alt="Willow 3" src="http://theodoragoss.files.wordpress.com/2013/09/willow-3.jpg?w=375" width="375" height="500" />

    You could remove the "size-large" part and that should fix the problem for that specific image in your case.

  15. designsimply,

    I'm checking to see if I can find a way to remove all of the size-KEYWORD classes for you in one go. I'll need a little time to find out if that's something we can do or not. I will post back here as soon as I have more information.

    Thank you very much for the effort. It would save me countless hours should you be able to do so. The following response to your previous post might help to explain why.

    What should be happening is when "size-medium" or "size-large" is used, then they're being displayed at the corresponding size listed in Settings > Media. Do you see that happening?

    I'm not certain that I understand the question you've asked. Are you referring to the Media Settings page, where only the maximum widths and heights are given for each of the standard sizes (small, medium, and large)?

    As I said when "size-medium" or "size-large" is present, the images appear to display at full size at least in some case, not at the corresponding size listed at my Media Settings page, and not at the size I set them at in the width and height boxes of Advanced Settings in the Image Editor.

    Examples:

    1. The following image was set manually by me to display at w=183, h=300. It also contains a CSS "size-medium" tag, inserted not default upon uploading. The Media Settings page gives max width and height of 450 each for medium size images. It is apparently displayed at the full file size of 354 w X 579 h.

    <p style="text-align: center;"><img class="aligncenter size-medium wp-image-104599" title="Gene Austin" alt="Gene-Austin-1-d40-p1" src="http://songbook1.files.wordpress.com/2009/10/gene-austin-1-d40-p1.jpg?w=183" width="183" height="300" /></p>

    2. The following contains a somewhat more extreme example. It's in a draft page, because I've already correct the image in a duplicate post. I've set the image to display at a relatively small 108 w X 349 h. The Media Settings page sets the max width and height for a medium size image at 450 each. The image appears to be displayed at the file size of 400 w X 1264 h. That's a very big difference.

    <img class="size-medium wp-image-106843 alignright" title="Einar Swan with members of the Vincent Lopez Orchestra saxophone section, 1926" alt="Einar Swan-1926-with-members-of-Vincent-Lopez-Sax-Section-c1-d40" src="http://songbook1.files.wordpress.com/2013/02/einar-swan-1926-with-members-of-vincent-lopez-sax-section-c1-d40.jpg?w=94" width="108" height="349" />

    On the other hand, I found a couple of very large file images (4000 X 4000, and 3119 X 4000) on my page It Never Entered My Mind which display neither at the width and height settings I've given them, nor at the full file size. While I don't know how to measure the size they are displayed it, they appear to be larger than the 450 X 450 maximums found on my Media Settings page.

    I've got images embedded on the site with file dimensions up to 4,000 pixels.

    That's fine.

    The point was that I thought they might be displaying at up to that size. So far the largest height I've seen is that on the second example above, 1264 pixels. But I haven't really seen anything to suggest that much taller and/or wide images won't display at file sizes.

    The CSS classes like "size-medium" and "size-full" do get added automatically. From now on, they have to be removed if you adjust the image sizes manually via HTML.

    If this is true, then both of us are wasting out time. As far as I can tell, this information tells me that I must proceed to manually remove the unwanted several thousands of "size-medium" tags which used to do nothing, but suddenly have caused havoc on my site.

  16. designsimply,

    Regarding the image in my example #2, above. Even though I deleted the external "link URL" from the image editor the link I provided you still takes you to the external link. I don't know why.

    The image in question is the first one on this page:

    https://songbook1.wordpress.com/wp-admin/post.php?post=104114&action=edit&message=10

  17. Here's the preview page with the huge image. It is displayed at nearly 4 times the height and 4 times the width of my manual settings.

    http://songbook1.wordpress.com/?page_id=104114&preview=true

  18. when "size-medium" or "size-large" is present, the images appear to display at full size at least in some case, not at the corresponding size listed at my Media Settings page, and not at the size I set them at in the width and height boxes of Advanced Settings in the Image Editor.

    I will look into this.

    If this is true, then both of us are wasting out time. As far as I can tell, this information tells me that I must proceed to manually remove the unwanted several thousands of "size-medium" tags which used to do nothing, but suddenly have caused havoc on my site.

    I was talking about future images that you insert, and I probably made it sound harder than it is. You would just need to remove class names such as "size-medium" when you edit the size values manually in HTML, which sounds like what you have been trying to do (you said you remove "size-full"). So, I think you'll be okay if I can find a way to remove the all the "size-medium" type values in one go for you (no promises, but I'm checking that out to see if I can make it happen!).

    It will probably take me a few days to find out because of other people's schedules. But hang in there and I'll reply here as soon as I know more.

  19. Sorry about the several typos yesterday, and minor grammatical errors throughout the thread. Been a bit under the weather.

    One thing that WordPress might be able to do to help would be to allow or create the possibility of an HTML keyword search of the media library. Presently, a search of posts and pages for a keyword such as "size-medium" that might be located anywhere in HTML code, greatly narrows down the search, giving you as results the pages and posts on which the term is found. The same search of the media library gives no results, presumably because only the image titles are searched.

    Yes, removing the "size-medium" values would fix most if not all of the present errors. I appreciate your commitment to look into whether it can be done.

    Examining some of the 15 over-sized images on the page It Never Entered My Mind and others elsewhere on the site led me to the following idea. It appears that the square images with file sizes over the maximum setting for "Medium Size" on my Media Settings page might be displaying at exactly 450 X 450. However, those with heights greater or lesser than the widths with display at the corresponding height or width relative to the file size. The 450 width is constant; but the height varies up or down.

    For example:

    1. This one has a file size of 728 X 1000. It appears to display at the same width as 9 other images on the page, probably the maximum width of 450 pixels given on my Media Settings page. But the height assumes a larger size corresponding to the original file size, probably about 618 pixels, because 728/100 = 450/618 (approximately).

    <img class="size-medium wp-image-33102 alignnone" style="border: 0px none;" title="1940 Higher and Higher-sheet-1" alt="" src="http://songbook1.files.wordpress.com/2010/10/1940-higher-and-higher-sheet-1.jpg?w=218" width="179" height="249" />

    2. The image paired with it in my design, but displaying directly below it due to the resizing issue, appears to have the same width as does the one above, presumably 450 pixels. But this time the height is less than 450, adopting a size which maintains the width to height ratio of the file size. Since 2797 X 2178 has a 1.284:1 width to height ratio, the corresponding height in this case would be about 350 pixels.

    <img class="alignnone size-medium wp-image-33104" style="border: 0 none;" title="rodgers-and-hart-x-lg2" alt="" src="http://songbook1.files.wordpress.com/2010/10/rodgers-and-hart-x-lg2.jpg?w=300" width="318" height="249" />

    In the case of a "Medium Size" image (bearing the "size-medium" value) having a file size width of less than 450 pixels, but a file size height of greater than 450 pixels, the image apparently displays at the file size. This can result in extremes. For example, the dimensions displayed could be 375 X 459, or 375 X 1500.

  20. The last point in my previous post leads to an absurd conclusion. If the width of an image falls under the maximum given at the Media Settings page, then the acceptable displayed height is unrestricted, unlimited by the Media Settings. It might only be limited by the maximum height of a post, if such a thing exists.

  21. Okay! Portrait oriented images have been fixed!

    Think of the medium and large sizes on the Settings > Media page as a bounding box. Images will try to be the largest they can be within the constraints of the box. So, if you set medium to 500 x 500, then a portrait image would be 500px tall and a width relative to the aspect ratio of the original image. If the image were landcape, then it would be 500px wide instead.

    We probably won't install a way to search for size-medium, but what I've asked for is a tool where staff can do a one time (irreversible) update to a blog to strip out *all* of the size-medium class names at once. No word on it yet, but I'll keep you posted.

  22. Think of the medium and large sizes on the Settings > Media page as a bounding box. Images will try to be the largest they can be within the constraints of the box. So, if you set medium to 500 x 500, then a portrait image would be 500px tall and a width relative to the aspect ratio of the original image. If the image were landcape, then it would be 500px wide instead.

    I'm not sure I understand what you've said or how that's a change.
    First of all, what's the difference between a portrait and a landscape image. I think I know what you mean, but I want to be sure as I've never heard of these terms, never heard of this distinction, though I've handled tens of thousands of images with WP image loading and editing tools over the past five years.

    Second, how is this "fix" different than what I said was happening previously in my Sep 24, 2013, 12:53 PM post, earlier today? Admittedly I again made some typos, and it came out a bit garbled. Here's what I meant to say:

    It appears that the square images with file sizes over the maximum setting for "Medium Size" on my Media Settings page are probably displaying at exactly 450 X 450. However, with a width of equal to or greater than the max (450 in this case) and a height of anything other than the max, above or below, the displayed height will be such that the ratio between the width and the height of the original file size is maintained.

    Third, does this "fix" address the following issue:
    When the width is below the Media Setting maximum for medium images a significant problem arises. Presently for images below the maximum, the height appears to be unrestricted. For example, if the maximum width is 450 pixels, an image having dimensions of 449 X 2, 449 X 451, or 449 X 2,002 would all display at the file size. Tall, thin images are, or were, slipping through last time I checked (several hours ago).

  23. Okay, I've seen an example of the "fix" you've described at http://songbook1.wordpress.com/?page_id=104114&preview=true, a page I've previously brought attention to on this thread. I presume a portrait image is one with the height greater than the width, while an landscape image has a width greater than the height. If that's the case, then the fix addresses and corrects the last issue I mentioned just above, the problem of tall and thin (or short and fat I should have added) images displaying at file size.

    The bigger issue for me is the one we're both still waiting on. In the mean time I will resume the slow process of manual removal of the troublesome "size-medium" tags.

    Thanks designsimply for your continued efforts. Your patient assistance in explicating and resolving this matter is greatly appreciated. : -)

  24. Regarding the "fix" you mention. Sorry, but I'm going to have to modify my commendation of it.

    The fix is an improvement, or may be considered an improvement, but it doesn't really resolve the issues I've been dealing with. Although it eliminates the unlimited height issue I pointed out above, it only modifies the display height so that it always falls within the maximum set for a size range (small, medium, or large). It does nothing about the following issues, which are the ones which propelled me to begin this thread and remain so:

    1. Allowing the user-chosen width and height settings to determine the display size of an image. User-chosen width and height settings should override the default generic size range (thumbnail, medium, large, full, etc.) necessarily applied when an image is uploaded.

    The image <img class="size-medium wp-image-106843 alignright" title="Einar Swan with members of the Vincent Lopez Orchestra saxophone section, 1926" alt="Einar Swan-1926-with-members-of-Vincent-Lopez-Sax-Section-c1-d40" src="http://songbook1.files.wordpress.com/2013/02/einar-swan-1926-with-members-of-vincent-lopez-sax-section-c1-d40.jpg?w=94" width="108" height="349" />
    was manually set to display at 108 pixels in width by 349 pixels in height (108 X 349). Prior to the present "fix" it displayed at the file size of 400 w X 1264 h. Now, after the fix it should have a height approximately equal to 400 times 450 divided by 1264, or ~ 142 pixels. So its present dimension are about 142 X 450.

    What's wrong with that? Well, for one thing it's about 30% off the dimensions I set and saw displayed before WP decided to make the CSS tag "size-medium" override my settings. Obviously, an image suddenly displayed at modified dimensions other than those I've chosen might and often does upset my page or post design in various ways. I typically choose a certain width and height for specific reasons. I may want the image to stop at the end a certain paragraph. I may have to avoid running text into something in the background. This last is an ever-present issue on my site because of the two-tone custom background. I may want the text to wrap around the image in certain appealing way.

    2. Allowing paired side-by-side images set at the same height to display at the same height.

  25. 3. Allowing paired side-by-side images to fit on the same line of a post. On this theme the maximum combined width of two images (with borders) is 510 pixels. One more pixel and the second image gets bumped down to the next line. The recent modification by WordPress that makes the "size-medium" tag override user-chosen image dimensions creates havoc with many paired images. They often now display on top of each other, each at the width of 450 pixels, instead of the combined 510 (average 255) at which I set them. WordPress is displaying such previously paired images at an average of 76.47 % (195/255) wider than the width I set them to display at.

  26. The fix is an improvement, or may be considered an improvement, but it doesn't really resolve the issues I've been dealing with. Although it eliminates the unlimited height issue I pointed out above, it only modifies the display height so that it always falls within the maximum set for a size range (small, medium, or large).

    This is the intended behavior.

    1. Allowing the user-chosen width and height settings to determine the display size of an image. User-chosen width and height settings should override the default generic size range (thumbnail, medium, large, full, etc.) necessarily applied when an image is uploaded.

    You may override the main settings by removing the "size-KEYWORD" class name (just like before for full sized images).

    What's wrong with that? Well, for one thing it's about 30% off the dimensions I set and saw displayed before WP decided to make the CSS tag "size-medium" override my settings.

    Yours is a special case. I'm still working on a fix for you that's separate from the other stuff!

  27. You may override the main settings by removing the "size-KEYWORD" class name (just like before for full sized images).

    I haven't forgotten that. Sorry if I sound like a broken record. I know that that we've gone over this before a couple of times. In the last post I was merely summarizing some of the major issues which remain for images uploaded prior to the recent WP modification re" "size-medium".

    Yours is a special case.

    But hardly unique. I've seen countless sites with images smaller than mine. They might modify the size before uploading as timethief suggested in a related thread http://en.forums.wordpress.com/topic/photos-have-become-small-and-off-centered?replies=18#post-1448135, but this is not always the case. It would appear that anyone who frequently uses images larger than thumbnails, will likely have run into the issue of unwanted resizing created by the "size-medium", or "size-large" (which began overriding user-chosen dimensions at an early date) class designators inserted upon uploading.

    What about the "size-full" class name? Does that also override user-set dimensions?

  28. Does the "size-thumbnail" class designator also override user-chosen dimensions?

  29. What about the "size-full" class name? Does that also override user-set dimensions?

    Does the "size-thumbnail" class designator also override user-chosen dimensions?

    Yes and yes. I hear ya about the other feedback, and it's something we will continue to discuss internally, (so far) we feel the benefits outweigh the costs of switching.

  30. Thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic