Which file should I override to change edit form template in Sonata Admin?

Question

I follow this tutorial to add a preview of my image file in my sonata admin (symfony3)

http://symfony.com/doc/current/bundles/SonataAdminBundle/cookbook/recipe_image_previews.html

But I not being able to add the CSS parte. The image is too large.

Should I override one of the sonata templates for it? If yes, which file I change and how do I do it? [I'm pretty new in sonata/symfony3]

If not, how should I add the css file in the project?

My actual code is exactly as the tutorial:

class ImageAdmin extends Admin
{
    protected function configureFormFields(FormMapper $formMapper)
    {
        // get the current Image instance
        $image = $this->getSubject();

        // use $fileFieldOptions so we can add other options to the field
        $fileFieldOptions = array('required' => false);
        if ($image && ($webPath = $image->getWebPath())) {
            // get the container so the full path to the image can be set
            $container = $this->getConfigurationPool()->getContainer();
            $fullPath = $container->get('request')->getBasePath().'/'.$webPath;

            // add a 'help' option containing the preview's img tag
            $fileFieldOptions['help'] = '<img src="'.$fullPath.'" class="admin-preview" />';
        }

        $formMapper
            // ... other fields ...
            ->add('file', 'file', $fileFieldOptions)
        ;
    }
    // ...
}

Answer 1

You'll need to add some code to include a CSS file in your Symfony project. Something similar to

{% stylesheets 'bundles/app/css/*' filter='cssrewrite' %}
  <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

Then you'd put the following CSS from the tutorial into that file.

img.admin-preview {
  max-height: 200px;
  max-width: 200px;
}

You can learn more about including CSS files with Symfony here.

Answer 2

First you need to make a template that extends SonataAdminBundle:CRUD:base_edit.html.twig, here is an example:

    {# BlastBaseEntitiesBundle:CRUD:edit.html.twig #}
    
    {% extends 'SonataAdminBundle:CRUD:base_edit.html.twig' %}
    
    {# ... #}

Then create your css file in Resources/Public/css.

Execute the command bin/console assets:install to publish your stylesheet to the web/bundles directory.

  {# blastcore/css corresponds to BlastCoreBundle/Resources/Public/css and web/bundles/blastcore/js #}
    <link rel="stylesheet" href="{{ asset(blastcore/css/style.css) }}" />

http://symfony.com/doc/current/assetic/asset_management.html

Now you need to tell sonata to use your template for your admin. you can do that in the service definition :

admin.yml

blast_base_entities.admin.search_index_entity:
        class: Blast\BaseEntitiesBundle\Admin\SearchIndexEntityAdmin
        arguments: [~, Blast\BaseEntitiesBundle\Entity\SearchIndexEntity, BlastCoreBundle:CRUD]
        tags:
            - name: sonata.admin
              manager_type: orm
              group: admin
              label: SearchIndexEntity
        calls:
        - [ setTemplate, [edit, BlastBaseEntitiesBundle:CRUD:edit.html.twig]]

https://sonata-project.org/bundles/admin/master/doc/reference/templates.html#crudcontroller-actions-templates