对 Prestashop 1.7 的 webP 支持

Question

当浏览器支持且 webp 文件可用时，我在 .htaccess 中使用此代码来提供 webp 文件而不是 .jpg 和 .png 文件：

RewriteEngine on
<Files *.webp>
    Header set Vary "Accept-Encoding"
    AddType "image/webp" .webp
    AddEncoding webp .webp
</Files>
RewriteCond %{HTTP:Accept} image/webp
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule ^(.*)$ $1.webp [L]

通常它工作得很好，但在 prestashop 1.7 中有很多图像重写，以使 url seo 友好，所以我的重写被忽略了：

RewriteRule ^([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$1$2$3.jpg [L]
Rewrite.....

我被困在这里，我无法触及 prestashop 重写，因为它是完全生成的，我只能在 htaccess 文件的末尾添加规则。你有什么想法吗？

Answer 1

我目前正在处理完全相同的问题。

我可以给出一个部分解决方案，但它比仅仅修改 htaccess 要复杂一些。

我覆盖了 Link.php，让我的图片网址为 img.jpg.webp 格式

<?php

class Link extends LinkCore {

    
    protected $supportedBrowser = false;

    /**
     * Link constructor.
     *
     * @param null $protocolLink
     * @param null $protocolContent
     */
    public function __construct( $protocolLink = null, $protocolContent = null ) {
        parent::__construct( $protocolLink, $protocolContent );
        $this->supportedBrowser = $this->isSupportedBrowser();
    }

    /**
     * @param string $name
     * @param string $ids
     * @param null $type
     *
     * @return array|string|string[]
     */
    public function getImageLink( $name, $ids, $type = null ) {
        $parent = parent::getImageLink( $name, $ids, $type );
        if ( $this->supportedBrowser ) {
            return str_replace( '.jpg', '.jpg.webp', $parent );
        }

        return $parent;
    }

    /**
     * @param $name
     * @param $idCategory
     * @param null $type
     *
     * @return array|string|string[]
     */
    public function getCatImageLink( $name, $idCategory, $type = null ) {
        $parent = parent::getCatImageLink( $name, $idCategory, $type );
        if ( $this->supportedBrowser ) {
            return str_replace( '.jpg', '.jpg.webp', $parent );
        }

        return $parent;
    }

    /**
     * @param $idSupplier
     * @param null $type
     *
     * @return array|string|string[]
     */
    public function getSupplierImageLink( $idSupplier, $type = null ) {
        $parent = parent::getSupplierImageLink( $idSupplier, $type );
        if ( $this->supportedBrowser ) {
            return str_replace( '.jpg', '.jpg.webp', $parent );
        }

        return $parent;
    }

    /**
     * @param $name
     * @param $idStore
     * @param null $type
     *
     * @return array|string|string[]
     */
    public function getStoreImageLink( $name, $idStore, $type = null ) {
        $parent = parent::getStoreImageLink( $name, $idStore, $type );
        if ( $this->supportedBrowser ) {
            return str_replace( '.jpg', '.jpg.webp', $parent );
        }

        return $parent;
    }

    /**
     * @param $idManufacturer
     * @param null $type
     *
     * @return array|string|string[]
     */
    public function getManufacturerImageLink( $idManufacturer, $type = null ) {
        $parent = parent::getManufacturerImageLink( $idManufacturer, $type );
        if ( $this->supportedBrowser ) {
            return str_replace( '.jpg', '.jpg.webp', $parent );
        }

        return $parent;
    }

    /**
     * @return bool
     */
    public function isSupportedBrowser(): bool {
        return true === isset( $_SERVER['HTTP_ACCEPT'] ) && false !== strpos($_SERVER['HTTP_ACCEPT'], 'image/webp');
    }
}

然后我在htaccess的顶部写了这组规则

#Generate webp support
RewriteRule . - [E=REWRITEBASE:/]

# Apache 2.2
<IfModule !mod_authz_core.c>
    <Files ~ "(?i)^.*\.(webp)$">
        Allow from all
    </Files>
</IfModule>
# Apache 2.4
<IfModule mod_authz_core.c>
    <Files ~ "(?i)^.*\.(webp)$">
        Require all granted
        allow from all
    </Files>
</IfModule>


<IfModule mod_setenvif.c>
SetEnvIf Request_URI "\.(jpe?g|png)$" REQUEST_image
</IfModule>

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp]
</IfModule>

<IfModule mod_headers.c>
Header append Vary Accept env=REQUEST_image
</IfModule>

<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>
#Domain: localhost

RewriteCond %{HTTP_HOST} ^localhost$
RewriteRule ^([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ %{ENV:REWRITEBASE}img/p/$1/$1$2$3.jpg.webp [L]

RewriteCond %{HTTP_HOST} ^localhost$
RewriteRule ^([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ %{ENV:REWRITEBASE}img/p/$1/$2/$1$2$3$4.jpg.webp [L]

RewriteCond %{HTTP_HOST} ^localhost$
RewriteRule ^([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$1$2$3$4$5.jpg.webp [L]

RewriteCond %{HTTP_HOST} ^localhost$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$1$2$3$4$5$6.jpg.webp [L]

RewriteCond %{HTTP_HOST} ^localhost$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$1$2$3$4$5$6$7.jpg.webp [L]

RewriteCond %{HTTP_HOST} ^localhost$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$1$2$3$4$5$6$7$8.jpg.webp [L]

RewriteCond %{HTTP_HOST} ^localhost$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$7/$1$2$3$4$5$6$7$8$9.jpg.webp [L]

RewriteCond %{HTTP_HOST} ^localhost$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$7/$8/$1$2$3$4$5$6$7$8$9$10.jpg.webp [L]

RewriteCond %{HTTP_HOST} ^localhost$
RewriteRule ^c/([0-9]+)(\-[\.*_a-zA-Z0-9-]*)(-[0-9]+)?/.+\.webp$ %{ENV:REWRITEBASE}img/c/$1$2$3.jpg.webp [L]

RewriteCond %{HTTP_HOST} ^localhost$
RewriteRule ^c/([a-zA-Z_-]+)(-[0-9]+)?/.+\.webp$ %{ENV:REWRITEBASE}img/c/$1$2.jpg.webp [L]

# Generate Webp support

可以使用模块中的钩子actionHtaccessCreate来自动编写

问题是它没有处理对应的webp图片不存在的情况。

我继续研究这种对 htaccess 的重写。