Suggestion for easy CSS fixes to the themes

  • lazza · Member ·

    Hi, I recently changed my theme and I found that many of the themes had some issues with images which could be *easily* fixed with a couple CSS lines, and all users could benefit.

    First, many themes do NOT have a “max-width: 100%” on images, and some have it only on “img” tag but not “wp-caption”. This is a problem, even in websites where the design is not responsive. You cannot just hope to change theme and get another one with the same content area width.

    Second, those who have it often don’t have a “height: auto”, so the images are not overflowing, but the proportions are totally wrong.

    Third, this is an issue that my theme also has (the “Panel” theme): I suggest you use “-moz-box-sizing: border-box” and the other browser vendor variants to avoid this “max-width:100%” to cause the right border of captions to overflow, often it is hidden. In my case, it happens when viewing the blog on mobile phones.

    I think these three fixes are super easy to do and should be introduced in every theme on WordPress.com. Do you plan to fix them? Thank you.

    The blog I need help with is: (visible only to logged in users)

  • kraftbj · Staff ·

    Thanks for these suggestions. I’m asking our team that handles some of our all-themes customizations to review these ideas and either they or I will respond back to you soon.

    Cheers!

  • designsimply · Member ·

    Hello Lazza, thank you for the suggestions!

    I have researched the issues you brought up, and here’s what I found:

    First, I picked 5 themes at random (Anthem, Grisaille, Mixfolio, Modern News, The Columnist) and checked for max-width and height properties on images and the box-resizing property on captions. I found that all 5 themes I picked had proper max-width and height values for images, and all but Modern News had a max-width set for caption containers. I found that box-sizing isn’t used, but there is a different workaround present in a lot of themes which is to set the caption container to just under 100% to give the caption borders room.

    WordPress.com also recently introduced an update that lets you change all image sizes at once from the Settings > Media page in your blog dashboard for any image that has been added using the steps posted at http://en.support.wordpress.com/images/#upload-images-from-your-computer We made that update to help images work better when a theme is switched, which is the exact scenario you have mentioned.

    It’s possible though, that if you have inserted your images without using the media manager, that you wouldn’t be able to adjust your image sizes after a theme switch, and it appears that might be a problem you’ve run into. To avoid that in the future, you can insert images using the media manager (see link above) so that you can control the image sizes using the Settings > Media page in your blog dashboard.

    Regarding updating the CSS for a few hundred themes, that’s not necessarily super easy like you say. :) So what we have normally done in the past is addressed issues like this one on a case by case basis since it’s not common for someone to meet what the criteria needed to trigger the problem, which is: you would have to have inserted images without going through the media manager and then also switched to a theme with a smaller content width than the theme you were using at the time you inserted the image and that theme would also have to be missing “height: auto” for images. I like the suggestion to add a “box-sizing” property to prevent caption borders from getting cut off though, so I’ve put in a request to see if an update can be made and someone will reply back here as soon as the request gets reviewed.

  • lazza · Member ·

    Hi designsimply, thank you for your message. I appreciate your investigation, but I slightly disagree with your findings, and I would like to tell you why:

    I picked 5 themes at random (Anthem, Grisaille, Mixfolio, Modern News, The Columnist) and checked for max-width and height properties on images

    Two of these themes are premium, so I don’t count them because I didn’t mention premium themes, nor I have interest in trying themes I will not be able to use (I’m not going to pay for them). ;) Also, they have been created more recently, usually with a more responsive approach if you compare them with the free themes.
    So basically you found 3 “well behaving” free themes out of 224. IMHO, 1.33% of the universe is not a good statistical sample. I believe you should try to see some more, e.g. Albeo, Almost spring, Banana smoothie, Beach, Black letterhead, Blix, Bouquet, ChaoticSoul, Choco, Clean Home, Connections, Contempt, Coraline, etc… (I just checked those with a two-columns layout and in the range A-C)
    I don’t want to sound inappropriate, but I think the problem is a bit more widespread than your first impression. :)

    I found that box-sizing isn’t used, but there is a different workaround present in a lot of themes which is to set the caption container to just under 100% to give the caption borders room.

    Yes, that’s a dirty hack which I know and have used sometimes when developing my websites, but I agree with most of the theme creators who “do it right” and add the 100% max-width. I believe the box sizing is perfect. Alternatively, but this requires more time and testing, one could do a “compensation” of the border, like the Chateu theme does (and I think it’s quite nice, but still, time consuming).

    WordPress.com also recently introduced an update that lets you change all image sizes at once from the Settings > Media page

    I used to set that for years, because there was no better hack but again, I find invaluable to be able to put images in good quality and 100% width, not just the “bullet-proof” 500px width which leaves a lot of margin in most cases and renders bad in RSS readers or high-resolution smartphones. I prefer the theme to adapt the images for me. :P

    It’s possible though, that if you have inserted your images without using the media manager, that you wouldn’t be able to adjust your image sizes after a theme switch, and it appears that might be a problem you’ve run into.

    I’m sorry, I always used the media manager for at least the last two years. Most themes handle “more or less” right at least a part of the wp-caption issue, but fail when you insert an image through the media manager without a caption. That’s a pity.

    since it’s not common for someone to meet what the criteria needed to trigger the problem, which is: you would have to have inserted images without going through the media manager and then also switched to a theme with a smaller content width than the theme you were using at the time you inserted the image

    Your allegations are quite inappropriate. What about the case when a blogger uses the media manager to insert full-size images and expect the theme to scale them properly by using the industry standard responsive approach which has been around at least for 3 years? And in any case, I did use the media manager. Changing theme is not uncommon, finding a buggy theme is not as well. If it wasn’t for this image issue, I would have had a lot more themes to choose from, because I liked many of them.

    Regarding updating the CSS for a few hundred themes, that’s not necessarily super easy like you say. :)

    In general no of course, but for this is just a matter of: 

    .post img, .post wp-caption {
max-width: 100%;
height: auto !important;
box-sizing: border-box;
}

    Then you can maybe find 2 themes where this does not work well. I don’t want to be considered the one who begs for useless features, as I said before my current theme is done in a proper way (without box-sizing but more or less ok). I am just trying to be helpful by describing a problem affecting many users. Saying that the problem does not exist IMHO is not good for these users. ;)

    On a side note, could you also add a overflow: hidden to the element with class jetpack-likes-widget-wrapper (the like box)? That scrollbar cause by a one pixel overflow is driving me crazy. :D

  • designsimply · Member ·

    Albeo, Almost spring, Banana smoothie, Beach, Black letterhead, Blix, Bouquet, ChaoticSoul, Choco, Clean Home, Connections, Contempt, Coraline, etc.

    Thanks for including specific examples. I can see now that you are looking at retired themes. Retired themes are not available for new users and are no longer maintained but they are grandfathered in for blogs that had switched to them in the past.

    You can go to http://theme.wordpress.com/ to see a better selection of themes, as an alternative to looking in your dashboard which sounds like it has many retired themes grandfathered in you case.

    I agree with most of the theme creators who “do it right” and add the 100% max-width. I believe the box sizing is perfect

    I can see your points here! 100% max-width for images is how our newer themes are setup, and I have already put in a request to update Panel with “box-sizing” as well as another request to check to see if “box-sizing” can be added to all responsive themes.

    Most themes handle “more or less” right at least a part of the wp-caption issue, but fail when you insert an image through the media manager without a caption. That’s a pity.

    What I was trying to say is that, in those cases, you can go to Settings > Media and change the image sizes to fit the theme with one update. It is one possible option that could help in some cases and that’s why I mentioned it. The ability to adjust the sizes of already-inserted images is a new option and was only added to WordPress.com a few weeks ago. It was designed to make resizing images site-wide after a theme switch an option if needed.

    What about the case when a blogger uses the media manager to insert full-size images and expect the theme to scale them properly by using the industry standard responsive approach which has been around at least for 3 years?

    That case should be covered. Full-sized images inserted via the media library should have a “size-full” class name, and those should adjust to the theme’s Content Width automatically.

    Most of the themes you mentioned were never designed to be responsive, and more than half of them were made 7 years ago in 2006! Instead of spending time trying to re-work older, outdated themes like those, our theme team tends to lean toward spending more time making new themes that are even better whenever possible. That’s one of the reasons for retiring the older ones.

    I am just trying to be helpful by describing a problem affecting many users.

    I appreciate that! I think what happened here is that you didn’t realize most other users don’t have the older themes you were thinking of available as an option because those themes are retired. There wasn’t any way for you to know that since you could see them in your dashboard, and I didn’t know which themes you were looking at until you provided a list of examples. I’m certain not as many users as you think have the option to use outdated themes.

    Try taking a look at the themes at http://theme.wordpress.com/ You can even activate them from there while you are logged in to your WordPress.com account.

    Separate from the max-width and box-sizing suggestion, if you’re interested in helping out more by letting us know about bugs for themes that aren’t retired, I’d be happy to help you with that. It would help me a lot if you included specific examples or steps to reproduce.

    In regard to the Panel theme, someone should reply back here with an update for you about adding “box-sizing” as soon as the help request I added about that can be reviewed.

    Thanks for your interest! I can tell that you are passionate about themes and design, and I’m happy to have you here at WordPress.com!!!

  • lazza · Member ·

    Thank you for your answer. :)

    I think what happened here is that you didn’t realize most other users don’t have the older themes you were thinking of available as an option because those themes are retired.

    That’s correct, I didn’t know that. Is there an option I can select in order to prune them from my account? I don’t want to see them if they are retired.

    If you’re interested in helping out more by letting us know about bugs for themes that aren’t retired, I’d be happy to help you with that. It would help me a lot if you included specific examples or steps to reproduce.

    Don’t know about Windows or Mac, but if you use Linux you always see a one pixel overflow on the like box. This is regardless of the theme in use. Here is a screenshot:
    http://www.imagebanana.com/view/b2kxb1d7/likebox.png
    As you can see, the content is not clipped, it’s just the container (iframe?) to be a little too small. I think an “overflow: hidden” would solve the problem pretty quickly.

    someone should reply back here with an update for you about adding “box-sizing” as soon as the help request I added about that can be reviewed

    That’s great, thank you!

  • designsimply · Member ·

    I didn’t know that. Is there an option I can select in order to prune them from my account? I don’t want to see them if they are retired.

    Good question! I’ll find out.

    Don’t know about Windows or Mac, but if you use Linux you always see a one pixel overflow on the like box.

    I couldn’t see the problem on my Mac, but I have reported the issue to the team that works on the Likes feature, and they will review the ticket the next time they work on that feature. Thanks for including a screenshot!

  • designsimply · Member ·

    Is there an option I can select in order to prune them from my account? I don’t want to see them if they are retired.

    There’s not an option for this right now, but it’s a planned update for the future.

    In the mean time, the best way to look at the current set of themes is by going to http://theme.wordpress.com/

  • lazza · Member ·

    Ok thank you. :) It’s just a pity that I cannot quickly access the feature to see how it would look with my articles. ;)

  • designsimply · Member ·

    Also good feedback, and that’s probably something we could add in the future too.

  • lazza · Member ·

    Hi designsimply, after using your suggestion for setting the max image size (because I wanted to switch from a small 500px to a wider 750px) I found another problem.

    Now most of the boxes with captions are exactly 760px width, regardless of the fact that my image (in an “old” article) is 500px wide. Here is an example:
    http://andrealazzarotto.com/2013/10/16/avviso-importante-nuovo-server-per-il-download-da-video-mediaset/

    The “square brackets tag” in the source code of the article correctly has width=500 so I don’t see why WordPress is forcing 760.

    Is there a way I can fix this… ok even if I have to retouch every post manually? (I would prefer not)

  • designsimply · Member ·

    In this case, the original image is 640 pixels wide:
    http://lazza.files.wordpress.com/2013/10/mediaset-schema.jpg

    The settings won’t work to make an image larger than the original size.

  • lazza · Member ·

    Yes, that’s right. My question was another one: given that the image is 640 pixels wide and this is perfectly fine for me, why does WordPress force the outer div to be 760 pixels wide even if a smaller width is set when writing the post?

  • designsimply · Member ·

    Is there a way I can fix this… ok even if I have to retouch every post manually? (I would prefer not)

    I don’t see a way to adjust too-small images to fit the large size setting without adjusting them manually. I tried some CSS, such as forcing the width for .wp-caption to auto, but that just makes it expand to full width if the image is centered, and I don’t think that’s a good solution.

    given that the image is 640 pixels wide and this is perfectly fine for me, why does WordPress force the outer div to be 760 pixels wide even if a smaller width is set when writing the post?

    Because the caption area obeys the large size setting while the original image can’t be expanded to fit since it’s too small. I tested other themes and they all behave the same except most of the ones I checked didn’t have borders around image or captions, so the extra spacing wasn’t as apparent. I think this is an edge case though and, if you really don’t like the how captioned images look with the theme showing borders for them, then one of these options might work for you:

    • Adjust the large size to be smaller to accommodate older images you uploaded that aren’t big enough
    • Adjust image size manually in cases where the original images are too small for the space allotted
    • Purchase the Custom Design upgrade in order to customize the parts of the theme design (i.e. remove borders around captions) that you don’t like

    It also makes a case for uploading larger sized images as the originals, which would be a good practice to adopt to make site content easier to migrate to different themes with different content widths. We have done a lot of work to try to make that easier, but if the images are too small to fit the space then I think you have to accept the design of theme or get the upgrade that lets you customize it to your liking.

  • lazza · Member ·

    I don’t see a way to adjust too-small images to fit the large size setting without adjusting them manually.

    I don’t want to enlarge small images, the setting is about MAXIMUM image size, it doesn’t state the images should be at least that large.

    Because the caption area obeys the large size setting while the original image can’t be expanded to fit since it’s too small. […] I think this is an edge case though

    The code in my post is the following:
    [caption id="attachment_2606" align="aligncenter" width="500"]<a href="http://andrealazzarotto.com/2013/10/16/avviso-importante-nuovo-server-per-il-download-da-video-mediaset/mediaset-schema/" rel="attachment wp-att-2606"><img class="size-large wp-image-2606" alt="Schema di funzionamento dello script per il download da Video Mediaset" src="http://lazza.files.wordpress.com/2013/10/mediaset-schema.jpg?w=500" width="500" height="343" /></a> Schema di funzionamento dello script per il download da Video Mediaset[/caption]
    You see “500”s literally everywhere, so I don’t see why WordPress should set anything at 640 or 760. Please notice where it says width=”500″ in the caption tag itself. This is not an edge case, it’s a bug.

    Oddly enough, it happens only in certain articles, to be precise those that were written before I changed the maximum size. The newer articles have small images which keep the correct size of the box. E.g.: 

    [caption id="attachment_2722" align="aligncenter" width="424"]<a href="http://andrealazzarotto.com/2013/12/08/piu-copie-della-stessa-persona-in-una-foto-tutorial-per-gimp-e-hugin/selezione-tagliata/#main" rel="attachment wp-att-2722"><img class="size-full wp-image-2722" alt="Primo ritaglio approssimativo" src="http://lazza.files.wordpress.com/2013/12/selezione-tagliata.jpg" width="424" height="619" /></a> Primo ritaglio approssimativo[/caption]

    I really cannot see the difference between these two codes when it comes the time for WordPress to decide how large the box should be! It could just follow the width set in the [caption] tag and it would all be ok, the CSS we were talking about (max width at 100%) would handle all the rest.

    Honestly, I don’t see why I should buy a custom upgrade if the decision of forcing 760px is made by WordPress when converting the [caption] tags into normal HTML. It wouldn’t help. Also, I upload pictures at bigger sizes, but if my screenshot is say 600px wide, it must display at 600px, not more because the box is somehow enlarged.

    I’ll try to see if I can fix these images manually, but there does not seem to be a solution if I put “500” in the code and it get rendered at 760 anyways. :(

  • lazza · Member ·

    Ok here is a followup. If I write this:
    [caption id="attachment_2556" align="aligncenter" width="500"]<a href="http://andrealazzarotto.com/2013/07/02/ocr-dei-pdf-con-linux-wine/pdf_xchange_viewer/" rel="attachment wp-att-2556"><img class="size-large wp-image-2556" alt="Finestra OCR del programma" src="http://lazza.files.wordpress.com/2013/07/pdf_xchange_viewer.png" width="500" height="473" /></a> Finestra OCR del programma[/caption]
    Wordpress forces the div to be 760px wide, the image is 500px.

    If I write this:
    [caption id="attachment_2556" align="aligncenter" width="669"]<a href="http://andrealazzarotto.com/2013/07/02/ocr-dei-pdf-con-linux-wine/pdf_xchange_viewer/#main" rel="attachment wp-att-2556"><img class="size-full wp-image-2556" alt="Finestra OCR del programma" src="http://lazza.files.wordpress.com/2013/07/pdf_xchange_viewer.png" width="669" height="633" /></a> Finestra OCR del programma[/caption]
    Wordpress displays everything correctly: the image is 669px wide and the box is at the right size. Now, what is the difference? o.O Really, my computer science degree here doesn’t help to see why there should be any difference in forcing the 760 width just because we changed a parameter!!! Can you see why I am shocked now? :)

  • lazza · Member ·

    it happens only in certain articles, to be precise those that were written before I changed the maximum size
    To be even more precise, only on those images which are linked to the “attachment page”. Ok, this is getting really weird.

  • designsimply · Member ·

    You see “500”s literally everywhere, so I don’t see why WordPress should set anything at 640 or 760. Please notice where it says width=”500″ in the caption tag itself.

    The presence of the “size-large” class name in the “img” tag means the 500 will be ignored and the Settings > Media > Image sizes settings will be used.

    It was designed that way as an attempt to make resizing images site-wide more versatile (especially in the case of theme switches). It does make the HTML part of it confusing since those attributes are ignored in favor of the Settings > Media > Image sizes settings. Sorry it’s confusing!

    [caption id="attachment_2722" align="aligncenter" width="424"]<a href="http://andrealazzarotto.com/2013/12/08/piu-copie-della-stessa-persona-in-una-foto-tutorial-per-gimp-e-hugin/selezione-tagliata/#main" rel="attachment wp-att-2722"><img class="size-full wp-image-2722" alt="Primo ritaglio approssimativo" src="http://lazza.files.wordpress.com/2013/12/selezione-tagliata.jpg" width="424" height="619" /></a> Primo ritaglio approssimativo[/caption]
    I really cannot see the difference between these two codes when it comes the time for WordPress to decide how large the box should be!

    The difference here is the “size-full” class name. Only images that have “size-thumbnail,” “size-medium,” and “size-large” are affected by Settings > Media > Image sizes settings.

    To be even more precise, only on those images which are linked to the “attachment page”. Ok, this is getting really weird.

    I don’t think thats it. I think it’s the class names “size-thumbnail,” “size-medium,” and “size-large” that you’re having trouble with.

    It’s possible to run a one-time update on your blog to remove all of the size-{sizename} class names. It would strip out all of the size-related class names from all the images in all posts and pages serving to disconnect those images from the Settings > Media > Image sizes settings. If you did that, the HTML attributes would go back to the way they were before and you would no longer be able to adjust those images with the global settings in Settings > Media. Does that sound like something you’d be interested in doing?

  • lazza · Member ·

    I don’t think thats it. I think it’s the class names “size-thumbnail,” “size-medium,” and “size-large” that you’re having trouble with.

    Well, it can be, but then it wouldn’t explain why I fixed a couple of those just by removing the link with the “image properties” dialog.

    Does that sound like something you’d be interested in doing?

    You are very nice to offer to edit the database for me, thank you. :) Actually I think it’s not necessary anymore, I went through all of my posts (only in the last two years actually) and fixed those few images which happened to be linked to the attachment page, either by removing the link or by re-inserting them.

    The presence of the “size-large” class name in the “img” tag means the 500 will be ignored and the Settings > Media > Image sizes settings will be used.

    If this is the case, I would suggest to do the following: when deciding how large the container should be, choose min(container-width, image-size-setting), this would avoid to enlarge the div of small images but at the same time allow to shrink too large pictures. Do you think it is possible?

    By the way, any news on the “1 pixel issue” of the like box? :)

    Thank you again for all the assistance.

  • designsimply · Member ·

    If this is the case, I would suggest to do the following: when deciding how large the container should be, choose min(container-width, image-size-setting), this would avoid to enlarge the div of small images but at the same time allow to shrink too large pictures. Do you think it is possible?

    The newer code for inserting images has already been updated to prevent this problem (which you noticed). And it takes a very precise set of circumstances to trigger the problem you’re describing, and in such cases we have so far been fixing them one site at a time. Only a handful of people have had trouble, and if that number increases, I think we could look into a different solution, but I think it’s working okay as is for now.

    By the way, any news on the “1 pixel issue” of the like box? :)

    Not yet! But it’s filed for review.

  • The topic ‘Suggestion for easy CSS fixes to the themes’ is closed to new replies.