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

Question

我正在使用SonataAdminBundle(使用Doctrine2 ORM),并且我已成功为我的Picture模型添加了文件上传功能.

我想在" 显示"和" 编辑"页面上,<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的生成更容易一些.

让我们来看看我的例子,电影实体中的电影海报场.这是我的管理类的一部分:

//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');
}

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

//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 %}

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

Answer 2

您可以通过助手(FormMapper-> setHelps)或选项"帮助"传递给FormMapper轻松地在编辑页面上执行此操作

protected function configureFormFields(FormMapper $formMapper) {
    $options = array('required' => false);
    if (($subject = $this->getSubject()) && $subject->getPhoto()) {
        $path = $subject->getPhotoWebPath();
        $options['help'] = '<img src="' . $path . '" />';
    }

    $formMapper
        ->add('title')
        ->add('description')
        ->add('createdAt', null, array('data' => new \DateTime()))
        ->add('photoFile', 'file', $options)
    ;
}

Answer 3

您可以通过模板属性传递在显示页面上轻松完成此操作 $showmapper

->add('picture', NULL, array(
    'template' => 'MyProjectBundle:Project:mytemplate.html.twig'
);

在模板中,您将获得当前对象,因此您可以调用get方法并拉出图像路径

<th>{% block name %}{{ admin.trans(field_description.label) }}{% endblock %}</th>
<td>
    <img src="{{ object.getFile }}" title="{{ object.getTitle }}" />
    </br>
    {% block field %}{{ value|nl2br }}{% endblock %}
</td>

要在编辑模式下显示图像,您必须覆盖,fileType或者您必须在上面创建自己的customTypefileType

还有一些具有这种功能的捆绑包可以查看这个GenemuFormBundle