[Support request] fitting a photo to fit both large and small screen

[Laura Stella]

I have photos that I put on a page in large form, so they can be blown up if a reader wants to look at a detail, then scale down to fit how I want it to fit on the large screen page. When I look at the phone screen version, the photo is too large for the screen. Oddly, if I don’t scale the photo down, but keep it too large for how I want it on the full screen, it shows perfectly on the small screen, which means that making it smaller on the big screen makes it too big on the small screen. I always keep photos to 800pix width or lower, if that’s relevant. My posts are very photo-heavy, and photos are placed and sized precisely to fit with its text, which means there can’t be anything pre-set about their size position. For this reason, I often can’t use WP’s preset Gutenberg blocks for images with text.
At first, I looked for an optimal size, below which I know the small screen won’t cut off any part of the photo, which means sacrificing any kind of clarity if someone wants to look at a detail of the photo, but now it doesn’t seem to work like that. I am a simple blogger, unsophisticated in the ways and language of website design, terrified of having to deal with code and lost in an entire language so specific to how particular issues can differ. But I’d like to understand enough about how it works to know at least how to target the issue in case I can make custom size changes as different size and placement requirements arise. It is a simple site, non-commercial, a family biography whose old posts, like chapters of a novel, do not get outdated, remain a part of one long story, and whose photos and text must keep their readability through the never-ending changes made in web design, indefinitely. Photos are a large and fundamental part of the format, but seem to not have as easy a way of adapting to variations as with text. I don’t know how to, and shy away from the idea of having to, make two settings for two different sized screens. What happens when the next invention forces everyone to change their formats yet again?
I don’t suppose there’s a plug-in that resizes photos for the small screen without sacrificing adjustability on the large screen? Short of that, how do I size my photos on the large screen in a way that I know will transfer accurately to the small screen?
Thanks in advance.

[Fernando]

Hi Laura,

With regards to Images, WordPress controls the sizing, and here’s an article you may refer to with regards to it: https://docs.generatepress.com/article/adding-image-sizes/

Now, if you would like a different option to have control over images easily for different view, I would suggest using the GenerateBlocks free plugin Image Block. Reference: https://docs.generateblocks.com/article/image-overview/

Here’s a short screen recording showing how I can control image sizing through a GB Image Block: https://share.getcloudapp.com/xQuwzX91

“What happens when the next invention forces everyone to change their formats yet again?” – To clarify, are you referring to invention in terms of new devices with new dimensions or just WordPress innovations in general? I believe if there is, WordPress would adjust accordingly.

Hope this clarifies!

[Laura Stella]

I’m sorry Fernando. I don’t think I was very clear. My issue is getting a photo of whatever size I want on the large screen, to show up on the small screen in its full size, not too large. The ‘next invention’ I was talking about was the phone screen, which has made me have to reformat the photos and text of every single post. I remind you that my blog is basically a novel, where no posts get outdated, but rather are consistent parts of one long story. You wouldn’t reformat the second half of a book and leave the first looking askew.
If I’m understanding the things you sent me to read, none of them address the change in size from the full screen to the phone screen, so I don’t know how to respond. I can’t make a decision to switch to GP blocks if it doesn’t address how to get an image on the computer screen to fit the small screen. There are so many steps along the path from converting photos in the camera software, uploading them to the media library, choosing sizes, and then when it’s on the blog page, sizing it with the corner dots to fit with the text. As far as I’ve been able to see, any resizing whatsoever, smaller or larger, ruins the initial correct sizing and blows the photo up such that only a detail close-up is seen on the phone screen.
For what it’s worth, I rarely use WP’s thumbnail, medium, large settings. I just keep it on full.
I hope I am clearer this time.
Thanks, Fernando

[Fernando]

Hi Laura,

To have a better understanding of the issue, can you point us to a location in your website where the image issue -“change in size from the full screen to the phone screen”- is apparent?

Hope to hear from you soon.

[Laura Stella]

I discovered something today. I’ve been going on the feedback from a friend about a year ago that he found my posts difficult when they were too wide for the screen and he had to move the picture side to side to see it all, and sometimes he couldn’t move it far enough.
Well, I’ve been using WP’s “preview mode:mobile” to show me whether my photos are showing up in their correct sizes. The photo below, which I wish I could send you in a larger form (sorry) shows you a side-by-side comparison of my edit page, and their preview of what it would look like on a mobile, where only half the photo is visible. That’s where the complications came from that I described to you, fiddling with the size on upload to get the mobile view right, and not being able to use the photo’s corner dots on the edit page to adjust its size for surrounding text, since that seemed to override whatever had made it fit properly upon initial upload, blowing it up to twice the size than the screen would show, whether the change I made was larger or smaller.
Today, though, I temporarily published the unfinished post so that you could access it, then accessed it myself on my phone. And everything was fine. The actual picture on my phone, and what WP’s mobile preview function showed were nothing alike. Has some adjustment to the most modern phones included the function I was initially asking for, an automatic resizing to the size of screen being used? Has this made my issue any clearer for you?
https://lens.google.com/search?p=AS3Fu8pQvR14hfNdO5Pz3XB3gQkeK_nyHCVzQL8wwW-1FVdXc9JGEyQJ0nXVb25vIcT6MD4zMe0trCTepKwrTT6vHR3XygTSS3qAa6-nbJIBUX4hrk_kWTWrkDX3B7wYa0ZBLkssseiMKFBPc5koLO0Sfw0KRoUTUtU_9wzUch_Bmc3b_0PKyNv8bTXSdCKo1fAIU3R7tmH4V5Xxnw9wyJnT2VO5u5isMPP14nnu34Jm8oVEskqMaXkmC8YpeVs4&ep=gisb&hl=en&pli=1#lns=W251bGwsbnVsbCxudWxsLG51bGwsbnVsbCxudWxsLG51bGwsIkVrY0tKR0UyWXpGbE1tRXdMV0psTUdFdE5EUm1OaTA1TkdZM0xXWTBaakV6TW1FNU0yWmpOUklmVlRaM2Myd3dOSEJvWlc5U1JVWkRjWGQ0VEhKTVVEUmhjM2N5VDBoNFp3PT0iXQ==

[Ying]

Hi Laura,

Can you link us to this post so we can see the code?

[Laura Stella]

It is not a finished post. I will publish it ‘password only’ only for the time you need to access it. see below for link and password.

[Ying]

I don’t seem to see the issue, this is the widest image on your post, but it shows fully on small screen:
https://www.screencast.com/t/Z10dJe7Bj

[Laura Stella]

In my last note, I explained that it was the editor’s mobile screen preview that was faulty and didn’t represent what was actually on my phone screen, which was sized correctly. Did you see the screenshot I sent of my post’s edit page side by side with its mobile preview, where the preview shows the photo twice as big as the screen? It was showing perfectly on my phone, but I couldn’t take a picture of my phone with my phone. When will I be able to use the editor’s preview of the mobile screen accurately without having to use my phone to double check it.
It is the function of the editor’s mobile-screen preview that is the issue. Are you not able to access my editor’s page?

[Fernando]

I see. Thank you for clarifying.

That’s controlled by WordPress itself.

Does this occur for all or most your images? GeneratePress shouldn’t be causing that issue. There’s no code in GP that would cause that.

It may be a WordPress bug. I believe it would be best to ask in the WordPress forums with regards to this: https://wordpress.org/support/forum/wp-advanced/

Hope this clarifies!

[Author]

Posts