【EC-CUBE4.2】商品詳細ページの商品画像をWebPに対応する方法

画像をリサイズできるTwigフィルターのプルリクエストがリバーとされたので本記事は利用できません。

https://github.com/EC-CUBE/ec-cube/pull/5821

EC-CUBE4.2の商品詳細ページの商品画像をWebPに対応する方法です。

カスタマイズディレクトリに以下のservices.yamlを設定してください。

すてにliip_imagineにwebpを有効化している場合は、filter_sets.webp_pathを追加してください。

liip_imagine:
    resolvers:
        default:
            web_path:
                web_root: '%kernel.project_dir%'
                cache_prefix: 'html/upload/cache'
    loaders:
        default:
            filesystem:
                data_root: '%kernel.project_dir%'
    webp:
        generate: true
    filter_sets:
        cache: ~
        resize:
        webp_path:

商品詳細テンプレートを編集

以下のように商品詳細テンプレートの商品画像にimagine_filterタグを追加してください。

<div class="ec-sliderItemRole">

    <div class="item_visual">
        {% for ProductImage in Product.ProductImage %}
            <div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') | imagine_filter('webp_path') }}" alt="{{ loop.first ? Product.name : '' }}" width="550" height="550"{% if loop.index > 1 %} loading="lazy"{% endif %}></div>
        {% else %}
            <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') | imagine_filter('webp_path') }}" alt="{{ loop.first ? Product.name : '' }}" width="550" height="550"></div>
        {% endfor %}
    </div>
    <div class="item_nav">
        {% for ProductImage in Product.ProductImage %}
            <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') | imagine_filter('webp_path') }}" alt="" width="133" height="133" loading="lazy"></div>
        {% endfor %}
    </div>
</div>

以上で完成です。