Images not resizing

Hi

I have same issue on my side.
Images wherever we place it as a single block in a page, in one column, in a cover or in a colum with column in cover, the resize set in settings applied to back as a preview but do not apply on the front.

@paaljoachim have you ever met this issue ?

Hi

I am testing with WordPress 5.8 RC4 (5.8 will be released on the 20th of July.)
Theme Twenty Twenty One.
The Gutenberg plugin is not activated.

Percentage change:
I added an image to an Image block. Clicked 25%. Noticed the change in the backend. Noticed the change in a preview (frontend). Noticed the change in a published page (frontend).

Dragging Image handle bars:
(Making the image really small)
I was able to see changes in backend. Preview (frontend). Published page (frontend).

My conclusion is that for WordPress 5.8 these things have been fixed.
In the mean time you can install and activate the Gutenberg plugin and retest or wait until 5.8 has been released and then retest.

I am experiencing this issue and missing images outright

Hi @paaljoachim

I have done more testing, please find below screenshots
I have WP 5.7.2

I deactivated Gutenberg and switch theme to twenty twenty one
I have placed HEADING H1 over image to have an idea of place it takes on the front, the image does not seem to be 1920 x 1080 on the front
TEST 1 – picture 100%
BACK (picture 1920×1080) https://ibb.co/m6sT17g
FRONT (picture 1920×1080) https://ibb.co/BzpryWq

TEST 2 – picture 25%
BACK (picture 480×270) https://ibb.co/4NrGyfb
FRONT (picture 480×270) https://ibb.co/LtGXpyT

There is not much difference on the front between 100% and 25%, difference is closer to what it should be on the back

WP 5.8 release is tomorrow, I will update it and check if issue is still

Please test WordPress 5.8 when it has been released and add another comment in this thread. Thanks!

Hi @paaljoachim

I tested resizing my images with the new 5.8 update, but it didn’t fix anything. The image still doesn’t resize on the front-end of my site when I use the percentages or by dragging the image handle bars. It only changes size if I use the dropdown menu with the thumbnail – full size sizes.

Hey @kaylag423 and @johan_walter

I would suggest having a development site where one can test out various things. Such as switching to a default theme (Twenty Twenty One or Twenty Twenty). Turning off all plugins. Then testing to see if the issue remains. If it is still experienced then it sounds like a Gutenberg plugin issue. If it is gone then it is likely a theme or plugin related issue.

From my comment above. I tested and it worked for me. So I assume it is a theme or plugin issue.

Hi @paaljoachim , @kaylag423

I have a staging website on which I have made more testing

I updated WP 5.8, Gutenberg 11.1.0 and switch to twenty twenty one theme
Issue is still, image does not resize when changing percentage
Somehow, I managed to make it work setting an alignment
Screenshot https://ibb.co/8z37BtY

By default, image does not have any alignment, after changing alignment, percentage works.
Percentage resize seems to be related to image alignment
Example
1 – Alignment set to “Large width”, image is original size without any percentage
Screenshot https://ibb.co/9yVcPrw
2 – Alignment set to “center” , it does not display as original size as mentioned in sidebar on the right, it seems to have a maximum size to display on the front.
Percentage works but width and height displayed in sidebar in the back are not correct comparing to what display on the front
There is also a preview issue in the back, image is out of the frame and does begind the sidebar
BACK https://ibb.co/m89XmRG
FRONT https://ibb.co/vVgbrm8

3 – I changed alignment to right, I do not have acces to option bar of image.
If I have my theme enabled, I can see the option bar but cannot acces fully
Screenshot https://ibb.co/x55jGvc

My guess is that percentage is related to alignment and that it seems to have display bugs between what we see in the back and what is on the front but playing with alignment we can managed to resize images.

Hi,

I just tested on WP 5.8 with and without the Gutenberg plugin activated, and I cannot reproduce the issue.

@kaylag423 and @johan_walter, can you check the image element’s width and height attributes on the front-end and see if the correct size is set there?

Thanks,

George

Hi @mamaduka

In the back image size set to 1024 x 576
Screenshot https://ibb.co/k8cW9pT
On the front image has rendered size 610 x 343.13
Screenshot https://ibb.co/6F4DG8B
But in the code width and height are same than in the back
Screenshot https://ibb.co/RB1sj8Y

Thanks for the additional information, @johan_walter.

It looks like the image is contained by theme styling.

In the case of the TwentyTwenty One theme, when an image has no alignment, it sets the max-width style, which is around 610px.

If you want to display images larger than the content, you have to specify “Wide width” or “Full width” alignments and control image size with a dropdown.

Thanks @mamaduka
So it confirms my earlier testing (details before your first post on this thread)
Image resizing is related to image alignment
Besides, as you mentionned TwentyTwenty One, we might also have difference depending on theme

Hi @mamaduka

Thanks for the information. However, I usually want to make the image smaller, so I don’t think my problem is that I am reaching the max width of an image. I did more testing and found that the code on the frontend is different if I use the percentages (besides 100%) or dragged the image handlebars. At 100% or no percent chosen, the width and height appear at the beginning of the code. While, resizing the image changes the code to not display width and height at the beginning, but shows the width and height after the image link. Is this normal?

Here is an example:
Large without using percentages
Backend – 1024×623
Frontend – 1024×623 (this one rendered correctly)
Screenshot of code – https://snipboard.io/AfIxKk.jpg

Large at 50%
Backend – 512×342
Frontend – 1024×623
Screenshot of code (it shows the size as 512×342 in the code, just not in the same format as the example above) – https://snipboard.io/SDQCFJ.jpg

The same pattern happened when I resized it to medium or dragged the image handlebars as well. Maybe my theme is changing it.

• This reply was modified 3 years, 8 months ago by kaylag423.