Images displayed too large—cropped off the page
-
Just two days ago it appears that all images on all posts appear in at least double their size, with right half of the image cropped from the page, displaying only the left half.
I did not change any setting on the theme or content of the posts. Some universal trigger must have changed.
Ideas how to fix it?
WP.com: Yes
Correct account: YesThe blog I need help with is: (visible only to logged in users)
-
Hi there,
I see all the images on your site are being hotlinked from another source, and they’re being displayed at the size we’re getting them at from that source, as there’s no specifications in the image HTML restricting the size of the images. So it’s possible something changed at the source for these images.
Edit your most recent post, and replace those hotlinked images with the actual image files uploaded to your site’s media library. Does that make any difference?
If that doesn’t help, the other option is that the problem is with your theme. The Titan theme you’re using was retired already in 2013, and hasn’t been updated to support the block editor which was introduced in 2019. So it’s possible an update to the block editor/the image block that the theme isn’t compatible with caused this.
If that’s the case, we won’t be able to fix it, as this theme no longer receives any updates or bug fixes. In that case I recommend you switch to a newer theme that’s currently supported, or else it might still work if you stick to using the classic editor rather than blocks for your posts.
Let me know if you have any questions.
-
Looks like the problem solved itself Kokkie. Meanwhile, I will look to change the theme. Any recommendations for similar one?
-
Thanks for letting me know!
I don’t know of anything current that has a similar look to Titan – design trends have evolved quite a bit since that theme was originally created over a decade ago, and people just don’t build themes that look like that any more :)
But I see you just switched to the Twenty Twenty-Two theme. If you want to make use of the newest features WordPress has to offer, that one or any of our recommended themes under Appearance ->Themes are the best options. These new themes all support the new site editor, which allows you a lot of flexibility to customize your theme beyond the initial design you get when you activate it.
You can find details on how the site editor works here:
https://wordpress.com/en/support/site-editor/
If you’d like help to do anything specific, just let us know what you’d like to do, and we can help you figure out how to do it.
-
I did switch Kokkie. With the new theme, the content appears very wide on the page, even forcing horizontal bars. How to narrow the display?
I am also missing the various widgets to search, subscribe, etc. Where to add these? I do not see Widgets option in the Appearance menu.
-
the content appears very wide on the page, even forcing horizontal bars. How to narrow the display?
This is still due to the fact that you’re hotlinking the images (which actually confirms that the issue was the images all along, rather than the theme). This prevents the default size presets in the media library from being applied to your images, so they default to displaying at the full size as they’re being received from the source.
Edit the post, and edit each image block in turn. Setting an explicit alignment for the image will help, but you can also specify the exact size at which you want each image to appear:
I am also missing the various widgets to search, subscribe, etc. Where to add these? I do not see Widgets option in the Appearance menu.
WordPress 5.8 that came out last year changed all widgets to blocks that can be used in the editor, and then WordPress 5.9 which came out in January introduced the site editor, which uses blocks to control the entire site layout.
As a result, new themes designed for the site editor no longer has widget areas like we’ve grown used to. Instead, you add widgets directly to your site’s templates in the site editor.
The simplest is to add the widget blocks to the footer block – go to Appearance ->Edit in the dashboard, select the footer there, and you can add widget blocks in the footer:
If you prefer a sidebar, you can also use the site editor to create a sidebar for your theme, though that process is a bit more complex:
https://wordpress.com/en/support/add-a-sidebar/
At the moment we have one block theme that has a sidebar created by default, Stewart, if you want to look at that one. You’ll still use the site editor to add widget blocks to the sidebar.
-
Sorry Kokkie. That does not actually “confirms that the issue was the images all along”.
Not a single post has explicit image size. Images were displayed up to the text column width. It worked for years, always, never had a problem with width until two days ago.
I would have assumed that, given dynamic screen & font sizes, the image size would adjust.
Which how it has always worked. I am not convinced that I need to put an absolute image size. Rather, prefer that it be dynamic to match the column width.
Is that not possible?
-
I see in the HTML the image size
<figure class=”wp-block-image size-large”>Is there a way to change the “size-large” to something like “size-content-width”, to be relative to the page, rather than absolute number of pixels?
This would be no different from the way WordPress displays the image when I am editing the post. In Edit mode, the image appears exactly to the full width of the text. It is only when published, it is displayed wider than the text.
How to use a similar image size definition to keep it dynamic to match text width?
-
I tested the idea of absolute image sizes Kokkie.
For the one image on this post, I entered 600×600:
https://mcccxxv.wordpress.com/2022/02/25/gps-device-elevation-accuracyThat now does display correctly on wide desktop screen.
On mobile, though, it is far larger than the screen.
How will that work between different screen sizes on desktop vs mobile, without dynamic size?
-
There are ways to force all images on a site to fit a certain width; that can be done with CSS.
But just to confirm, first: if you download the image, upload it to your media library, and then use that in the post, does it have the same issue? If you’re willing, copy a recent post, then replace its images by uploading those images to the media library. You can keep the post at private or draft status, and update us here.
We can look into what may have changed with image embeds from other sites, however, I do want to point out that hotlinked images are prone to stop working at some point, unless the site you’re linking from is expressly designed for that purpose.
Twitter is definitely not known as an image storage and hotlinking site, so I’d advise against hotlinking images on their servers. Just download the image, add it to the media library, then if you’d like, link to the original tweet.
-
Also, just to confirm, what method have you been using to embed images from outside sources?
-
Thank you Supernovia. The problem appears with all external images: from Google Photos, Twitter, OneDrive, etc. I embed many external images, some of them are dynamic that could change over time. I cannot simply load them in the library.
The problem does not happen for images stored in media library—they work correctly on desktop & mobile, scaling to the correct screen size.
Whenever I add a fixed width to image sizes, that works with one screen size, but surely does not work on mobile.
I select the Image block, then Insert from URL.
In this post:
The first image for Praline is from media library. It scales properly on desktop & mobile just to the text width.
<figure class=”wp-block-image size-large”>
</figure>The second image for Whole Hazelnuts is from my OneDrive. It does not scale.
<figure class=”wp-block-image size-large”></figure>
Other ideas to make images scale?
I have 100+ blog posts, all with the same method, never a fixed width for images, & all have worked.
I updated the theme to a new one. Not sure what else to do.
-
Notice please that the same images with the same hot link reference, they scale properly on this forums page, whenever I display this thread on desktop or mobile.
How come the same does not happen on the blog post?
-
Hi, you’ll want to not our forums do not support the
<figure>tag.The theme for the forums was designed with a limited content area in mind. Most other current themes are built so that content can extend beyond the default width.
If you’d like to add a stylesheet to your site to automatically scale all images depending on screen size, you can. You’d just need a plan that supports that:
https://wordpress.com/pricing@kokkeih is right, though: the media library has several functions that an embedded image will not have, including the ability to optimize for mobile.
And, as I mentioned, I would avoid hotlinking unless the site has given express permission for that, as the images are bound to break at some point. This article has some details.
-
For what it’s worth, I did look through some new-ish themes to see if there are any that resize embedded content. Maywood, if you can use that, seems to handle that.
The hotlinked images still can’t be added as featured images, and still won’t be automatically resized. But they can be “squished down” with the theme’s style, and that one will do it for you.
-
I am utterly puzzled Supernovia. Scaling the image size seems to be the most basic of functions, instead of displaying it at fixed width.
Did you not find anything changed over the past few days with the style sheet? This has worked for years on blog posts more than eight years old. Never had a problem.
I am using hot links to my own personal OneDrive with explicit function to embed images. Why is that a problem? The same happens with my own personal pictures on Google Drive. Why should that not work?
Can you please confirm there is not a problem with the style sheet?
-
-
Titan is a retired theme. Its last functional update was four years ago; eleven months ago it had some new translations added.
Is it possible the service you’re embedding from, or whatever services they use, had some sort of update?
As for what we can do on this side, I’d recommend once more, to stop hotlinking images.
If you must hotlink, you’ll need to either add some CSS, or use a theme that already includes it. Maywood looks like it will do.
-
and yes Maywood works for blog posts. Just don’t change the front page, or add a blog posts block to it.
-
Super news Supernovia. The Maywood seems to be scaling the images properly. THANK YOU very much.
- The topic ‘Images displayed too large—cropped off the page’ is closed to new replies.
WordPress.com Forums 