https://codereviewvideos.com/course/let-s-build-a-wallpaper-website-in-symfony-3/video/easyadminbundle-wallpaper-setup-and-list-view - full video series and code sample
Beyond a basic entity, EasyAdminBundle requires a little more setup and configuration but it really isn't all that hard. Let's add in our Wallpaper entity.
Show More Show Less View Video Transcript
0:00
Hi, I'm Chris from codereviewvideos.com and in this video we're going to get started adding
0:08
in our wallpaper entity into our easy admin bundle admin backend. So towards the end of the previous video we'd set up category and we saw that that was the
0:17
easy way to get started because there was very little on that entity in terms of complexity
0:22
we just had the name property. Whereas with our wallpaper we've got the concept of an image which we'd probably like to display
0:29
and we've also got some relations going on as well or a relation at this stage so let's see what
0:33
happens if we simply add in the bare minimum amount of config and give our page a refresh
0:38
got our wallpaper entity that comes up on the side and whilst things look okay we do have some issues
0:44
straight away so it's loading that's a good thing but there's some problems so for example width and
0:50
height are both formatted a little bit weirdly and category says category hash 3 or category
0:56
hash two or whatever and that hash relates directly to the id of the category entity that
1:01
it's pointing to so for example category hash three would be id three and in this case our
1:07
winter wallpaper is pointing at category three which is the winter category now if we go to add
1:12
a wallpaper we get some issues around category which is really strange in a way because we just
1:17
tried to add a wallpaper but we've got that error around category and again if we try and edit a
1:22
very similar thing. So there's a bit of work to do to get started here and what we'll do is just
1:27
tackle the problems as we see them. So we'll try and start off with add wallpaper and you can see
1:32
object of class category could not be converted to string. So in other words we need a two string
1:37
method and the reason it's trying to convert to string here is it's trying to create as a drop
1:41
down list of available categories for our wallpaper and it doesn't know how to convert those categories
1:47
into a string representation. So we can jump back into our code and inside our category entity
1:52
down at the bottom here what I going to do command and then on a Mac implement a method and I going to implement the two string method I going to set it to public as well don know why it does that actually to get the name i just going to return the name really straightforward might as well add in the dot block as well
2:08
so give that a refresh now everything seems to have started loading again and again you can see
2:14
that's where this is coming from so we should all be good there now it might make sense as well at
2:19
this point take a copy of that go into our wallpaper and do something similar in this case
2:24
maybe we'll just use the file name we don't actually need that straight away or maybe we
2:29
won't need it ever but it's a problem that's been solved at this point now if we go back to our site
2:33
and just go back to the list view one thing that i'm noticing is that we're not seeing the slug
2:39
even though the slug and the file name in our case are both the same that won't be the case
2:43
moving forwards so i'd like to see the slug and the file name now to do this what we need to do
2:48
is go into our easy admin bundle config and under our wallpaper section directly below the key of
2:54
class we need to add in a new key called list and for that list view we want the following fields
3:00
we want the id and then i'm just pressing command and d to duplicate that line the file name and
3:06
these are all properties on our wallpaper entity so again scrolling up these are just the property
3:12
names that I want to see I want to see the slug the width and the height and of course any that
3:19
you omit here or leave out will not display but now we are getting our slug so that's another
3:25
problem solved now I'd like to address this width and height problem it's the same problem for both
3:30
so addressing it for one is going to fix it for both and beyond these most basic entries we can
3:35
actually do a little bit more than this we can specify the property so in this case this is the
3:40
property name but we can also tell it what format this property should be in so let's just get rid
3:44
of that piece for the moment and we'll say our property is going to be that width property but
3:50
our format in this case is going to be percentage d now that very similar to when you doing like a sprint f inside any php function and this is all documented it both in the show notes and also obviously on the easy admin documentation so you
4:05
can see now the width one is sorted but the height one's still incorrect so again command D let's take
4:10
a copy of that one out and drop it in and that should be both of those problems solved that looks
4:15
good. Now it'd be really nice also here to have a thumbnail of the image itself that is some data
4:21
that we have available, sort of. So our image is really a concatenation of our file name and
4:27
the publicly accessible images directory, which we know lives in web images. So if now I was to add
4:33
in a new entry into this list of fields, I'm going to call image, try and refresh that. Well
4:38
it's coming up straight away as inaccessible and rightly so doesn't have any idea as to what on
4:43
earth we're talking about there. So again, if we look inside our wallpaper, we don't actually have
4:48
the concept of an image. That's a construct that we've come up with, as I say, based on that
4:53
concatenation. However, Easy Admin Bundle can use something called virtual properties, which you may
4:59
have seen if you've ever used anything like JMS Serializer before. But if that doesn't make any
5:04
sense to you, then don't worry about it. Essentially, a virtual property is, again, if we look on our
5:09
entity, these are real properties. But a virtual property is one that we're sort of tricking Easy
5:15
admin bundle into thinking is a valid property but it isn't and the way it's going to do that
5:19
is by using a getter so if our property is called image then our getter for our virtual property
5:26
needs to be get image and so right at the bottom i'm just going to create a new public function
5:31
called get image and as we've already said the image in our case is just going to be the file
5:35
name with some concatenation so let's see what happens now if we refresh so we are as expected
5:41
just seeing the file name. What we want is to concatenate that with that publicly accessible images directory
5:47
So again, back inside the easy admin bundle config, what I gonna do is use another one of these special property types where I gonna say our property is image And that again the name of the property that we using So it could be anything It could be wallpaper image or wallpaper underscore image or anything like that
6:04
That's just something that we've come up with ourselves. And then we've got type. And this is a type that's supplied by the Easy Admin Bundle
6:11
So this one is image also. But just because we're using type image doesn't mean our property name has to be image
6:16
Hopefully that makes sense. And then we need to give it the base path, which, again, is what we've already discussed
6:21
it's our web images directory web images is where all our files live and so when we concatenate the
6:28
file name with that path then we should get our image so we don't need to start with web images
6:33
because web is our publicly accessible site route so from the site route we're in slash images and
6:40
then we need to put a trail in slash in as well so now let's give that a refresh and for whatever
6:45
reason i seem to be missing an image but the rest of them are displaying so landscapes winter snowy
6:51
fisheye i might have deleted that one inadvertently no strange it is definitely there let's just try
6:57
inspecting that i'm not entirely sure why that would have broken it's coming up as a dot jpeg
7:02
but it's a png this may just be a fixtures problem i may have missed yeah i've got it in here as
7:09
this jpeg so that's a problem in my fixtures apologies so if we change that to png we should
7:15
be able to close that down now and close that down give that a refresh and our image does display
7:19
so I'll just go back into my fixtures very quickly and make sure that I update that again my apologies
7:25
on that one so that should be as good for the list view if we try and add a wallpaper now things
7:31
aren't quite as good file name we probably don't want the user to be specifying the file name
7:37
because that implies that they'd have had to have manually uploaded the image and then we're telling
7:41
them that they want to put the file name in and that's not really what we want we want a file input
7:45
and to be able to handle file inputs that's a little bit more work so that's what we're going
7:49
to get on to in the very next video
#Skins, Themes & Wallpapers
