Icono junto a thumbnail en listados items SonataMediaBundle

En ocasiones podemos tener varios sonata.media.providers asignados a un mismo contexto (context). Si estos generan thumbnails, en el listado de items en SonataAdminBundle no podemos distinguir que provider es cada uno.

Para solucionarlo podemos mostrar junto al thumbnail un icono que nos indique el provider al que pertenece.

Vamos a conseguirlo, de un modo sencillo.

Creamos una plantilla que después vamos a utilizar desde nuestra Admin Class de SonataAdminBundle.

la plantilla, list_image_icon.html.twig

{% extends 'SonataAdminBundle:CRUD:base_list_field.html.twig' %}

{% block field %}
    <a href="{{ admin.generateUrl('edit', {'id' : object|sonata_urlsafeid }) }}">
        {% if object.nombreCampo.providerName == "sonata.media.provider.image" %}
            <i class="fa fa-picture-o"></i>
        {% elseif object.nombreCampo.providerName == "sonata.media.provider.youtube" %}
            <i class="fa fa-youtube"></i>
        {% endif %}
        {% thumbnail attribute(object, field_description.name ), 'admin' with {'class': 'img-responsive'} %}
    </a>
{% endblock %}

Tengo que destacar varios puntos:

  1. En las líneas 5 y 7, «nombreCampo» se tiene que sustituir por el campo que tengas definido en tu entidad (Entity).
  2. En la línea 10, he sustituido los valores width y height de la plantilla propia de SonataMediaBundle, por la clase «img-responsive». De este modo evito que los thumbnails se deformen en los listados.
    La línea 10 original es:

    <a href="{{ admin.generateUrl('edit', {'id' : object|sonata_urlsafeid }) }}">{% thumbnail attribute(object, field_description.name ), 'admin' with {'width': 75, 'height': 60} %}</a>

Ahora solo nos queda utilizar esta plantilla en nuestra Admin Class.

EntityAdmin.php

<?php

namespace AppBundle\Admin;

use Sonata\AdminBundle\Admin\Admin;
use Sonata\AdminBundle\Datagrid\ListMapper;
use Sonata\AdminBundle\Datagrid\DatagridMapper;
use Sonata\AdminBundle\Form\FormMapper;
use Sonata\AdminBundle\Show\ShowMapper;
use Sonata\AdminBundle\Route\RouteCollection;

/**
 * Description of EntityAdmin
 *
 * @author Juanjo García
 */
class EntityAdmin extends Admin {

    protected function configureRoutes(RouteCollection $collection) {
        //...
    }

    // Fields to be shown on create/edit forms
    protected function configureFormFields(FormMapper $formMapper) {
        //...
    }

    // Fields to be shown on filter forms
    protected function configureDatagridFilters(DatagridMapper $datagridMapper) {
        //...
    }

    // Fields to be shown on lists
    protected function configureListFields(ListMapper $listMapper) {
        $listMapper
                ->add('nombreCampo', 'sonata_type_model_list', array(
                    'template' => 'SonataMediaBundle:Provider:list_image_icon.html.twig'
                    ), array(
                        'link_parameters' => array(
                            'context' => 'your_context'
                            )
                        )
                    )
        ;
    }

    /**
     * @param ShowMapper $showMapper
     */
    protected function configureShowFields(ShowMapper $showMapper) {
        //...
    }
}

Como se puede observar en la línea 37 estamos utilizando nuestra nueva plantilla twig.

Con estos ajustes hemos conseguido distinguir en los listados que tipo de archivo media tenemos asignado en cada uno de los items de nuestra entidad.