Odd-sized pictures no longer fllng their frames

  • Unknown's avatar
    ontheliner · Member ·

    My blog is in its 13th year and I’m sticking to Classic Editor. What I’ve noticed throughout my posts is that many pictures sized at less than the full column width (some set left, others set right) have shrunk within their grey surrounding border (while the caption remains full-out). How can we get them back to their intended sizes? See three examples in this page –

    McLaren’s ‘Requiem to Myself’

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

  • staff-mckluskey · Staff ·

    Hi,

    Is this what you’re referring to?

    How exactly did those look before?

    I noticed that you are using a retired theme (Coraline), please note that old themes that are not updated anymore can cause issues with newer versions of web browsers.
    I’d recommend checking out other themes, although, bear in mind that once changed, you won’t be able to go back to the retired one anymore.
    Because of that, before activating a theme, you can try it out by clicking on the three dots next to the theme’s name and choosing the option Try&Customize.

    This will allow you to see how the theme would look like with your content and how could you customize it.

  • Unknown's avatar
    ontheliner · Member ·

    Hi again fresatomica. Hm, what you have captured is exactly the way this post should look. But on my Firefox browser (even with adblockers turned off) the image is shrunk within its grey border. Likewise on Opera. However when I view it on Safari, the whole post looks as intended. Am working on a desktop iMac. Clearly this seems to be a browser problem but is there anything I can do to solve it, please?

    Am reluctant to change theme, given that my blog has well over 800 posts etc that would need adjusting! Back in the day Coraline was easily the most elegant for accommodating large amounts of text in an elegant font and readily allowed images to be sprinkled through. Very few themes are geared to long pieces of prose, and today at a quick glance I still can’t see anything comparable. If I did change theme, would I still be able to edit in Classic? Thanks.

  • staff-mckluskey · Staff ·

    Hmm, I’m using Firefox as well, so it is indeed odd that you don’t see the same thing. What is your browser’s version? You can share details from here https://www.whatismybrowser.com/.

    As for changing the theme, it wouldn’t affect the editor you use or your account settings, just your site’s look.
    You’re in no way obliged to use another theme; I just wanted you to know that it may cause some issues in the future, as it may not be compatible with new browsers.

  • Unknown's avatar
    ontheliner · Member ·

    Thanks. Not sure how much of that huge results page you wanted – is this enough?
    https://whatismybrowser.com/w/X6CG3QE

    And the reason I haven’t upgraded to Mac’s latest OS version is that when I last did so I lost substantial parts of my photo albums, which for a photographer was unforgivable.

    For reasons of future compatibility, I wouldn’t mind changing my theme, as you suggest, so I’ll keep browsing them.

  • staff-totoro · Staff ·

    Hi there,

    Thanks for the additional info! Mac OS10.14 is current enough that I would not expect there to be any issues such as this. However, if I view your site in Firefox I do see your issue… but only sometimes.

    For example, if I view your site on my laptop monitor (Apple “retina” display) I see this

    Click to view image

    However, if I view the same page on my desktop monitor (older standard def display) I see the images at the correct scale.

    Click to view image

    To clarify, did these images display correctly in the past? When was the last time you have seen them at the normal scale? The scale change is not due to an issue with the theme itself, since the coding has not changed in some time.
    Instead it looks like a change to the way the Firefox browser handles images on hi-DPI (retina) displays has taken place. With this in mind you may need to file a bug Firefox support here: https://support.mozilla.org/en-US/kb/file-bug-report-or-feature-request-mozilla

    Because this theme is retired, we are not able to make code changes on our end to address this issue, so as staff-mckluskey mentioned previously another way to resolve the issue is to switch to one of our more modern themes.

    Hope that helps. Please let us know if you have any more questions.

  • Unknown's avatar
    ontheliner · Member ·

    Hi jerrysarcastic – Thanks for your detailed notes. Very many images which were scaled to less than full column width today appear shrunk in the way you have noted, randomly throughout my vintage blog. Yes they did all fit the intended spaces when posts were first published and I’ve done nothing differently when creating many pix similarly over the years, scaling them using your own options at the “Insert into Post” stage. This glitch is recent, probably been happening for a couple of years, but I haven’t formed any consistent pattern as to why some pix and not others are affected. I will report a bug to Firefox as you suggest.

    Sadly Firefox itself has certainly become a nuisance browser in recent years – glitches always follow routine updates – but it remains infinitely better than rival browsers. Have to say WordPress itself is far more glitchy than it used to be. Not sure why things have to become more complex rather than less!

    Cheers.

  • supernovia · Staff ·

    Thank you! Hopefully they’ll be able to resolve it.

    For what it’s worth, I checked this on my own system and confirmed that Firefox shrinks the image depending on whether I use my old monitor or newer retina laptop: I can even drag the window from one screen to the other to watch it shrink or grow.

    If I add a CSS snippet, the size changes ever so slightly, but then stays consistent regardless of which screen I’m using.

    .wp-caption img, #content .wp-caption img {
    min-width: 96%;
}

    I’m not sure whether it would be worth it to you to upgrade to Premium for now (it has CSS support among other extra features), but if that’s something you’d be interested in, that CSS should take care of it.

  • Unknown's avatar
    ontheliner · Member ·

    Thanks supernovia but I’m not familiar with CSS, very much a non-geek amateur.

  • supernovia · Staff ·

    @ontheliner, basically if your plan supported it, you’d add the snippet I found under Customize > CSS to make the images stretch to normal size until Firefox does something about this. That’s available in Premium and up:
    https://wordpress.com/premium/

    One other thing you could try: if you have access to these images in about 2-3 times the current size, you might test replacing an image in a post to see if that works. Your theme is older so I’m not positive it would work, but it might be worth a shot (at least for fixing the most popular posts.)

    Hopefully Firefox will just take care of it quickly, though.

  • Unknown's avatar
    ontheliner · Member ·

    Hello again, each of you… Having posted this query at Bugzilla, as you suggested, they have bounced the ball back to WordPress. Their response is way above my head but here it is:
    https://bugzilla.mozilla.org/show_bug.cgi?id=1704204

    The relevant image has:

    What that srcset is intended to do, is providing a 2x image for HighDPI displays. However, the image is the same size as the src image, which means that its intrinsic size would be halved.

    So I suspect either the site shouldn’t be setting srcset, or the &zoom=2 is intended to provide a twice-as-big image, and that is somehow not happening.
    [Bugzilla ends]

    So back to you for advice – Ontheliner.

  • staff-totoro · Staff ·

    Hi again,

    That is what I might have expected. It sounds like the way that the theme was originally coded (back in 2010) is not compatible with how Firefox is handling highDPI displays now.

    Sadly the designers of Coraline could not have known back then that it would change like this, and because the theme is now retired we are not able to make any coding fixes. In this case to resolve the issue you would need to switch to a more modern theme than the one you have now. For example, I tried out this theme (which is similar but not the same) and it did not seem to have this image issue: https://wordpress.com/theme/penscratch-2

    Here is a preview of what the affected posts looks like (in Firefox) when using the Penscratch theme, and you can see it does not have this image issue:

    Click to view image

    Hope that helps. Please let us know if you have any more questions.

  • Unknown's avatar
    ontheliner · Member ·

    Much appreciated, jerrysarcastic. Let’s call it a day. Thanks for the suggested theme – less economic but hard to equal Coraline’s elegance and versatility. – Onthliner.

  • staff-totoro · Staff ·

    Gotcha. To be fair I should mention that it may be possible to get the images to display correctly on Firefox with the addition of custom CSS code, which is not possible under the Personal plan, but can be added under the Premium plan (and higher) so that is also that option here.

    By the same token, it would be possible to use CSS to take a theme like Penscratch, and style it to look similar to Coraline by picking similar fonts, styling the menu and sidebar widgets to match, etc.

    So if you are wishing to retain the look and feel of your current site, that is an option you could also consider. If you do decide to upgrade let us know and we can help with the CSS code you would need.

    Thanks for rocking WordPress.com! :)

  • The topic ‘Odd-sized pictures no longer fllng their frames’ is closed to new replies.