php - 如何在 SonataAdminBundle 的上传字段上方显示当前图片？

Question

我正在使用 SonataAdminBundle(使用 Doctrine2 ORM)，并且我已成功地将文件上传功能添加到我的图片模型中。

我想在 Show 和 Edit 页面上显示一个简单的 <img src="{{ picture.url }} alt="{{ picture.title }} />在相关表单字段上方的标签(当然前提是正在编辑的图片不是新的)，以便用户可以看到当前的照片，并决定是否更改。

经过数小时的研究，我一直无法弄清楚该怎么做。我想我需要覆盖一些模板，但我有点迷茫......有人可以给我一个提示吗？

谢谢!

这是我的 PictureAdmin 类的相关部分。

protected function configureFormFields(FormMapper $formMapper)
{
    $formMapper
        ->add('category', NULL, ['label' => 'Catégorie'])
        ->add('title', NULL, ['label' => 'Titre'])
        ->add('file', 'file', ['required' => false, 'label' => 'Fichier']) // Add picture near this field
        ->add('creation_date', NULL, ['label' => 'Date d\'ajout'])
        ->add('visible', NULL, ['required' => false, 'label' => 'Visible'])
        ->add('position', NULL, ['label' => 'Position']);
}

protected function configureShowFields(ShowMapper $showMapper)
{
    $showMapper
        ->add('id', NULL, ['label' => 'ID'])
        ->add('category', NULL, ['label' => 'Catégorie'])
        ->add('title', NULL, ['label' => 'Titre'])
        ->add('slug', NULL, ['label' => 'Titre (URL)'])
        ->add('creation_date', NULL, ['label' => 'Date d\'ajout'])
        ->add('visible', NULL, ['label' => 'Visible'])
        ->add('position', NULL, ['label' => 'Position']);
        // Add picture somewhere
}

Answer 1

我已设法将图像放在编辑表单中的字段上方。但我的解决方案有点具体，因为我使用 Vich Uploader Bundle来处理上传，因此借助捆绑助手，图像 url 的生成变得更容易了。

让我们看一下我的示例，电影实体中的电影海报字段。这是我的管理类(class)的一部分:

//MyCompany/MyBundle/Admin/FilmAdmin.php

class FilmAdmin extends Admin {

protected function configureFormFields(FormMapper $formMapper)
{
 $formMapper
     ->add('title')
 ....
     ->add('poster', 'mybundle_admin_image', array(
                'required' => false,
                ))
}

mybundle_admin_image 由自定义字段类型处理，它只是文件类型的子类型，通过设置它的 getParent 方法:(不要忘记注册您的类型类作为服务)

//MyCompany/MyBundle/Form/Type/MyBundleAdminImageType.php

public function getParent()
{
    return 'file';
}

然后我有一个扩展了 Sonata 的默认样式的模板，并将它包含在管理类中:

//MyCompany/MyBundle/Admin/FilmAdmin.php

public function getFormTheme() {
    return array('MyCompanyMyBundle:Form:mycompany_admin_fields.html.twig');
}

最后我有一个扩展基本文件类型的自定义图像类型 block :

//MyCompany/MyBundle/Resources/views/Form/mycompany_admin_fields.html.twig

{% block mybundle_admin_image_widget %}
{% spaceless %}
    {% set subject =  form.parent.vars.value %}
    {% if subject.id and attribute(subject, name) %}
        <a href="{{ asset(vich_uploader_asset(subject, name)) }}" target="_blank">
            <img src="{{ asset(vich_uploader_asset(subject, name)) }}" width="200" />
        </a><br/>
    {% endif %}
    {% set type = type|default('file') %}
    <input type="{{ type }}" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %}/>
{% endspaceless %}
{% endblock %}

这会导致上传字段上方显示 200 像素宽的图像预览(如果存在)，链接到在新标签中打开的完整尺寸版本。您可以根据需要自定义它，例如添加灯箱插件。