0:00:00
What’s up everybody? Welcome back to the channel. Today’s tutorial is going to be covering creating a review card that has a dynamic star rating system. So if you add a rating to a custom field, the appropriate number of stars shows up and it’s all automatically done for you. This is typically a tutorial that I would put inside of my inner circle, but from time to time I do like to take these more involved and specific tutorials and put them onto the YouTube’s onto the YouTube’s, onto my YouTube channel so that you guys get a little extra bonus and because I want to challenge you with this specific training. I want you to make this a follow along training, even if you don’t have a project to use this on right now or you don’t maybe you don’t even see yourself using this on a project in the future, even though it’s really powerful. It’s going to teach you so many different things. For example, we’re going to be using repeaters. We’re going to be using metabox custom fields and custom post types. We’re going to be using data attributes. We’re going to be using custom CSS. There’s so much you can learn. And so I want to challenge you to do this as a follow along tutorial where you are doing this step by step in some sort of training environment in oxygen. So that you’re actually learning. You’re not just saying, oh, I’ll wash the tutorial and digest what I can digest. No, you actually do it along with me. And in fact, when we get to the custom CSS part, I tell you explicitly, I’m not giving you the custom CSS copy paste. I want you to write it out yourself because that is how you learn best. So if you are going to follow along this with this tutorial, because this is more in depth, you’re getting a lot of good stuff for free here. Okay. Make sure you like hit like right now. Hit subscribe right now. Hit the notification bell and drop a comment below with the hashtag in training, right in training, which means you’re doing it. You’re doing it along with me. You’re not just watching. You’re going to actually participate and you’re going to build this thing in your own oxygen environment right along with me. All right. So with that said, let’s get right into the tutorial. All right, guys. So I have a perfectly clean install. Nothing has been done here. First before we get started, I want to head over to dribble and I want to show you what I found as our inspiration. So we’re going to use these as our inspiration review card design. The only difference here is that you see these stars down here, bottom right. This is going to be the dynamic aspect of these cards. We’re going to create a custom field called review rating. And if the rating is 3.5, we’re going to show 3.5 stars here if the or three and a half stars, right. If it’s five will show five if it’s two will show two and that’s all going to happen dynamically from a custom field. It’s going to be very, very powerful.
0:02:50
So I’m going to leave this up in this tab. We’re going to use that as our inspiration. And first thing we need to think about is database structure. We need our reviews to all be in a separate part of the database all by themselves so that we can query them very easily. And we can add custom fields to them very easily. And the way we do that is by creating a custom post type. It’s called a CPT. You can do this in a number of different ways. You can do it manually with code. You can download a plugin. It’s a free plugin called custom post type UI. You can also download MetaBox. I personally use MetaBox. So MetaBox has post types and custom fields all in one. So I’m going to click on post types here. We’re going to see how we can create this very quickly. I’m going to hit new post type. And I’m going to call this reviews. I also did a video on the top 10 use cases for custom post types. After you watch this, I would highly recommend you go watch that and you’ll get a full context of what custom post types are, what they’re used for, how powerful they are, etc. So the plural name is going to be reviews. The singular name is going to be review. And then the slug is going to be reviews because when I’m querying things like reviews, I want to query reviews. I don’t want to query review. So even though the default is singular, I like to make it plural. Just makes sense in my brain and when I’m querying and things like that. So the next thing I’m going to do is turn off the ability for this review to have its own URL because just like a post and a page by default, a review will have its own URL. We don’t want these reviews to have their own URL. So I’m going to go to advanced. I’m going to turn off publicly queryable. So I’m going to uncheck that. I’m going to come down. I’m going to uncheck query var and I’m also going to uncheck enable post type archives. All right. So or has archive. I’m going to disable that. I don’t want there to be an archive for this either. So I’m going to go ahead and hit publish. And immediately in this left column, you’re going to see a new post type as soon as it finishes up here. And there it is. It’s called reviews. And I can see all of them. I can add new ones. Very cool.
0:04:55
So I’m just going to add a temporary one. And this is going to be called new review. I’ll hit publish. And right off the bat, we’ll see a couple things. I’m going to go back to admin number one. Oh, there’s already a review one in there. Interesting. Okay. There’s our new review. Let me empty that trash delete. Okay. So here we go. New review notice. There’s no view link. I can’t click to view it because it doesn’t have a URL. But I can certainly edit it and I can still query it on different parts of the website, which is very important. We don’t need this oxygen panel. Now you’re going to notice there’s really no fields for us to fill out the information for our review. If we go back and look at our dribble, we need a few different fields. We need a field for this little customer title right here. We need the customer bot, the review body. We need the rating. We need, I’m going to replace this instead of the time and the date. I think I’m going to make it actually say the star rating in text, like 4.5 star rating. And I think it would be really cool if we could say on X platform, like on Google on Yelp or wherever the review actually came from. We can actually use a drop down menu to let people select those. And that’ll keep that nice and consistent. So you can see there’s a few different. Oh, we need a headshot custom field as well. So there’s a few different custom fields that we need. So our next step is to go create these custom fields and assign them to the reviews custom post type. So I’m going to go out to our admin again. I’m going to go to MetaBox and this time I’m going to go to custom fields. And I’m going to hit add new. All right. And then I’m going to call this reviews because I’m basically creating a group of reviews of custom fields.
0:06:48
And I’m assigning the these custom fields. My dogs are going crazy because somebody rang our doorbell. But I’m going to sign these custom fields to the reviews post type. In fact, that’s the first thing I’m going to do. I’m going to click on settings and post type. I’m going to say not posts in general. I want these assigned to reviews. Now I can go back to fields and I can start adding my fields. So let’s look again. We need a field just a normal text field. And that’s going to be the customer title. So I’m going to add a text field. And this is going to be called customer title. And then I’m going to add another field. This is going to be for the review body. This is going to be a text area, which is a larger text field like a multi line text field. This is going to be called customer review body. And in fact, I want this to be customer. Yeah, they can all just start with customer. That’ll kind of keep them all alphabetized and grouped together. All right. So I’ve got customer title customer review body. I don’t need one for their name because their name is going to be the actual title of the post in the post type. So that’s all taken care of by itself. I need a average rating. All right. So we’re going to add a field and this will be a number. And this is going to be called customer rating. Now, I do need to come down here and under step.
0:08:12
You’re going to see when I hover over this and says set the increments at which the numeric value can be set. Enter any to accept any number. I need this to accept decimals. So I’m just going to say any and then the minimum value is going to be one. That’s the lowest star rating that you can give. And then the max is going to be five. You can’t go higher than five. All right. So that’s going to be good there. And then I need to add a field. This is going to be an image except in metabox because of how it interacts with oxygen. You actually have to use the image advanced. And then you come down here and the maximum of files you just set it to one. So normally the advanced image field allows you to have multiple images. We’re just going to confine it to one because they don’t need more than one headshot. All right. So there’s our image advanced except we don’t want to be called image advanced. We want this to be called customer headshot. All right. So we’ve got customer headshot customer rating review body title. Oh, we also need review source.
0:09:10
So I’m going to add a select element, which is a drop down. We’re going to call this customer review source. And then in the choices, I’m going to say Google is a choice. Yelp is a choice. Sure. Critic is a choice. Is that how you is it? Yeah. Okay. Capital C as well. Sure. Critic. And then maybe the better business bureau, the BBB. Okay. So there’s our four options for customer review source. I’m going to go ahead and hit publish. And then I’m going to leave this screen open. I’m going to create a new tab. I’m going to go to my review and I’m going to see here.
0:09:49
Check this out. There is our custom fields right there. So we’re going to put all of our review information inside of these custom fields. So now we’re going to pretend that we have a client to this client is a a rougher. Right. So I’m going to go to Roofer near me. And let’s just look here at one of these. So we have here we go. Hailer high water roofing and restoration. Let’s pretend this is our client. So I would go to the review profile. I would click on the reviews and I would start looking for really great reviews. And I’m going to have I’m just going to copy this one. We’re going to do Ashley Trin first. All right. So instead of new review, this is going to be Ashley Trin. I’ll actually show you how to turn off this Gutenberg area as well.
0:10:33
Because sometimes that gets in a way in the way it gets a little confusing. But let’s go back to Roofer near me Ashley Trin. We’re going to copy. There. Okay. And then I’m going to paste this in review body. Her review title is a homeowner. Her average rating if we see is five stars. Okay. So five. And then I’m going to add media. And we’re going to create a folder called reviews. I’m using. Oh, what is it called? What is it called? What is it called? What is it called? It’s right on the tip of my tongue. What is the plug in for images?
0:11:14
Happy files. Geez. Happy files. I.O. is what I use and highly recommend for organizing your media gallery in oxygen. All right. So I am going to go. I’ve already got these downloaded here. We’re going to go to reviews. I’ve got one female two males in here. And I’m actually going to need a fourth. I’m actually going to need a fourth one. So let’s go to resources. Another resource that I really love in Vato elements. I’m going to go down to photos and we’re going to type in headshot. And then I’m going to choose another female. Let’s do. Let’s do this one. I’m choosing this one because it’s tall and all the other ones that I chose were wide. And we need to see how our headshot area works regardless of the aspect ratio of the photo that the person uploads. So I’m going to hit download and we’re going to download without license.
0:12:12
We’re going to go female two. Don’t copy these names. This is literally just for training purposes. We would actually use the person’s name company, all that stuff in the in the file names. If we were doing this for real, I’m going to go to scoosh and I’m going to take female two drag in resize. And we’ll do like 1200. I just don’t want these to be gigantic. Save, replace, perfect. Go back, upload female to. And select. OK, so I’ve selected her headshot. All of her data is in. I’m going to go ahead and hit update. Let’s also hop back here. So I’m back in the area where I do the custom fields.
0:12:59
I’m actually needing to go to post types, edit the review post type. And then under supports, you can actually turn things off. I’m going to turn off the thumbnail, which doesn’t turn off our custom field. It turns off the featured image. And then I’m going to turn off the editor. So only the title is the only thing that I want on these custom posts on these custom post types. So now when I refresh, check this out. We only have our headline and then we have our review custom fields. And then of course, if you want the oxygen metabox to go away, you can go to settings and client control. And then you can hide it on reviews. Save. Now I go back to reviews, check this out. Look at that. Super clean. The slug doesn’t even matter. That actually goes away there.
0:13:49
OK. So literally if somebody else on our team or the client is coming into ad reviews, all they do is fill out these fields and hit update. They don’t ever have to look at the front end of the website. OK. So we’ve got their rating in there. We’ve got the source all as well in the world. So now what I’m going to do is just quickly add the rest of them. So I’m going to go here. We’ll take Tina. She’ll be our other female. And oh, dear, I just closed something. Tina McConnell, Tina, what’s your review say? OK. All right. I’m just going to do. All right. We’ll just take all of that.
0:14:25
That’s fine. And we’ll put that in the body. Her title is going to be property owner just because I just want it to be something different. So you guys can see how this stuff is dynamic. And her rating is going to be 4.5 stars, even though it’s not necessarily that on here. Yeah. She gave a 5 star review. But it’s OK. We’re just making stuff up because we want to see. And I’m just going to say it’s from Yelp. I want to show you the dynamic aspect of this. So her customer headshot is this one. We’re going to select. We’re going to hit publish. Now I’m going to add new and I am going to come to get rid of these tabs back to Google. Let’s see if here’s joy Thomas.
0:15:07
There we go. All right. Thomas, you’re in. You’re in the game. You’re on the team. We don’t need to put it there. We need to put it there. Okay. His title is going to be homeowner as well. His review says this. Pop that in customer rating. Let’s say this is another 5 star review. All right. His headshot is going to be. We can pull this up. Come on. Come on word press. Word press. Let’s try it again.
0:15:43
There we go. Okay. We’ll do this guy. And he is from better business bureau. Okay. Publish. We got one more to do. And we’re going to do like a super low one like 2.5 stars. Because I have a guy in here. Headshot. He doesn’t look too happy. So this one’s going to be. Cody. All right. Cody. Thanks guys. You’re in. You’re on the team. Cody, but you only give a 2.5 star review. So customer rating 2.5 stars.
0:16:14
It’s this super depressed looking dude. And he is from sure critic. And he is a property owner and his name is Cody etharidge. Okay. Perfect. Publish. So now we have our custom post type. We have our custom fields. We have all of our reviews entered into the system. We can start building our card now. We can go create a page. We can query a repeater. We can do all the fun stuff now. So I’m going to go to pages add new. And I’m going to make this say reviews. I’m going to publish.
0:16:51
You also have to update to get the edit with oxygen button to show. And we’re going to go ahead and edit this inside of oxygen. Now I’m going to cover some of the semantic HTML stuff that you might not normally see in tutorials like this. I’m not going to cover it in depth. I’m not going to cover all of it. I’m not going to get super detailed, but I’m going to put some of this semantic HTML work into what we’re doing here. So I’m going to first start by adding a section. And if you see here, we actually need this little header up here with the button. And I’m not going to put the read all reviews because we’re not really doing that. We’re querying reviews dynamically. And we would use an Ajax load more, which we’re not going to get into that either. Because that’s beyond the scope of this tutorial. We’re focused on the dynamic aspect of these cards. All right. So let’s create a div.
0:17:46
That’s going to house our header area. Let me close this, close this. OK, that’s going to that’s going to house this. And then I’m going to below that. I’m going to create a repeater. Perfect. All right. So here’s my header. Here’s my repeater. Now for the review card and the repeater and all of that, I will use a 100% vanilla oxygen. Because I want you to be able to follow along with this if you don’t have automatic.css. For this top part, I’m just going to use automatic.css as I want to whip this up and get it out of the way so that we can really focus on the meat of this tutorial. All right. So and same thing for the repeater here, just a little margin top to get it to separate. OK, that’s actually on the div.
0:18:30
We don’t want that on. OK, thank you. Get rid of this. We want it on the actual repeater. OK, margin top is going to be L. All right, for this, I’m going to do a grid of three, two. And it’s going to be a grid of M1. So on mobile devices, I want one column instead of the three, two. I’m going to add a div, add another div. I am going to put a gap on this grid of XL. And then we need a button in here. Perfect. Oh, we need a stretch class on our grid. That’s going to make that go perfect. And then I can literally just do this and this to get our button aligned.
0:19:12
And then what does that button supposed to say become a member? All right. Or actually, let’s pretend this is a roofing site. So we’ll say like get a get a free roof inspection. OK, and then we’re just going to do button primary. And then we’re going to come over here and top rated solution customer reviews. So we’re going to add text and then we’re going to add a heading. This is going to be an H2. All right. And it says customer reviews. And then it is a OK, then this is going to say top rated reviews top rated solution. I don’t I hate the word solution. This needs to be top rated roofing company. And we’ll do text secondary. I don’t even know what our secondary color is on this training site.
0:20:04
OK, that’s fine. And then our H2 is our H2. We can do a little bit of a margin top like XS. OK, perfect, perfect, perfect. I do not like this font that we’re rocking though. So I’m going to go to manage settings, global styles fonts, change this to DMs and change this to DMs and safe. OK, perfect. So I think we’re good there. Now what we’re going to do, we’re going to switch back to vanilla oxygen. Now that we are going to tackle our review card. So in our repeater, first thing that we have to do is we have to create a query. So we have all of our reviews and the custom post type. We have to pull the data out of that custom post type. So we’re just going to create basically what a repeater is as a loop.
0:20:56
And it says it’s going to loop through all of our reviews. And it’s going to extract them onto this page. So what I’m going to do is on the ID level primary tab, I’m going to click on query. And then I’m going to click on advanced and I’m going to hit edit query. And this is the oxygen query builder. It allows you to set your parameters for your query. So I’m going to hit add query parameter. And the first thing we need to do is grab the post type. So you do post type. You can see it right here in the drop down add value. What was our post type called reviews? Remember when I said in the beginning, I like to make it plural. So we’re querying reviews. We’re not querying review. If you type in review, it won’t work. If you type in reviews, it’ll work because we made it reviews. Next thing I’m going to do is add a parameter called no found rows.
0:21:45
And this ensures that we will not have pagination. I just set the no found rows to true and we don’t have pagination. Then I just close this. That’s all we have to do. Hit apply query parameters and you’re going to see there are four empty boxes representing the four reviews that we put into our system. So it is locked and loaded ready for action to query these reviews. But as you can see right now, they’re stacked on top of each other. So what we want to do is actually turn this repeater into a grid. So I am going to, and I’m not going to, again, we’re not going to use automatic.css. We’re going to use vanilla oxygen for this. We’re going to create a custom class. This is going to be called reviews grid. And I’m going to hit enter and then I’m going to go to advanced layout and, yeah, grid right here. And as you can see, it starts to add a gap.
0:22:37
Now you actually probably don’t want to do it from here. You want to do it from because it’s a repeater, they put the grid function in a different place than it normally is. So you would want to go to the primary tab grid layout, enable grid column count. We’re going to do a two column grid. We’re going to take away the max, the min width. We’re going to set a gap in rims or imms, not in pixels. Avoid pixels at all costs. Pixels are not accessible. I do not recommend using pixels ever. So I’m just going to use rim and I’m going to set my gap to three rim. My row gap is going to be also set to three rim. And I’m going to make sure that all of these divs stretch. Okay. And sometimes when you click these buttons in oxygen, they don’t respond right away. All right.
0:23:23
So I’m going to go ahead and hit save. So we now have our basic grid structure for our review cards. Now here’s a critical thing to understand. I’m going to open the structure panel. Here’s our repeater. Right. Here’s a div that is in the repeater by default. This is whatever you put in this div gets repeated. Okay. And then we can put dynamic data in the grid. So when it repeats, it actually doesn’t repeat the same data. It repeats the unique data that applies to that specific post and the custom post type. I guess the best way to explain it. So if you need the card, we’re creating a card, right? A review card looks like this.
0:24:03
If you need the card to be clickable, then you need to put a div inside of this default div because you cannot make this div a link. There is no way to do it. It’s impossible in oxygen. So if you need the card to be clickable, you put a div inside of this div. And then that becomes your card. Okay. But we don’t need this card to be clickable. So we’re just actually going to use this parent default div right here. And so we’re going to use BIM naming conventions and name all of our classes so that we keep them super organized and super readable. And anybody that comes behind us can know exactly what’s what and exactly what’s where. And so it looks like this. We’re going to call this a review card, review-card, and I’m going to hit enter. Now let’s take a look at the general structure here.
0:24:49
We’ve got an image next to two items of text. So we are going to need a div in fact two divs. We’re going to need a main div for all of this and then another div that houses these two items here. That way this main div can be horizontal flex. And then this div can be vertical flex. We’re going to need a text item right here, which we’re actually going to make a block quote. And we’re going to need a div down here that set the horizontal. And inside that div, we’re going to need text over here and we’re going to need another div that wraps these stars. And then we’re going to put SVG icons inside of that to house our stars. And then that’s it, I think I think that’s it. Okay, so first thing we need to do the tag on this main div should not be div. So in semantic HTML, these are actually articles. There’s probably a debate of whether they’re an article or maybe a figure or an aside or what I feel like they’re articles. If you look in the semantic HTML documentation, it seems to match articles most appropriately. An article is not an article like a blog post.
0:26:03
It’s a standalone piece of content, which a review in itself could stand alone, right? It’s from the other content on the page. So I’m going to switch this tag to article. All right, perfect. So that is done. Next thing I’m going to do is I’m going to add the first div that contains these items up here. And that is going to be my header. All right, I’m going to click into my parent again because I don’t want to put a new div inside of this div. In fact, I’m not even adding a div. I’m going to add a text element. And I’m going to set the tag on this to block quote, but it’s not there in the list. So I do use custom tag, use custom tag, use custom tag, block quote. OK, I’m also going to do this on the repeater because I think this tends to do better. You turn this to single mode and it won’t try to dynamically populate all of these divs while you’re working. Maybe I have to do it at the ID level single mode.
0:27:07
Oxygen’s hating me right now for some reason. There’s normal mode. There’s single mode, but why is it not actually turning into single mode? All right, I’m going to refresh this. I’m going to see if we can get us into single mode so we can just be looking at one card and not having the entire repeater trying to dynamically query all of this stuff every single time I make an edit and edit. OK, there we go. Now I have one card to look at the rest are there. They’re just kind of hidden for now. All right, so there’s my block quote. And then I need to add another div for the footer down here. All right, so div. Now remember an article is like a unique standalone thing. So just like a website can have a header in a footer. An article can have a header in a footer.
0:27:53
OK, so we are going to make this have the header tag. We’re going to make this have the footer tag. And we already have the article tag on here. Now I need to have custom classes assigned to these things. So this is going to be review card and I said we’re using BIM. This is the block level of this class. The element is this div right here inside of it and this element is the header. So review card header. Then this is review card footer. And then this is review card body. Bam just like that. Now this is a block quote, which I believe comes with default margin on the left hand side. So we’re going to put that at zero to take that away. I also want to make sure that there’s no padding on this at all. So we’re going to put zeros on all sides for padding.
0:28:48
And I think we’re good to go. So this has a custom class, custom class, custom class. Now we’re going to add some things into the header. First our image. So I’m going to add an image. And I’m going to add a class to that immediately review card header. Double underscore header double underscore image because this image is in the header of the review card. See how this is all semantically like appropriate. Everybody can follow along and see exactly what image I’m referring to. So I add that now I’m going to change its width. We’re going to do six rim width six rim height. Okay. Perfect. We might want that to be seven point five, which is a it equates to 75 pixels on this site anyway.
0:29:38
Okay. So we’ve got our image in there. It’s got a class. I’m going to add another div in here. And this is going to be the review card. Header and this will be. Info would just say this is the header info basically. Okay. Or had a header data, whatever you want to say, I mean this stuff is up to you. Right. What I need to do is on this header, I need these things to be side by side. So I’m going to choose a horizontal flex layout and that puts that div right next to this image. Now what I’m do I’m free to do is I’m able to add a heading in here. And this is going to be an H3 and we’re going to call this. Review card.
0:30:27
And I think the heading is like we don’t have to nest it under the header. I guess I will for just consistency purposes. So that’s header heading and then I’m going to do text. This is going to be their title. So this is going to be review card header. We could do customer title, but that’s a little long. I think people can get what title means. Okay. Okay. As you can see these this text is touching this image. There’s a couple different ways to handle this. What I’m going to do is click on the image itself. And I’m going to put a margin on the right of one M. All right. Now you can also see that the text is aligned to the top of that image.
0:31:15
So I’m going to click on the whole wrapper that set the horizontal flex. And I can now use vertical item alignment to align these things to the middle of each other. So now you see that pushes that down. Now it would really help if we could get some actual content in here to look at. So I’m going to just double click this and I’m going to inject dynamically the title of this post, which is the name of the person. So I’m going to insert data post title insert and that’s going to dynamically insert the person’s name. There you go. Cody etharidge. Now I’m going to dynamically insert their title. Which is metabox field customer title insert. There we go. It’s going to populate perfect. So Cody etharidge is a property owner. Next thing is you see this is a square image. That’s a problem.
0:32:04
So I’m going to go set some borders on this. So the borders area in oxygen is bug city. Bug city. I don’t ever touch it. Okay. Because the minute you touch it, things start whacking out. It gets like super laggy. The buttons don’t work. You can’t type in the fields properly. So I just bypass that. I go to custom CSS. I’m going to do border radius and I’m going to zoom in. So you guys can see what I’m typing. Border radius 50%. That’s going to make it a circle.
0:32:33
And then I’m going to do border of two pixel solid DDD. Okay. Which is like a light gray. And then what I’m going to do that just takes care of our borders issues. Now I’m going to click on data and I’m going to insert the metabox customer head shot size. I’m going to choose medium, which we actually should have a small here for this. But I don’t have my custom image size is loaded. I have a separate tutorial on how to do that follow along with that. But I’m going to go ahead and hit insert on this for now. And you’re going to see that he’s super scrunchy, right? He’s like he’s squished because I said a width and a height that don’t match the aspect ratio of the actual image that I uploaded. So for this, I’m going to go to custom CSS and I’m going to do object. Sorry, let me zoom in again object fit cover.
0:33:26
And then I can also control the object position. So 50% 50% is the default. But if I choose, I think it’s the first one. Yeah, see this, this goes left and right. So if I do 50, if I do 80, it’ll put him over there. So imagine that tall head shot, where is her positioning going to be? I probably don’t want it right in the middle because that might be like her neck, right? So if we do 20%, that’ll probably be more toward the top. Maybe 30% gives us a little more breathing room. We can’t see it doing anything on this one right now. But I think when we get to hers, we’ll see how that helps things. Okay. All right. So that’s big. All right.
0:34:05
So we’re going to zoom out. We’re getting there, guys. We’re getting there. I don’t know why this is all highlighted. That’s weird. That’s like an oxygen bug going on. All right. So on my review card, I definitely need padding. We don’t want the content of this card touching the edges. So I’m going to go to size facing padding and I’m just going to do two rim on all sides. Let’s do three rim on all sides. There you go. So that gives us nice little breathing room there. We’re going to add a border while I’m here. So I’m going to go back to custom CSS.
0:34:38
We’re going to do border to pixel solid DDD. That’s going to give us a nice light gray border. And then I’m going to do border radius of 0.25 M. And we’re going to see what that does for us. I think that’s pretty good. Let’s look at this on the front end because oxygen’s trying to do a bunch of like crazy highlighting stuff. Look at that. All right. Our card is getting there. We’re getting there guys. All right. I think that’s good. I think that this border is a little lighter. So I might make one adjustment here by changing this to 1.5 pixels. And I also said I don’t like to use pixels.
0:35:19
Right. So this would be 0.15 rim would match 1.5 pixels. Okay. So there we are. Let’s take a look on the front end. What we’ve got going on. Perfect. Next thing we need to do is on that image before we forget we need to set alt text alt text. So I’m going to hit data next to this alt text field. And I’m going to insert the post title which remember is the person’s name. And then after that. So it’s going to say Cody ethridge customer headshot is what I would like it to say. I had saved. We can go look at the front end on what this does to the HTML. So I’m going to inspect this.
0:35:58
And you can see right here Cody ethridge customer headshot is in the alt text field. So that is good. We need that for accessibility. We need that for SEO really good stuff. All right. I’m wanting that to be a little bit bigger. So we’re going to go with 8 rim. And then I want this to actually be a little bit smaller. So font size of rim. Let’s try. 1.8 maybe. How about how about 2 let’s do 2 what was it before. Yeah, OK, 2 rim. And do all of this stuff on the classes by the way don’t do any of this stuff on the ID level right. We created all these custom classes for a reason.
0:36:41
So this one I’m going to do rim of 1.5 maybe. Yeah, that sounds good. All right. And then I’m going to do a text color of 777. Nice. Now normally you would use global colors or in automatic CSS you would use variables right. But that this is up to you right. You’re probably not going to create this exact same card. It’s up to you to you know, use your own custom colors when you’re doing this on your own site. All right. So I’m liking the way that’s looking. I’m liking this. Let’s tackle the bottom now. Actually, let’s fill in the body of this. So insert data.
0:37:19
Metabox field customer review body insert. Perfect. I do want some more spacing here. So what I’m going to do is grab this review card body margin top. I’m going to do an M of two and margin bottom. I’m going to do an M of two and that’s going to give that bit more breathing room. Let’s take a look at how that is looking on the front end. All right. Man, we’re getting there guys. All right. I’m wondering if two and see her headshot actually looks it’s pretty good. It’s positioned pretty well. If it was 50% let’s just do that. So you guys can see what I was talking about custom CSS. 50% save.
0:38:03
Let’s go back to the front end. Let me set up straighter. I feel my neck certain to crank. All right. So it’s really, really cutting off like her hairline up here. So now I change this to we can actually do 25% save. And now you can see her hair right. I don’t know if you guys can see that we zoom in see you can see all of her hairline in her hair now. So I’m not cutting off into her forehead. Clients always complain about that stuff by the way and notice everybody else is still positioned really well in the frame. And we didn’t have to crop these photos in the very beginning because we use object that cover. We’re doing all this stuff dynamically can move very fast. All right. I’m thinking that the one that the two M on here is a little aggressive. So I’m going to just turn this into 1.5 M instead.
0:38:54
And let’s go ahead and tackle the bottom now. So if we go to our dribble we need text and we need to give for our stars. So on the footer I’m going to set a width of 100% and then I’m going to add a text element in there I’m also going to. Let’s add this dynamically first. All right, so we’re going to insert data we’re going to insert metabox field we’re going to insert the customer rating. Oh, it’s getting it’s getting weird on me now look look look stuff’s like disappearing. OK, use default output format for text elements or short code element insert. OK, good. 2.5. All right, we don’t actually want to say 2.5 right. So we want to say 2.5. Let me edit this. Dash star star rating on and then we need another insertion of custom of a dynamic data, which is our select field drop down the source of the review.
0:40:01
So I’m going to hit insert data again metabox field and this time I’m going to do customer review source. And I’m going to hit oh it says return value or label they’re both the same. So it doesn’t really matter. If I can get the drop down to engage. Oxygen is getting buggy on me. OK, I’m going to return the label insert and then let’s click out and see what happens. There you go 2.5 star rating on sure critic. That’s exactly what we want. Now before we go any further, we need a custom class on this. So this is going to be review card footer and then rating text. Bam, OK. While we’re here, let’s go font size rim 1.5 and let’s go text color 777. Perfect. And then let’s add a div for our stars. You can see that added it underneath. So I know automatically I need to grab my footer set this to horizontal flex.
0:41:03
And then what I can do is there’s a couple ways to do this. You can do space between or what I like to do most often is and I’ll do it after I put my stars in. I will do left auto margin. All right, so I’m going to come in here and this is going to be called a review card footer stars. And then I need to add a star we’re going to use SVG. So we’re going to use an icon. And we’re going to call this review card footer star. I don’t need it to be in stars. You don’t have to get that like inception about it. So footer star. This is going to be a star. Good. And then this is going to be actually you know what? Let’s delete this. Because I’m thinking about.
0:41:50
I’m thinking about the future. OK, so manage selectors. We’re going to delete star. See how they’re all paired together nice and neat and all grouped alphabetically. It’s really good. All right, so I’m going to click on the star again. We’re going to call this review card footer. Star double dash because this is a type of star. Not all stars are going to be the same. So this is a solid star. So we’re going to call this star solid. Perfect. And we’re going to make it a yellow color. I actually don’t know what would be a good color for this. That’s getting there.
0:42:38
That’s pretty good. Let’s try. Let’s try that. Let’s try that. All right, it’s a little muddy. It’s a little muddy, but whatever. All right, we’re going to do 20 pixels on this. That’s about right. All right, let’s grab the wrapper for this. And like I said, we’re going to go auto left margin, which is going to force it all the way to the right hand side of this div. I also want these things to be horizontally aligned with each other. So I’m going to grab the whole footer wrapper and set the vertical alignment to middle. And that’s going to make sure the star is perfectly in line with the text. So what we need here is five full stars. And we need one half star because the half star is if you think about it, if it’s a three, and if it’s a three point, anything rating, we’re going to use a half star.
0:43:30
We’re going to use three full stars and a half star. If it’s a four point, something rating, we’re going to use four full stars and a half star. So you actually, you’re never going to have more than one half star, right? So you only need one half star. All right, so what I’m going to do is on footer card review card footer star solid. I’m going to duplicate this four more times. Okay, there’s our five stars. Now, obviously I need to grab that wrapper set that the horizontal flex. It’ll put them side by side. I also need to space them out just a tad. So on the right hand side, I’m going to add margin of point one five M. Just like a little bit of spacing, but I don’t want this last star to have any spacing. Or do I? Because the last what if the last star is a half star? What if the last star is not a full star?
0:44:26
Maybe we shouldn’t do this. Maybe we should do it the other way. Let’s do it on the left because you’re never going to have a half star come first. So on the left hand side, I’m going to do one point five M. Oh, no, sorry, point one five M. That got crazy for a second. Then I’m going to click on the state button and I’m going to add a state and I’m going to say on the first of this type. First of type. So the first of the solid stars has a margin of zero and that’ll get rid of this extra little margin that was on the left hand side here. All right, excellent, excellent, excellent. Now, we need to make sure that the stars never collide with the text, right? So as this gets down, you’re going to see these things may actually end up colliding at some point. So on this review card footer rating text, I want to margin on the right of this to protect it. Of like one M, which isn’t going to do anything right now. But if these things got close together, there’d be a one M gap to protect each other. But I am seeing that like there, I don’t think I want that to break to another line.
0:45:31
I certainly don’t want that to be the correct line height. So on this text, I want the typography line height set to 1.1. That’ll make sure that if this does break to, well, that looks fugly. It does break to two lines. The text looks normal. It’s like close together. It’s not all space out. But I don’t really want that to happen. I don’t think. That’s not that bad. But what if this stacked here? So I take this wrapper and I can say just do vertical and align everything to the left. And then take that auto margin that I had off by setting it to zero. And it stacks nicely. And I’m wondering if now my wife’s calling me. Let me pause one second. Okay, just had a quick time out for a phone call. All right, so I want to space these out. So I’m going to say my star wrapper at this break point has a margin top of 0.5m.
0:46:39
And that’s how our card is going to look at this particular break point. Now, I know that at 768, we’re just totally busted up here. So what I want to do is actually stack our grid at that break point. So if I go back, sorry, let me go back down to 768. That’s where I want to stack it. So I’m just going to reactivate grid layout. I need to be on our reviews grid class, though. I’m going to reactivate grid layout, enable grid. And I just changed it to one column here. Take away the minimum width. And I can put a new gap. This will be a two rim gap instead of a three rim gap. You actually don’t need a gap on the columns, but whatever. And so we’re good to go there. So now this is what we’re going to look like on mobile.
0:47:25
This has a problem on mobile, doesn’t it? So here at yeah, that looks good. So at this break point, this div needs to be set to left. There you go. So now really everything looks pretty good on mobile now. All right, excellent, excellent, excellent. Now the hard part, guys. First, let’s add our half star. So I’m going to duplicate this one more time. I’m going to create a new class review card footer. Star double dash instead of solid. It’s going to be half. Okay, and then I’m going to copy the same styling over from solid to half. So I don’t have to do all the styling again. And then remove the solid class.
0:48:19
Okay, and I also need to change this to a half star. There you go. There’s our half star. All right, safe. Now what we’re going to do is some custom CSS. And we’re going to have to add a data type as well. So I’m going to grab this wrapper and I’m going to go to advanced attributes. And I’m going to go to data rating. Let’s call it data star rating. There you go. So data star rating or should we call it review rating to kind of link it to reviews. So data review rating that would probably make the most sense. What I’m going to do is dynamically in the value dynamically inject the review rating. So customer rating right here. I should actually make this customer rating.
0:49:14
So data customer rating and then the value is the customer rating. Right. That makes sense. Right. That matches. So it’s effectively inserting whatever the rating is here. So I’m going to hit save and show you this in the HTML. So I’m going to refresh. Nice. Look, we’re looking pretty sharp guys. Looking pretty sharp. So I’m going to reef. I’m going to inspect this. And on the wrapper, which I’m on right now, you can see right here data, customer rating equals 2.5.
0:49:45
So it’s inserting the rating into the HTML. And what I can actually do is use CSS to target this and manipulate the amount of stars and which stars show up by using data attributes. Let’s take a look at how we can do that. Let’s go to style sheets. Oops. Let’s open style sheets. OK, I’ve got a reviews style sheet right here. I want you to put everything into a organized style sheet. So if you didn’t have a review style sheet, go ahead and add it reviews. Boom. And now you have a clean style sheet. This is only for our reviews. All good. Now if you’re working on a team, what I’d have my team do and what I do is I always put a comment and I put my name right.
0:50:36
Kevin Geary. Kevin Geary did this. So if the review stars are fucked up, go talk to Kevin Geary. Right. We always know who did what. So we can talk to the right person. All right. We don’t have to go. Hey, who did this? All right. Who fucked up the stars? Yeah, you don’t have to ask around. You already know who to go to. OK. All right.
0:50:54
So I’m going to do this in real time with you. I’m not what I’m not looking at a cheat sheet or anything else. I’m like, I’m literally thinking about this in my brain, doing it with you real time. And I think there’s an added problem that we’re going to run into here, which is you can’t see what you’re doing in the builder because the CSS targeting because this is dynamic over here. It’s not going to apply the way. So we’re going to have to jump back and forth between the style sheet and the front end of the website to actually see what’s going on. So let’s get started. The first thing I want to do is I want to hide the half star. So if you think about this, it doesn’t matter what the review is. If it’s four point something, it’s going to get a half star. The only time the half star is not needed at all is when it’s an even rating like four or five or three or two or one. If it’s a 4.2, it’s a 4.7, a 4.5, we need the half star. But you’re never going to have more than one half star. Right. So you only need one half star.
0:51:53
I think I explained that already. Sorry, my brain’s doing a thousand different things. So I want to hide the half star right now. All right. So we’re going to target that half star. We’re going to do review card footer stars is I think that’s our wrapper. Right. And then we have review card in our wrapper. We have review car footer star double dash half. That’s our half star. Right. Display none. There it goes. It disappeared. So I will be able to see that by itself. I’m not sure what else I’ll be able to see as we go through this. Like when we get into the data attribute stuff, I don’t think we’re going to be able to see what we’re doing.
0:52:31
All right. So I’ve got the half star hidden the next thing I need to do. Cody Cody’s rating is 2.5. So that’s the first thing we’re going to tackle is a 2.5 start rating. Because that’s the only one that we can see at the moment. Well, I guess we can see them all on the front end, but whatever. Okay, we’re going to start with the 2.5. So the way you target a data attribute is data. You put it in brackets data customer rating because we called it data customer rating. So it makes sense that we’re writing data customer rating, right in brackets. And if the data customer rating is equal to something and this data customer rating is attached to review card footer. Stars. I’m going to stop there so that you can process this. If we have a data customer rating that’s attached to review card footer stars, which we do, let’s go to the front end.
0:53:27
We’ll see the HTML here structure inspect. So if I am selecting my wrapper, which is right there. See, I have review card footer stars and data customer rating on the same item on the same div. That’s when you want to target those two things together, you put them together without a space in CSS, right? So if the review card footer stars also has a data customer rating matching something, then we need to target the stars inside of it. So we need to target review card footer star solid, right? All the solid stars inside of it, we need to do something to them. If I said to disappear, display none, and I, oh, they did go away. Okay, great. We’re going to be able to do this. All right, we’re going to be able to see what we’re doing. So notice, I just made them all disappear, but I don’t want them all to disappear. I only want a certain amount of them to disappear. There goes my dog again.
0:54:29
This is amazing. I love recording. I love like two phone calls, a dog barking twice. This is fun. It really helps me process. It really helps me think and concentrate and, you know, solve complex problems. All right. Anyway, gosh, I love being passive aggressive. Okay. If the data customer rating, let’s think about this. If it matches, remember, it’s, if it starts with two, if it starts with two, I don’t care if it’s 2.5, 2.8, 2.2. If it starts with two, I don’t want to show stars three, four, and five. I know that. So I’m going to use a little carrot, a little up carrot. I don’t know what that thing is called. But if you do this, it’s basically saying if this string starts with something.
0:55:20
So instead of it equaling, it’s if it starts with. And I’m going to say if it starts with a two, then I want to display none. But I don’t want them all to go away. And I’m wondering right now, we get a double check this because they’re not disappearing. So I’m going to hit save. Oh, that’s right. We didn’t have the 2.5 in there. We decided it equals to anything, right? So this goes to show we’re not seeing what we’re doing in real time. Because if I go to the front end, I bet all the stars are gone because that rating does equal to something. And I’m telling it to display none all the solid stars. So let’s go to the front end and just see if we lost all of our stars on that review. And we did see the others have their stars, but this one does not have because his rating is 2.5. So I only want to make stars three, four, and five disappear. So the way we’re going to do that is with in of type. So we’re going to do in of type like this.
0:56:18
And I’m going to put in parentheses. We’re going to do in. I think it’s going to be in plus three. I’m thinking in my head. Let’s just see what that did save. And refresh. Two stars. OK. Now what we need to do. Think about this. We need our half star. And we only we all actually instead of think we only need our half star. We always need our half star. If the rating contains a decimal. Yes, because if it just contains two, we’re already done, right? If it starts with two and nothing else, we’re done. But if it contains a decimal. We need a half star.
0:57:12
So what we’re going to do is data customer rating star equals, which means contains instead of equals. It means contains a decimal. So if it has a decimal, then I want to target and this is a sash to review card footer stars. And we have this class, but not the solid version, the half version, which we displayed none right here. We’re going to set that display now to flex. So if it has a decimal. It’s going to have a half star. If it has a two, it’s also going to have two full stars. Let’s see what we get. Refresh. All right. We’re not getting our half star. All right, so oh, look at this.
0:58:11
I put them together. That needs to be spaced out, save. Come on, half star. It’s like the little engine that could there it is. And look, the 4.5 got its half star too because it has a point in it, right? And this is not and this does not. OK, good stuff. Now what we need to do is we need to build on this. So if it’s contains it starts with a two, it’s in plus three. If it starts with a one, it must be in plus two. If it starts with three, it must be in plus four. If it starts with four, it must be in plus five. If it starts with a five. No, if it is equals to five, it can’t start with a, it can’t be a five point eight. It’s five is the max.
0:59:08
So if it equals five. Then we should have to do anything. I don’t think we have to do anything. It should just have five stars by default. So let’s just save. Refresh a 4.5 star rating one two three four and a half. Here’s five. Here’s five. Here’s two and a half guys. I think I think we’ve done it. I think we’ve done it. I’m trying to think of any other complications here. Let’s test this now. Let’s say we want Cody to go from what he’s at right now, 2.5.
0:59:58
So let’s go back to dashboard. Let’s go to reviews. Let’s open Cody. Instead of a 2.5, we want him to be at a 4.5 update. Now this should change from two and a half stars here and 2.5 stars here to 4.5 and 4.5. We refresh. Ha ha. Look at that 4.5. 4.5. See how this is dynamic. We add new reviews. We don’t have to worry about hiding and showing stars on reviews. Man, my dog is going absolutely insane. It’s driving me nuts. All right.
1:00:36
I think I think we’re done here. I think we’re done here. We pretty much done everything right. Let’s double check. Double check our structure. OK. We’ve got this as an article. This was the heading. This is a block quote. This is our footer. All this looks good. I’m not going to go into like full blown accessibility and all that. Beyond the scope of this tutorial. It’s going to be a long enough tutorial. I do think that these things are way too far apart.
1:01:09
Let’s just take off the margin top excess. There we go. I don’t know. I’m just messing with stuff that doesn’t even matter at this point. OK. That’s it. Let me go back to camera. While my dog continues to bark in the background. I really hope this helped you again. Like I said, this is a more in depth tutorial than I normally do on YouTube. Normally we’re tackling this kind of stuff inside of the inner circle. But I want to give you guys a little taste. Link to the inner circle is down below by the way. I tried to do all of this in vanilla oxygen. So that you don’t need automatic.css or any other fancy tools.
1:01:46
If you found this helpful, found this helpful, hit like. Make sure you’re subscribed. Hit the notification bell. Please drop a comment. Remember hashtag in training or whatever to show that you’re actually following along with this tutorial and learning. Love you guys. You can also ask any questions you want below any concerns, anything like that. I’m sure there’s something I forgot about. This is a. It’s an in depth tutorial. Right. So we can discuss it in the comments down below. Thank you guys for being a subscriber. I will see you guys very soon. Bye.
