Hello @t33b33
Can you please post your website’s URL so we can carefully analyse the issue using the dev tools?
Many thanks!
Hello @t33b33,
I just tested this with the default WordPress themes and same thing happens, please see this video – https://d.pr/v/O7fbkz
Most likely there is an issue with the Height input option because it should rewrite the height: auto property.
But, I also noticed that if you resize the image from the resize image controls – the height will be applied correctly, please see this video – https://d.pr/v/rrcwR2
Hope this helps 🙂
Thread Starter
t33b33
(@t33b33)
My tests have shown that when using the Blocksy theme, it works the way you showed in the video. However, if you also use a child theme it will not work as shown on this page: https://blocksy.webspace.rocks/2021/09/02/gutenberg-image-block-issue/ . So far I haven’t understood what exactly is going wrong here.
Hey @t33b33,
As I can see the resize functionality works fine on my end, please see this video – https://d.pr/v/XsCKxy
I also noticed a strange behavior with this but it is not related to our theme as this block is a WordPress native block and we don’t control it from the theme.
Sometimes it doesn’t respect the size you set but I found a quick fix.
Click the 100% option then publish the changes and refresh the page, after that drag and resize the image from here.
Hope this helps.
Thread Starter
t33b33
(@t33b33)
The problem occurs when using Blocksy with the EWWW Image Optimizer plugin under certain conditions that I haven’t fully understood yet. Maybe it has to do with lazy loading.
However, if the image is not taken from the media library, a similar phenomenon can be demonstrated with Blocksy alone. Please use this block in a Gutenberg editor post and then try to adjust the sizes so that it is taken into account in the frontend:
<!-- wp:image {"align":"left","width":300,"height":225,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="alignleft size-large is-resized"><img src="https://demo.creativethemes.com/blocksy/blog/wp-content/uploads/2020/01/pawel-czerwinski-1654487-unsplash.jpg" alt="" width="300" height="225"/></figure></div>
<!-- /wp:image -->
Everything works fine in the backend, but in the frontend the image is always displayed in full size. Can you reproduce this behavior?
Solving this issue could also solve the problem that occurs along with the EWWW image optimizer.
Hello @t33b33,
Could you please go to Customizer -> General -> Entry Content and deactivate the “Left & Right Blocks Offset” option?
After this please check your image, resize it and see if everything works fine.
Waiting a reply from you.
Thread Starter
t33b33
(@t33b33)
Disabling the “Left & Right Blocks Offset” option seems to help a little: the width is now correct, but the height is only adjusted according to the original ratio. The image https://blocksy.webspace.rocks/2021/09/02/gutenberg-image-block-issue/#height-not-200 should have a width and height of 200px, but it is displayed with a width of 200px and a height of 150px.
If the setting
img {
height: auto
}
from main.min.css is deactivated (e.g. with the web developer tools of a browser), the image is displayed as desired with a width and height of 200px …
Hey @t33b33,
Did you tried the latest theme update (version 1.8.5.5)?
We added a small improvement and now even with the “Left & Right Blocks Offset” option enabled it should work fine.
Regarding the height: auto, actually that’s a normal thing, and if you will take a closer look all themes apply this property to images.
If we will remove this property, the image will be distorted, here is an example – https://d.pr/v/OGKDDM
If you want a square image (equal height and width), you have to use the crop option, here is a quick video – https://d.pr/v/hN9XUs
Hope this helps.
Thread Starter
t33b33
(@t33b33)
The improvement with the “Left & Right Blocks Offset” option works fine. Thanks for that.
However, I still don’t understand for what you need height: auto. If you don’t want the distortion, you can use custom CSS. In contrast, height: auto cannot be “fixed” with custom CSS: https://stackoverflow.com/questions/44010645/remove-height-auto-using-css
In any case, thank you very much for your help and effort.
Hello @t33b33,
This is more like a standard CSS reset for images.
If you will remove that property – all images are going to look distorted.
With this property in place – the image is taking an auto height based on its width in order to keep it’s aspect ratio.
Hope this makes sense.
