Jump to content
thirty bees forum
  • 0

WebP image format

vsn

Asked by vsn,

 Share

Question

22 answers to this question

Recommended Posts

  • 0
vsn Rookie

vsn

Posted
  • Author
Posted
On 4/9/2019 at 11:09 AM, Jonny said:

If your theme supports WebP, then you can find an option on the "BO>Images" page to enable WebP, Panda theme v1 for TB supports WebP, here is a demo http://thirtybees.sunnytoo.com/en/

Hi Jonny, could you please share with a screenshot of this setting? I have upgraded both TB and the panda theme, but I am sill not able to see this setting. I guess some php extensions must be activated on my server. Thanks! Sergey

Link to comment
Share on other sites
  • 0
Jonny Newbie

Jonny

Posted
Posted

@colorful-ant Panda 1.4.3 doesn't support webp feature. If you need to use WebP feature, then upgrade your theme to Panda 1.4.6, your change to the  /config/xml/ themes/panda.xml is right.

@vsn I forgot to mention that for people who upgrade from old versions to 1.4.6, you need to add this code to the  /config/xml/ themes/panda.xml file. 

<webp>1</webp>

 

Screenshot01048.jpg

Link to comment
Share on other sites
  • 0
vsn Rookie

vsn

Posted
  • Author
Posted

I probably missed something... Even in case I modify /config/xml/ themes/panda.xml manually, should the images itself not be in .web format? I would expect you need to re-generate the product images into the .web format. Somehow. This is exactly the step I missing.

Link to comment
Share on other sites
  • 0
Jonny Newbie

Jonny

Posted
Posted (edited)

Since you've already modified the panda.xml,  if you did the modification correctly, then you can see a WebP option on the BO>Images page, what you need to do are: 

1) Enable that option.

2) Regenerate thumbnails.

thumbnails will be saved in both .jpg and .wepb, .jpg are used for Safari.

Screenshot01053.jpg

Screenshot01052.jpg

Edited by Jonny
Link to comment
Share on other sites
  • 0
datakick Experienced

datakick

Posted
Posted

this is my nginx.conf: 

