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!