EasyAdminBundle - Wallpaper Setup and List View


Category was the easy one. We chose that one to start with because it was easy.

Wallpaper is a little more involved.

Let's start by adding some configuration for Wallpaper, and see where we get:

# /app/config/config/easy_admin_bundle.yml

easy_admin:
    entities:

        Category:
            class: AppBundle\Entity\Category

        Wallpaper:
            class: AppBundle\Entity\Wallpaper

Again, at this point things should "just work". You should be able to see a new "Wallpaper" menu option, and clicking on this menu link should take you to your list of imported Wallpapers.

As we have 22 wallpapers, we can now see Pagination in action too. Nice.

However, there are some issues here.

We have a filename, but no slug.

Our width and height columns are in a weird format.

The category information is right... but wrong. The name is not what we want - #Category 7 instead of Winter, for example (where Winter is the Category with id 7).

It would also be nice to see a thumbnail of our uploaded Wallpaper.

There's another gotcha as well - try editing any of your Wallpapers and boom:

Catchable Fatal Error: Object of class AppBundle\Entity\Category could not be converted to string

500 Internal Server Error - ContextErrorException

Note as well, that's an error on the Category entity, and we're editing a Wallpaper.

Ok, let's fix all of these problems.

We will start with the error: could not be converted to string

The fix to this is easy enough. We need to add a __toString method to each of our entities that we would like to display and use in our Admin panel.

// src/AppBundle/Entity/Category.php

    public function __toString()
    {
        return $this->name;
    }
}

and

// src/AppBundle/Entity/Wallpaper.php

    public function __toString()
    {
        return $this->slug;
    }
}

We won't directly need the Wallpaper's __toString method just yet, but it's easy enough to add so I'm going to do so.

This should have fixed two problems.

Firstly, we can now properly Edit existing Wallpaper entities. No more 500 error.

Secondly, on our Wallpaper list view, the Category name should be properly displaying. In other words, something like #Category 7 should now say Winter, or similar.

Next, let's sort out the rest of the Wallpaper List view.

We're going to start by being explicit about exactly which fields we want to display.

This is easy enough, we just need to add in a new list key. This is the way in which we customise the List view.

Under this list key we need to specify which fields we want to show:

# /app/config/config/easy_admin_bundle.yml

easy_admin:
    entities:

        Category:
            class: AppBundle\Entity\Category

        Wallpaper:
            class: AppBundle\Entity\Wallpaper
            list:
                fields:
                    - 'id'
                    - 'filename'
                    - 'slug'
                    - 'width'
                    - 'height'

Stating the obvious, if we don't add in id, or filename then neither of these fields will show up in our List view.

If we refresh the List view now for Wallpapers then we should see slug is there.

The number formatting is still strange - 1,920 instead of 1920 as an example.

When we need a little more control over the output of our data we can make use of the built in EasyAdminBundle formatters.

What I want to do is format my number as an integer. Formatting here is equivalent to using sprintf. If I were after an integer output from sprintf I would use %d. Therefore my setup will be:

# /app/config/config/easy_admin_bundle.yml

easy_admin:
    entities:

        Category:
            class: AppBundle\Entity\Category

        Wallpaper:
            class: AppBundle\Entity\Wallpaper
            list:
                fields:
                    - 'id'
                    - 'filename'
                    - 'slug'
                    - { property: 'width', format: '%d' }
                    - { property: 'height', format: '%d' }

Though not a direct example from the documentation in this case, the docs were very helpful in figuring this out.

Refreshing the page now shows 1920 for width, and 1080 for height. Success.

Adding A Thumbnail

I'd really like to see a preview thumbnail for each wallpaper. It would make my life - and the life of other admins - much easier.

Let's try and do this is simply as possible:

# /app/config/config/easy_admin_bundle.yml

easy_admin:
    entities:

        Category:
            class: AppBundle\Entity\Category

        Wallpaper:
            class: AppBundle\Entity\Wallpaper
            list:
                fields:
                    - 'id'
                    - 'filename'
                    - 'slug'
                    - { property: 'width', format: '%d' }
                    - { property: 'height', format: '%d' }
                    - 'image'

If we refresh the page now, the List view still loads, but this doesn't work. The image is listed as Inaccessible. Then again, why would it?

image isn't even a property on our Wallpaper entity!

Fixing the image key is a little bit more work.

Thinking back, we know all our images live in the /web/images directory. Given that the /web directory is our site's publicly accessibly root directory, we can ignore that part of the URL we need to build.

Once inside the web/images directory, we know all our files use the filename property as their, ahem, filename.

