How to get images listed in sonata admin bundle backend

Question

I want to get my image thumbnail listed in list area, i don't know how to do that, can any one please help me. I Got my caption in back end. I am using Sonata adim bundle and following its official document.

here is my imageAdmin.php

namespace swaam\ImageUploaderBundle\Admin;

use Sonata\AdminBundle\Admin\Admin;
use Sonata\AdminBundle\Datagrid\ListMapper;
use Sonata\AdminBundle\Datagrid\DatagridMapper;
use Sonata\AdminBundle\Form\FormMapper;

class ImageAdmin extends Admin
{

// Fields to be shown on create/edit forms
    protected function configureFormFields(FormMapper $formMapper)
    {
        $formMapper
            ->add('caption', 'ckeditor', array('label' => 'Ca   ption'))
//            ->add('file', 'entity', array('class' => 'swaam\ImageUploaderBundle\Entity\image'))
            ->add('file', 'file', array('data_class' => 'Symfony\Component\HttpFoundation\File\File'
            ,'property_path' => 'file'
            ))

            ->end(); //if no type is specified, SonataAdminBundle tries to guess it
        ;
    }

// Fields to be shown on filter forms
    protected function configureDatagridFilters(DatagridMapper $datagridMapper)
    {
        $datagridMapper
            ->add('caption')
            ->add('thumbpath')
        ;
    }

// Fields to be shown on lists
    protected function configureListFields(ListMapper $listMapper)
    {
        $listMapper
            ->addIdentifier('caption')
//            ->add('thumbpath')
              ->add('thumbpath')
        ;
    }
}

Here is my configureListFields method after updating

 protected function configureListFields(ListMapper $listMapper)
    {
        $listMapper
//            ->addIdentifier('caption')
//            ->add('thumbpath')
//              ->add('thumbpath')
            ->add('thumbpath', null, array('template' => 'swwamImageUploaderBundle:Admin:list_image.html.twig'))
//            ->add('thumbpath', null, array('template' => 'swwamImageUploaderBundle:Admin:list_image.html.twig'))

        ;
    }

and here is my twig

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

{% block field%}

    <div>
        {#<img src="{{ image.webPath | imagine_filter('gallery_element_admin') }}" />#}

        //<img src="{{ app.request.scheme ~ '://' ~ app.request.host ~ '/' ~  image.getthumbWebPath }}" />
        {# or whatever to create src of image #}

    </div>
{% endblock %}

Answer 1

The simplest way is to create custom admin field template. In configureListFields method add:

->add('path', null, array('template' => 'AcmeBundle:Admin:list_image.html.twig'))

And create file AcmeBundle/Resources/views/Admin/list_image.html.twig with content:

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

{% block field%}
    <div>
        <img src="{{ object.webPath | imagine_filter('gallery_element_admin') }}" />
        {# or whatever to create src of image #}
    </div>
{% endblock %}

Answer 2

I needed something similar and this is my result after a while of searching the internet.

I have added tbe template in the configureListFields method from the admin class:

        ->add('culture', "string", array(
            'template' => 'AEWBackendBundle:CRUD:list_culture_image.html.twig'
        ))

I have created the template in the view:

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

{% block field%}
    <div>
        {% set flag = web_path ~ 'images/flags/' ~ object.culture.name(object) ~ '.png' %}
        {% if file_exists(flag) %}
            <img id="culture_image" title="{{ object.culture }}" src="/images/flags/{{ object.culture.name }}.png" height="15" />
        {% else %}
            <img id ="culture_image" title="en" src="/images/flags/default.png" height="15" />
        {% endif  %}
    </div>
{% endblock %}

In parameters.yml:

web_path: %kernel.root_dir%/../web/

In config.yml:

twig:
    globals:
        web_path: %web_path%

Created the TwigExtension.php file to use the file_exists PHP function as a twig extension

<?php

namespace AEW\FrontendBundle\Services\Extension;

use \Twig_Filter_Function;
use \Twig_Filter_Method;

class TwigExtension extends \Twig_Extension
{

    /**
     * Return the functions registered as twig extensions
     * 
     * @return array
     */
    public function getFunctions()
    {
        return array(
            'file_exists' => new \Twig_Function_Function('file_exists'),
        );
    }

    public function getName()
    {
        return 'twig_extension';
    }
}

Added the config lines in config.yml for the new extension:

parameters:
    aew.twig_extension.class: AEW\FrontendBundle\Services\Extension\TwigExtension

services:
    aew.twig_extension:
        class: %aew.twig_extension.class%
        tags:
            - { name: twig.extension }

Hope this helps you or anyone else who is looking for this info in the future.