定制 Sylius 分类图像 Widget：无需修改 Vendor 文件

本文将指导开发者如何在不直接修改 vendor 目录下的 Sylius UiBundle 模板文件的情况下，定制 sylius_taxon_image_widget。通过模板继承和覆盖机制，我们将演示如何修改图像过滤器，例如将 sylius_small 替换为 sylius_admin_product_original，从而满足不同的图像显示需求，同时保持项目的可维护性和升级性。

定制 Sylius 分类图像 Widget 的步骤

为了避免直接修改 vendor 目录下的文件，我们利用 Symfony 的模板继承和覆盖机制。以下是具体步骤：

1. 创建模板文件目录:

   在你的项目中，创建以下目录结构：

   templates/bundles/SyliusUiBundle/Form/

   登录后复制

   这个目录结构告诉 Symfony，我们要覆盖 SyliusUiBundle 中 Form 目录下的模板。

2. 复制模板文件:

   将 Sylius\vendor\sylius\sylius\src\Sylius\Bundle\UiBundle\Resources\views\Form\imagesTheme.html.twig 文件复制到你刚刚创建的 templates/bundles/SyliusUiBundle/Form/ 目录下。

3. 修改模板文件:

   

   图改改

   在线修改图片文字

   455

   查看详情

   打开复制到项目中的 imagesTheme.html.twig 文件，找到 sylius_taxon_image_widget 的 block。

   {% block sylius_taxon_image_widget %}
       {% apply spaceless %}
           {{ form_row(form.type) }}
           {% if form.vars.value.path|default(null) is null %}
               <label for="{{ form.file.vars.id }}" class="ui icon labeled button"><i class="cloud upload icon"></i> {{ 'sylius.ui.choose_file'|trans }}</label>
           {% else %}
               <img class="ui small bordered image" src="{{ form.vars.value.path|imagine_filter('sylius_small') }}" alt="{{ form.vars.value.type }}" />
               <label for="{{ form.file.vars.id }}" class="ui icon labeled button"><i class="cloud upload icon"></i> {{ 'sylius.ui.change_file'|trans }}</label>
           {% endif %}
           <div class="ui hidden element">
               {{ form_widget(form.file) }}
           </div>
           <div class="ui element">
               {{- form_errors(form.file) -}}
           </div>
       {% endapply %}
   {% endblock %}

   登录后复制

   将 imagine_filter('sylius_small') 修改为你需要的过滤器，例如 imagine_filter('sylius_admin_product_original')。

   {% block sylius_taxon_image_widget %}
       {% apply spaceless %}
           {{ form_row(form.type) }}
           {% if form.vars.value.path|default(null) is null %}
               <label for="{{ form.file.vars.id }}" class="ui icon labeled button"><i class="cloud upload icon"></i> {{ 'sylius.ui.choose_file'|trans }}</label>
           {% else %}
               <img class="ui small bordered image" src="{{ form.vars.value.path|imagine_filter('sylius_admin_product_original') }}" alt="{{ form.vars.value.type }}" />
               <label for="{{ form.file.vars.id }}" class="ui icon labeled button"><i class="cloud upload icon"></i> {{ 'sylius.ui.change_file'|trans }}</label>
           {% endif %}
           <div class="ui hidden element">
               {{ form_widget(form.file) }}
           </div>
           <div class="ui element">
               {{- form_errors(form.file) -}}
           </div>
       {% endapply %}
   {% endblock %}

   登录后复制

4. 清除缓存:

   执行 php bin/console cache:clear 清除缓存，确保新的模板生效。

注意事项:

• 确保你使用的 sylius_admin_product_original 过滤器已经配置好，并且能够正确生成图像。 你需要在 config/packages/liip_imagine.yaml 文件中定义或修改相应的过滤器。
• 这种方法适用于覆盖 Sylius UiBundle 中的其他模板，只需遵循相同的目录结构和文件命名规则。
• 在升级 Sylius 版本后，检查你覆盖的模板是否需要更新，以确保兼容性。

总结:

通过利用 Symfony 的模板继承和覆盖机制，我们可以轻松定制 Sylius UiBundle 中的模板，而无需直接修改 vendor 目录下的文件。这种方法不仅保持了项目的可维护性，也使得升级 Sylius 版本变得更加容易。 通过以上步骤，你就可以成功地定制 sylius_taxon_image_widget，并使用自定义的图像过滤器。

以上就是定制 Sylius 分类图像 Widget：无需修改 Vendor 文件的详细内容，更多请关注php中文网其它相关文章！