server {
    listen 80;
    index index.php index.html;
    server_name localhost;
    root /var/www/default;

    # use original IP address changed by cloudflare
    set_real_ip_from 103.21.244.0/22;
    set_real_ip_from 103.22.200.0/22;
    set_real_ip_from 103.31.4.0/22;
    set_real_ip_from 104.16.0.0/12;
    set_real_ip_from 108.162.192.0/18;
    set_real_ip_from 131.0.72.0/22;
    set_real_ip_from 141.101.64.0/18;
    set_real_ip_from 162.158.0.0/15;
    set_real_ip_from 172.64.0.0/13;
    set_real_ip_from 173.245.48.0/20;
    set_real_ip_from 188.114.96.0/20;
    set_real_ip_from 190.93.240.0/20;
    set_real_ip_from 197.234.240.0/22;
    set_real_ip_from 198.41.128.0/17;
    set_real_ip_from 2400:cb00::/32;
    set_real_ip_from 2606:4700::/32;
    set_real_ip_from 2803:f800::/32;
    set_real_ip_from 2405:b500::/32;
    set_real_ip_from 2405:8100::/32;
    set_real_ip_from 2c0f:f248::/32;
    set_real_ip_from 2a06:98c0::/29;
    real_ip_header CF-Connecting-IP;

    location / {
        try_files  $uri  $uri/  /index.php?$args;
        index index.php;
    }

    location ~* \.(eot|gif|ico|jpg|jpeg|otf|pdf|png|svg|swf|ttf|woff|webp)$ {
        rewrite ^/([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$1$2$3.jpg break;
        rewrite ^/([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$1$2$3$4.jpg break;
        rewrite ^/([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$3/$1$2$3$4$5.jpg break;
        rewrite ^/([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$3/$4/$1$2$3$4$5$6.jpg break;
        rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$3/$4/$5/$1$2$3$4$5$6$7.jpg break;
        rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$3/$4/$5/$6/$1$2$3$4$5$6$7$8.jpg break;
        rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$3/$4/$5/$6/$7/$1$2$3$4$5$6$7$8$9.jpg break;
        rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$3/$4/$5/$6/$7/$8/$1$2$3$4$5$6$7$8$9$10.jpg break;
        rewrite ^/c/([0-9]+)(\-[\.*_a-zA-Z0-9-]*)(-[0-9]+)?/.+\.jpg$ /img/c/$1$2$3.jpg break;
        rewrite ^/c/([a-zA-Z_-]+)(-[0-9]+)?/.+\.jpg$ /img/c/$1$2.jpg break;

        rewrite ^/([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ /img/p/$1/$1$2$3.webp break;
        rewrite ^/([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ /img/p/$1/$2/$1$2$3$4.webp break;
        rewrite ^/([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ /img/p/$1/$2/$3/$1$2$3$4$5.webp break;
        rewrite ^/([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ /img/p/$1/$2/$3/$4/$1$2$3$4$5$6.webp break;
        rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ /img/p/$1/$2/$3/$4/$5/$1$2$3$4$5$6$7.webp break;
        rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ /img/p/$1/$2/$3/$4/$5/$6/$1$2$3$4$5$6$7$8.webp break;
        rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ /img/p/$1/$2/$3/$4/$5/$6/$7/$1$2$3$4$5$6$7$8$9.webp break;
        rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ /img/p/$1/$2/$3/$4/$5/$6/$7/$8/$1$2$3$4$5$6$7$8$9$10.webp break;
        rewrite ^/c/([0-9]+)(\-[\.*_a-zA-Z0-9-]*)(-[0-9]+)?/.+\.webp$ /img/c/$1$2$3.webp break;
        rewrite ^/c/([a-zA-Z_-]+)(-[0-9]+)?/.+\.webp$ /img/c/$1$2.webp break;
 
        allow all;
    }

    location ~ \.php$ {
        try_files  $uri  $uri/  /index.php?$args;
        index  index.html index.htm index.php;

        fastcgi_param PATH_INFO $fastcgi_path_info;
        fastcgi_param PATH_TRANSLATED $document_root$fastcgi_path_info;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;

        fastcgi_pass php:9000;
        fastcgi_index index.php;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_intercept_errors on;
        fastcgi_read_timeout 360s;
        include fastcgi_params;
    }
}

 

  • Like 1
Link to comment
Share on other sites
  • 0
Adik Explorer

Adik

Posted
Posted (edited)

Thank you Petr, do not forget about expires of webp files: 

location ~* \.(eot|ttf|woff|eof|woff2|css|js|jsonp|jpg|jpeg|gif|png|ico|svg|webm|mp3|mp4|webp)$ {
        add_header Access-Control-Allow-Origin *;
        # ~ 10 Days
        expires 604800s;
    }
Edited by Adik
Link to comment
Share on other sites
  • 0
Okiproko Newbie

Okiproko

Posted
Posted

I did not understand something ...

I also followed the instructions to the letter, but nothing appears ...

I use Thirty Bees 1.0.8 and Panda Theme 1.4.6

In BO-> Images, Webp appears and activated

1702772760_Capturedecran2019-05-02a13_22_49.thumb.png.ad022c611f32f1c9a424b470fea15b1e.png

Regenerated images, but nothing in front office

2105704245_Capturedecran2019-05-02a13_22_58.thumb.png.d0befc5ff9389ffb21b9277dfdf1ca96.png

and in the Images directory since FTP, no image was created in Webp

1694888915_Capturedecran2019-05-02a13_24_09.png.9498c5d223efc9b19a029b27665839d3.png

Is there anything else to do?

Link to comment
Share on other sites
  • 0
Jonny Newbie

Jonny

Posted
Posted

I guess that's probably due to your server doesn't support webp, although webp is a built-in extension of php, but it's not installed on all server. You can find a tool on my site to test if webp is supported. You can ask your server provider to help you add webp-support.

Link to comment
Share on other sites
  • 0
Smile Contributor

Smile

Posted
Posted

I have updated Panda to 1.5.3 and TB to 1.1.0. I tested the server with the file from sunnytoo. Webp was supported "Congruts, so webp is supported.".

 

But it does not show under the image settings.... 😕 

What can be the case?

Link to comment
Share on other sites
  • 0
Smile Contributor

Smile

Posted
Posted (edited)

Yes that seems the issue the whole file was not on this test environment. But the file looks a whole different. 

<?xml version="1.0" encoding="UTF-8"?>
<theme version="1.0" name="panda" directory="panda">
  <author name="Jonny Li" email="helloemj@gmail.com" url="http://www.sunnytoo.com"/>
  <descriptions>
    <description iso="en"/>
  </descriptions>
  <variations>
    <variation name="panda" directory="panda" responsive="1" default_left_column="1" default_right_column="0" product_per_page="9" from="1.1.0"/>
  </variations>
  <docs>
    <doc name="documentation" path="doc/"/>
  </docs>
  <metas>
    <meta meta_page="pagenotfound" left="0" right="0"/>
    <meta meta_page="best-sales" left="1" right="0"/>
    <meta meta_page="contact" left="0" right="0"/>
    <meta meta_page="index" left="0" right="0"/>
    <meta meta_page="manufacturer" left="1" right="0"/>
    <meta meta_page="new-products" left="1" right="0"/>
    <meta meta_page="password" left="0" right="0"/>
    <meta meta_page="prices-drop" left="1" right="0"/>
  </metas>
  <modules>
    <module action="enable" name="stthemeeditor"/>
    <module action="enable" name="steasycontent"/>
    <module action="disable" name="themeconfigurator"/>
    <module action="disable" name="thememanager"/>
    <hooks>
      <hook module="beesblogrecentposts" hook="displayHome" position="7"/>
      <hook module="blockcart_mod" hook="displayTop" position="6"/>
      <hook module="blockcategories" hook="Header" position="7"/>
      <hook module="blockcategories" hook="actionAdminLanguagesControllerStatusBefore" position="1"/>
      <hook module="blockcategories" hook="actionAdminMetaControllerUpdate_optionsBefore" position="1"/>

      <hook module="blocklanguages_mod" hook="displayMobileMenu" position="2"/>
      <hook module="sttwitterembeddedtimelines" hook="displayFooterPrimary" position="2"/>
    </hooks>
  </modules>
  <images>
    <image name="cart_default" width="45" height="51" products="true" categories="false" manufacturers="false" suppliers="false" scenes="false"/>
    <image name="small_default" width="70" height="80" products="true" categories="false" manufacturers="true" suppliers="true" scenes="false"/>
    <image name="manufacturer_default" width="169" height="104" products="false" categories="false" manufacturers="true" suppliers="true" scenes="false"/>
    <image name="category_default_2x" width="870" height="218" products="false" categories="true" manufacturers="false" suppliers="false" scenes="false"/>
    <image name="thickbox_default_2x" width="700" height="800" products="true" categories="false" manufacturers="false" suppliers="false" scenes="false"/>
  </images>
</theme>

?

Edit: shorten the file a bit...

Edited by Smile
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to question listing
×
×
  • Create New...