EasyAdminBundle has a very cool feature called Virtual Properties. This may sound confusing, but is actually both very useful to have, and easy to figure out with the help of an example.

In our case, our image field will be a Virtual Property.

It doesn't exist as a property on our class. But if we create a getImage public method on our Wallpaper then we can use this getter as though it referred to a specific class property.

Let's add this in:

// src/AppBundle/Entity/Wallpaper.php

    public function getImage()
    {
        return $this->filename;
    }

    public function __toString()
    {
        return $this->slug;
    }
}

As already stated, our filename when combined with our image path will return a usable image. By defining a Virtual Property we can do this without interfering with the filename itself, which is already an existing field in our list view.

Refreshing the page now should have removed the big red Inaccessible text and replaced it with the exact same output as the filename column. Almost there!

What we now need is a way of passing this information to the EasyAdminBundle in order for it to properly display our thumbnail.

Fortunately a special 'Property Type' exists for us to use which instructs EasyAdminBundle how our image data is set up. The Image Data Type. This sounds more confusing than it is in practice, and the docs contain a bunch of very helpful examples.

Here's my setup:

# /app/config/config/easy_admin_bundle.yml

easy_admin:
    entities:

        Category:
            class: AppBundle\Entity\Category

        Wallpaper:
            class: AppBundle\Entity\Wallpaper
            list:
                fields:
                    - 'id'
                    - 'filename'
                    - 'slug'
                    - 'width'
                    - 'height'
                    - { property: 'image', type: 'image', base_path: '/images/' }

The property name is directly related to the getImage method. If we had a getFudge method, our property would need to be fudge.

Whatever the outcome of getImage is, it will be concatenated with the base_path, and then attempted to be displayed as an img tag.

And lo-and-behold, if we refresh now we have a thumbnail preview. Cool.

Now, imagine having had to have done all of this with your own custom backend. I don't think we could have got so far, so quickly. Certainly not with this level of polish anyway.

However, we aren't done just yet.

If you have been poking around you may have noticed that we have no way of uploading new images when creating our Wallpapers. And likewise, we don't see any sign of our thumbnail when making Edits.

On we go!

Code For This Course

Get the code for this course.

Episodes

# Title Duration
1 Introduction and Site Demo 02:14
2 Setup and a Basic Wallpaper Gallery 08:43
3 Pagination 08:24
4 Adding a Detail View 04:47
5 Creating a Home Page 11:14
6 Creating our Wallpaper Entity 07:50
7 Wallpaper Setup Command - Part 1 - Symfony Commands As a Service 05:57
8 Wallpaper Setup Command - Part 2 - Injection Is Easy 08:53
9 Wallpaper Setup Command - Part 3 - Doing It With Style 05:37
10 Doctrine Fixtures - Part 1 - Setup and Category Entity Creation 08:52
11 Doctrine Fixtures - Part 2 - Relating Wallpapers with Categories 05:56
12 EasyAdminBundle - Setup and Category Configuration 06:02
13 EasyAdminBundle - Wallpaper Setup and List View 07:46
14 EasyAdminBundle - Starting with Wallpaper Uploads 05:57
15 Testing with PhpSpec to Guide Our Implementation 03:39
16 Using PhpSpec to Test our FileMover 05:34
17 Symfony Dependency Testing with PhpSpec 08:47
18 Defensive Counter Measures 06:33
19 No Tests - Part 1 - Uploading Files in EasyAdminBundle 11:01
20 No Tests - Part 2 - Uploading Files in EasyAdminBundle 07:05
21 Don't Mock What You Don't Own 09:36
22 You've Got To Take The Power Back 07:36
23 Making Symfony Work For Us 08:56
24 Testing The Wallpaper File Path Helper 15:11
25 Finally, It Works! 14:56
26 Why I Prefer Not To Use Twig 16:51
27 Fixing The Fixtures 11:20
28 Untested Updates 14:30
29 Untested Updates Part Two - Now We Can Actually Update 06:33
30 Adding an Image Preview On Edit 12:31
31 Delete Should Remove The Wallpaper Image File 11:02
32 Getting Started Testing Wallpaper Updates 10:02
33 Doing The Little Before The Big 08:13
34 Tested Image Preview... Sort Of :) 07:36
35 Finishing Up With a Tested Wallpaper Update 10:41
36 Test Driven Wallpaper Delete - Part 1 11:06
37 Test Driven Wallpaper Delete - Part 2 11:57
38 EasyAdminBundle Login Form Tutorial 08:01