webp Dimenstion

More clarity on this issue:

This page exhibits the issue:

https://dev.sacredsites.com/asia/japan/zenkoji_temple_nagano.html

Look at the last image on the page. This is a 1200px height webp file. I set the height in PB to 650px. Instead of keeping the aspect ration, PB makes the width 100% of the container.

This was working before an update.

This page is fine: (see the alst image set to 650 height, the width is fine.

https://dev.sacredsites.com/africa/lesotho/ha_baroana_cave_paintings.html

On images whose height was set to 650px before the update, the image displays properly. Even if I edit the page in PB and change the height it displays properly. We are swapping out all the jpg images with webp on the PB pages. So now whenever I swap a jpg and set the height to 650, the width displays at 100% of the container instead of the calculated value based on the 650 setting.

Apologies. It should work now.

I created a new superadmin for you in case you need it.

On images whose height was set to 650px before the update, the image displays properly.

Hi. Sorry, but I doubt very much that it worked before the update, since all the images always had and have 100% default width and auto height. This is the base for responsive behavior. For the behavior that you describe would require auto width. But this has never happened in the code of Helix or SPPB.

Therefore, never set the height, but set the width, and leave the height field empty. For example, set width to 460px and you will get what you want.

Perhaps before the update you had it in the cache and you have not seen the real picture.

width = empty and height = some value should be using only in case of SVG image when it does not have its own width and height atributes in its code

Just a remark for the support team. Why do you try to get admin access to solve such simple things that are not the product issues, but are common web principles instead of just looking at the example of a page containing a problem? Thus spend your time and users. This is extremely not effective. You spent a day and did not solve the problem, instead of spending five minutes and solve the problem.

Thanks for your reply. Maybe the issue I am having is notr related to an update. Still, what you wrote does not match with my experience. Here are pages that have 1200px images set to 650 HEIGHT and have NO WIDTH SETTING that display properly. I have many more examples.

https://dev.sacredsites.com/africa/egypt/introduction_to_egyptian_sacred_places.html
2nd image

https://dev.sacredsites.com/africa/egypt/monastery_of_almuharraq.html
1st image

https://dev.sacredsites.com/africa/egypt/obelisk_of_queen_hapshetsut.html
1st and 2nd image

https://dev.sacredsites.com/africa/egypt/luxor_temple.html
2nd image

https://dev.sacredsites.com/africa/lesotho/ha_baroana_cave_paintings.html
4th image

https://dev.sacredsites.com/africa/libya/sacred_sites_of_libya.html
1st image

https://dev.sacredsites.com/africa/tunisia/kairouan.html
2nd and 3rd image

Again, all of these images are set to 650px HEIGHT with no setting for width.

But now, when I try to do this on other pages, it sets width to 100% container width. But if I go into any of the pages above and change the 650px value to another value and save it, it still DOES work. If I understand what you wrote, you are saying I have to calculate the width and add it to the width field. But on my site, that clearly is not true. What am I missing? thanks.

But on my site, that clearly is not true. What am I missing?

Hi. When setting up a height, the image proportions may not be stable and lead to unexpected results.

Knowing the basic properties of images among the web, it would never have occurred to me to set up the height, so in my practice I did not encounter this. Using the correct settings, you will get rid of unexpected results. Therefore, there is no point in dealing with why some images work normally for you, while others do not.

Just follow my recommendations above and you will not have a problem with this. Use the height settings only in the case of a responsive SVG image. In all other cases, use the width setting.