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

php file-upload symfony symfony-sonata

2022-08-30 20:52:47

我正在使用SonataAdminBundle（带有Therination2 ORM），并且我已经成功地将文件上传功能添加到我的图片模型中。

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

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

谢谢！

这是我的图片管理员课程的相关部分。

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
}

答案 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 %}

这会导致上传字段上方显示 200 像素宽的图像预览（如果存在），并链接到在新选项卡中打开的全尺寸版本。您可以根据需要对其进行自定义，例如添加灯箱插件。

答案 2

您可以通过帮助者（FormMapper->setHelps）或在FormMapper上传递选项“help”在编辑页面上轻松执行此操作

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