Sylius：如何使用 SyliusResourceBundle 在實體上正確渲染圖像預覽？

Question

我有一個注冊為 Sylius-Resource 的自定義實體。 這個實體可以有一個圖像列表。 對於我的用例，我遵循了Docs上的說明。

我使用 ImageType 的子類來提供 Upload-Image-Form：

藝術家圖像類型：

<?php
declare(strict_types=1);

namespace AppBundle\Form\Type;

use Sylius\Bundle\CoreBundle\Form\Type\ImageType;

class ArtistImageType extends ImageType
{
    /**
     * {@inheritdoc}
     */
    public function getBlockPrefix(): string
    {
        return 'artist_image';
    }
}

這就是我在 FormType 中重用這個 ArtistImageType 的方式：

final class ArtistType extends AbstractResourceType
{
    /**
     * {@inheritdoc}
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('name', TextType::class, [
                'empty_data' => '',
            ])
            ->add('firstName', TextType::class, [
                'empty_data' => '',
                'required' => false,
            ])
            ->add('lastName', TextType::class, [
                'empty_data' => '',
            ])

            ->add('images', CollectionType::class, [
                'entry_type' => ArtistImageType::class,
                'allow_add' => true,
                'allow_delete' => true,
                'by_reference' => false,
                'label' => 'app.images',
            ])

和 form.html.twig：

<div class="ui two column stackable grid">
    {{ form_errors(form) }}
    <div class="column">
        <div class="ui segment">
            <h4 class="ui dividing header">{{ 'sylius.ui.general_info'|trans }}</h4>
            <div class="two fields">
                {{ form_row(form.name) }}
            </div>

            {{ form_row(form.images) }}

        </div>
        <div class="ui segment">
            {{ form_row(form.firstName) }}
            {{ form_row(form.lastName) }}
        </div>
    </div>

我想知道如何顯示已經上傳到類似於產品表單的現有實體中的圖像，其中現有圖像顯示在“選擇文件”按鈕旁邊？

這就是我想要實現的目標：

但它仍然在沒有任何預覽的情況下渲染。 顯然，一些進一步的定制是必要的。

Answer 1

閱讀 Sylius 代碼后，我可以自己回答：

1. ArtistType::buildForm()

我們需要添加屬性entry_options以將 Artist-Entity 傳遞給 ImageType：

        ->add('images', CollectionType::class, [
            'entry_type' => ArtistImageType::class,
            'allow_add' => true,
            'allow_delete' => true,
            'by_reference' => false,
            'entry_options' => ['artist' => $options['data']],
            'label' => 'app.images',

2. 藝術家圖像類型

然后我們讓 ArtistImageType 適合正確處理這個屬性：

class ArtistImageType extends ImageType
{

    public function buildView(FormView $view, FormInterface $form, array $options): void
    {
        parent::buildView($view, $form, $options);

        $view->vars['artist'] = $options['artist'];
    }

    public function configureOptions(OptionsResolver $resolver): void
    {
        parent::configureOptions($resolver);

        $resolver->setDefined('artist');
        $resolver->setAllowedTypes('artist', Artist::class);
    }


    /**
     * {@inheritdoc}
     */
    public function getBlockPrefix(): string
    {
        return 'artist_image';
    }
}

考慮getBlockPrefix方法。

3.形式主題：

為圖像部分創建一個表單主題：

{% extends '@SyliusUi/Form/imagesTheme.html.twig' %}

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

考慮塊名稱artist_image_widget 。 它是 ImageType 實現的 Twig 和 getBlockPrefix-Function 之間的鏈接。

4. 我已經把整個圖像部分的東西放在一個單獨的文件中：

_media.html.twig :

{% form_theme form '@AppBundle/Form/imagesTheme.html.twig' %}

<div class="ui" >
    <h3 class="ui dividing header">{{ 'sylius.ui.media'|trans }}</h3>
    <br>
    {{ form_row(form.images, {'label': false}) }}

</div>

最終形式：

<div class="column">
    <div class="ui segment">
        <h4 class="ui dividing header">{{ 'sylius.ui.general_info'|trans }}</h4>
        <div class="two fields">
            {{ form_row(form.name) }}
        </div>

        {% include 'AppBundle:Admin:_media.html.twig' %}

    </div>
    <div class="ui segment">
        {{ form_row(form.firstName) }}
        {{ form_row(form.lastName) }}
    </div>

Answer 2

我猜@itinance 發布的 3.Form-Theme 確實是修復它的原因（通過復制小部件內容而不是 form_row(form.images..) 我也設法讓它工作）。 但遺憾的是，我無法擴展“@SyliusUi/Form/imagesTheme.html.twig”，即使 getBlockPrefix 返回與此前綴匹配的前綴