本文将指导开发者如何在不直接修改 vendor 目录下的 Sylius UiBundle 模板文件的情况下，定制 sylius_taxon_image_widget。通过模板继承和覆盖机制，我们将演示如何修改图像过滤器，例如将 sylius_small 替换为 sylius_admin_product_original，从而满足不同的图像显示需求，同时保持项目的可维护性和升级性。
定制 Sylius 分类图像 Widget 的步骤
为了避免直接修改 vendor 目录下的文件，我们利用 Symfony 的模板继承和覆盖机制。以下是具体步骤：
-
创建模板文件目录:
在你的项目中，创建以下目录结构：
templates/bundles/SyliusUiBundle/Form/
这个目录结构告诉 Symfony，我们要覆盖 SyliusUiBundle 中 Form 目录下的模板。
-
复制模板文件:
将 Sylius\vendor\sylius\sylius\src\Sylius\Bundle\UiBundle\Resources\views\Form\imagesTheme.html.twig 文件复制到你刚刚创建的 templates/bundles/SyliusUiBundle/Form/ 目录下。
-
修改模板文件:
打开复制到项目中的 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 %} -
清除缓存:
执行 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，并使用自定义的图像过滤器。
