Webp Dimenstion - Question | JoomShaper

Webp Dimenstion

Matt

Matt

SP Page Builder 11 months ago

In the last update, we uncoverd an issue with using an image block with a webp image selected, specifically images that are taller than wider.

https://dev.sacredsites.com/asia/indonesia/gunung_padang_java.html The second image down.

For some reason if you set the height in the image block and save, the image fills the width and mangles the height.

In the past we could just set the height and it would sill resize wher it rended on the fount end, maintaing the image aspect ratio.

May of the tall images that were set prior to the upate render normally. But if I change the image file, it stretches to full width and crops the top/bottom when it renders.

0
13 Answers
SW
Sacred Sites Webmaster
Accepted Answer
11 months ago #177093

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.

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 11 months ago #177185

Hi there,

Thank you for reaching out, and I apologize for any inconvenience caused by this oversight. Please provide me the correct login information.

Username and password do not match or you do not have an account yet.

Best regards,

Toufiqur Rahman (Team Lead, Support)

0
Matt
Matt
Accepted Answer
11 months ago #177188

Apologies. It should work now.

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 11 months ago #177191

Username and password do not match or you do not have an account yet.

0
Matt
Matt
Accepted Answer
11 months ago #177193

Ugh. I should just stayed in bed this morning. 3rd Time's a charm. I was in the wrong site. Should work now.

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 11 months ago #177195

Would you please check and let me know. Thanks

0
Matt
Matt
Accepted Answer
11 months ago #177199

Worked for me just now.

0
SW
Sacred Sites Webmaster
Accepted Answer
11 months ago #177227

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

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 11 months ago #177253

Please check now. Thanks

0
Pavel
Pavel
Accepted Answer
11 months ago #177262

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.

0
SW
Sacred Sites Webmaster
Accepted Answer
10 months ago #177341

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.

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 10 months ago #177664

Hi there, Did you change administrator access?

Username and password do not match or you do not have an account yet.

Best regards,

Toufiqur Rahman (Team Lead, Support)

0
Pavel
Pavel
Accepted Answer
10 months ago #177372

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.

0