Added a new 'image' field type to display images in show/list actions

DependencyInjection/EasyAdminExtension.php

@@ -138,7 +138,7 @@ private function processEntitiesConfiguration(array $entitiesConfiguration)
                 }
 
                 if (count($config[$action]['fields']) > 0) {
-                    $config[$action]['fields'] = $this->normalizeFieldsConfiguration($config[$action]['fields'], $action, $entityConfiguration['class']);
+                    $config[$action]['fields'] = $this->normalizeFieldsConfiguration($config[$action]['fields'], $action, $entityConfiguration);
                 }
             }
 
@@ -199,10 +199,10 @@ private function ensureThatEntityNamesAreUnique($entitiesConfiguration)
      *
      * @param  array  $fieldsConfiguration
      * @param  string $action              The current action (this argument is needed to create good error messages)
-     * @param  string $entityClass         The class of the current entity (this argument is needed to create good error messages)
+     * @param  array  $entityConfiguration The full configuration of the entity this field belongs to
      * @return array  The configured entity fields
      */
-    private function normalizeFieldsConfiguration(array $fieldsConfiguration, $action, $entityClass)
+    private function normalizeFieldsConfiguration(array $fieldsConfiguration, $action, array $entityConfiguration)
     {
         $fields = array();
 
@@ -214,12 +214,20 @@ private function normalizeFieldsConfiguration(array $fieldsConfiguration, $actio
                 // Config format #1: field is an array that defines one or more
                 // options. check that the mandatory 'property' option is set
                 if (!array_key_exists('property', $field)) {
-                    throw new \RuntimeException(sprintf('One of the values of the "fields" option for the "%s" action of the "%s" entity does not define the "property" option.', $action, $entityClass));
+                    throw new \RuntimeException(sprintf('One of the values of the "fields" option for the "%s" action of the "%s" entity does not define the "property" option.', $action, $entityConfiguration['class']));
                 }
 
                 $fieldConfiguration = $field;
             } else {
-                throw new \RuntimeException(sprintf('The values of the "fields" option for the "$s" action of the "%s" entity can only be strings or arrays.', $action, $entityClass));
+                throw new \RuntimeException(sprintf('The values of the "fields" option for the "$s" action of the "%s" entity can only be strings or arrays.', $action, $entityConfiguration['class']));
+            }
+
+            // for 'image' type fields, if the entity defines an 'image_base_path'
+            // option, but the field does not, use the value defined by the entity
+            if (isset($fieldConfiguration['type']) && 'image' === $fieldConfiguration['type']) {
+                if (!isset($fieldConfiguration['base_path']) && isset($entityConfiguration['image_base_path'])) {
+                    $fieldConfiguration['base_path'] = $entityConfiguration['image_base_path'];
+                }
             }
 
             $fieldName = $fieldConfiguration['property'];

README.md

@@ -486,6 +486,73 @@ easy_admin:
 The `format` option of an entity field always overrides the value of the global
 `format` option.
 
+### Display Images Field Types in Listings
+
+If some field stores the URL of an image, you can show the actual image in the
+listing instead of its URL. Just set the type of the field to `image`:
+
+```yaml
+easy_admin:
+    entities:
+        Product:
+            class: AppBundle\Entity\Product
+            list:
+                fields:
+                    - { property: 'photo', format: 'image' }
+                    # ...
+    # ...
+```
+
+The `photo` field will be displayed as a `<img>` HTML element whose `src`
+attribute is the value of the field. If you store relative paths, the image may
+not be displayed correctly. In those cases, define the `base_path` option to
+set the path to be prefixed to the image:
+
+```yaml
+easy_admin:
+    entities:
+        Product:
+            class: AppBundle\Entity\Product
+            list:
+                fields:
+                    - { property: 'photo', format: 'image', base_path: '/img/' }
+                    # ...
+    # ...
+```
+
+The value of the `base_path` can be a relative or absolute URL and even a
+Symfony parameter:
+
+```yaml
+# relative path
+- { property: 'photo', format: 'image', base_path: '/img/products/' }
+
+# absolute path pointing to an external host
+- { property: 'photo', format: 'image', base_path: 'http://static.acme.org/img/' }
+
+# Symfony container parameter
+- { property: 'photo', format: 'image', base_path: '%vich_uploader.mappings.product_image%' }
+```
+
+The image base path can also be set in the entity, to avoid repeating its
+value for different fields or different actions (`list`, `show`):
+
+```yaml
+easy_admin:
+    entities:
+        Product:
+            class: AppBundle\Entity\Product
+            image_base_path: 'http://static.acme.org/img/'
+            list:
+                fields:
+                    - { property: 'photo', format: 'image' }
+                    # ...
+    # ...
+```
+
+The base paths defined for a field always have priority over the one defined
+for the entity.
+
 ### Customize which Fields are Displayed in the Show Action
 
 By default, the `show` action displays all the entity fields and their
@@ -545,6 +612,26 @@ Instead of using a string to define the name of the property (e.g. `email`) you
 have to define a hash with the name of the property (`property: 'email'`) and
 the custom label you want to display (`label: 'Contact'`).
 
+### Display Images Field Types in the Show Action
+
+If some field stores the URL of an image, you can show the actual image
+instead of its URL. Just set the type of the field to `image`:
+
+```yaml
+easy_admin:
+    entities:
+        Product:
+            class: AppBundle\Entity\Product
+            show:
+                fields:
+                    - { property: 'photo', format: 'image' }
+                    # ...
+    # ...
+```
+
+Read the previous *Display Images Field Types in Listings* section to know how
+to define the base path for images stored as relative URLs.
+
 ### Customize which Fields are Displayed in Forms
 
 By default, the forms used to create and edit entities display all their

Resources/public/stylesheet/admin.css

@@ -632,6 +632,11 @@ body.list .pagination > li i {
     padding: 0 3px;
 }
 
+body.list td.image img {
+    max-height: 50px;
+    max-width: 150px;
+}
+
 /* -------------------------------------------------------------------------
    NEW PAGE
    ------------------------------------------------------------------------- */
@@ -662,6 +667,10 @@ body.show .form-control.text {
     max-height: 250px;
     overflow-y: auto;
 }
+body.show .form-control.image {
+    max-height: 300px;
+    max-width: 100%;
+}
 
 /* -------------------------------------------------------------------------
    ERROR PAGE

Twig/EasyAdminTwigExtension.php

@@ -96,6 +96,14 @@ public function displayEntityField($entity, $fieldName, array $fieldMetadata)
                 return isset($fieldMetadata['format']) ? sprintf($fieldMetadata['format'], $value) : number_format($value);
             }
 
+            if (in_array($fieldType, array('image'))) {
+                $imageUrl = isset($fieldMetadata['base_path'])
+                    ? rtrim($fieldMetadata['base_path'], '/').'/'.ltrim($value, '/')
+                    : '/'.ltrim($value, '/');
+
+                return new \Twig_Markup(sprintf('<img src="%s">', $imageUrl), 'UTF-8');
+            }
+
             if (in_array($fieldType, array('association'))) {
                 $associatedEntityClassParts = explode('\\', $fieldMetadata['targetEntity']);
                 $associatedEntityClassName = end($associatedEntityClassParts);