How to display the current picture above the upload field in SonataAdminBundle?

I have managed to put the image above the field in the edit form. But my solution is a little bit specific, because I use Vich Uploader Bundle to handle uploads, so the generation of the image url was a little bit easier thanks to bundle helpers.

Let's look at my example, a film poster field in a film entity.This is part of my admin class:

//MyCompany/MyBundle/Admin/FilmAdmin.phpclass FilmAdmin extends Admin {protected function configureFormFields(FormMapper $formMapper){ $formMapper     ->add('title') ....     ->add('poster', 'mybundle_admin_image', array(                'required' => false,                ))}

mybundle_admin_image is handled by a custom field type, that is just a child of file type by setting it's getParent method: (don't forget to register your type class as a service)

//MyCompany/MyBundle/Form/Type/MyBundleAdminImageType.phppublic function getParent(){    return 'file';}

Then I have a template that extends Sonata's default styling, and I have it included in the admin class:

//MyCompany/MyBundle/Admin/FilmAdmin.phppublic function getFormTheme() {    return array('MyCompanyMyBundle:Form:mycompany_admin_fields.html.twig');}

And finally I have a block for my custom image type that extends the basic file type:

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

This causes that a 200px wide preview of image (if exists) is shown above the upload field, linked to it's full size version opening in new tab. You can customize it as you want, e.g. adding a lightbox plugin.

you can easily do this on edit page by helpers(FormMapper->setHelps) or option "help" pass on 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)    ;}

You can easily do this on show page by template attribute pass on $showmapper

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

and inside your template you get current object so u can call get method and pull image path

<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>

To show image in edit mode you have to override fileType or you have to create your own customType on top of fileType

There is also some bundle which is having this kind of functionality check out this GenemuFormBundle