0:00:00
Alright, we’re off to the races. Welcome back everybody. Super excited about today’s tutorial because it solves a long running challenge that I’ve had since probably since the first time I ever used a template inside a WordPress. And it’s probably a problem that you run into often as well. It’s one of those problems where a lot of people, I think, just like they’re like, eh, whatever, because they don’t pay attention to details. They don’t think the little things matter, but I do really think the little things matter. I do like to pay attention to detail. And anyway, instead of rambling, let me just jump in and show you the problem and then I’ll walk you through how to fix it.
0:00:33
And by the way, before we do this, you’re gonna learn a lot in this video. We’re gonna cover custom data attributes. If you don’t know what those are, you need to know what they are. And this tutorial is gonna help you do that. So even if you don’t implement what I’m about to teach you, at least do it for practice because it’s gonna make you a better dev. You’re gonna know a lot more and custom data attributes are insanely powerful and they’re getting more and more powerful by the year as they kind of build out more functionality in CSS. Okay, let’s go ahead and look at the problem. So this is the world’s most minimalist blog post template that I’ve created on our training site here.
0:01:12
But it does have a featured image section, like a hero section with a featured image in the background. And you can see right off the bat what the problem is. You can’t see the dude’s head. His head got cut off. And this doesn’t always happen, that’s the thing. And I think a lot of people would be like, ah, well, it got cut off, whatever. So, or they’ll worse, worse, they’ll take that image in a Photoshop and try to manipulate it in a Photoshop and re-upload it to make it look right. No, no, no, no, we don’t have to do any of that nonsense. I do wanna stop here and say this doesn’t, this isn’t gonna be only applied to fixing background images.
0:01:46
You can actually fix any image that uses like object fit cover, for example. So, if your template uses object fit cover for the hero image, you can do that. You can do this technique as well. But let me jump into the template and show you what’s actually going on here. So, this is the hero section in the template. Under advanced, if you click on background, you’re gonna see the background image, which is just for dynamically pulling the featured image. I have an image overlay color, that’s kinda darkening it a little bit. Pretty standard. Put a cover, background size cover on it.
0:02:17
And then this is what most people do when they create the blog post template. They set that hero to 50%, 50%. So, 50% left, 50% top, which centers the photo. So, whatever is in the center of the photo, that’s what’s gonna be prioritized. Everything else is gonna get cropped out. Well, in this case, his head gets cropped out. Now, this doesn’t always happen, right? So, if I choose a different image, just to show you, choose this one, update, and then we refresh on the front end. Like, with this one, it works a little bit better because I can at least see her, I can see her whole body, except for her foot’s getting cut off and her fingers are getting cut off.
0:02:53
But, at least, most of the relevant stuff is there. And so, this image works a little bit better. But, we shouldn’t have to not use an image that we wanna use because it’s getting cropped weird by our template. We should be able to control the part of the image that we see. And, that’s never really been possible before, but oxygen does make it possible. In fact, makes it kinda easy. You’re not gonna need to know any JavaScript, no coding, I wrote the CSS for you. All you have to do is learn a little bit about data, attributes, and you’re off to the races. So, let me go back to our little doctor friend here.
0:03:29
And, I’ll hit update, and we’ll go back and see him, and we can’t see his face. We wanna be able to see his face. Now, we wanna make this easy, right? We don’t wanna have to do any super fancy stuff from the blog post editing screen in order to make this work. So, if I’m editing a blog post, I put in my featured image, I want a way to just say what part of the image I wanna see. So, what we’re gonna do is add a custom field to all of our blog posts, and it’s gonna be a drop down that allows us to select the part of the image we wanna see. Super easy, super simple. I’m gonna use Metabox for this. You can get away with the free version of Metabox.
0:04:07
You can also use advanced custom fields. The free version will work for this as well. So, I’m gonna go to custom fields, which, I’m already there. I’m gonna hit add new, and this is gonna be called Background Image Control, is what we’ll call it. Background Image Control, because I also wanna mention it’s not just for background position. You can change the background overlay color. Mm, a lot of you have wanted to do that, right? You can change the background blend mode. You can change a lot of different stuff. And the sky’s the limit with this technique, because as creative as you wanna be, you can make it work with this.
0:04:41
All right, so, under background image control, what I’m gonna do is go to settings, and I’m gonna make sure that this applies to my posts. I want this box to show up on all of my posts. Now, if you were doing this with a custom post type, which I often do, right? Imagine making a services custom post type, a service template. So, all of your service pages are controlled by the same template. They all have a hero with a featured image, is the background image, and you want this control there as well. You can just add your CPT in there, like service CPT and boom, it’s gonna show up and give you that control there as well.
0:05:15
But right now, we’re just dealing with blog posts, okay? So, it’s gonna show up on blog posts, that’s cool. So, I’m gonna add field, and we’re gonna do a select field, which is a drop down. And I’m gonna name that field. We’re gonna call this hero background, background, if I can type position. And then, I’m gonna put in my choices. I’m dyslexic, so I’m gonna try to do this without messing it up. Left top, left center, left bottom. Center top, center center, center bottom. These are gonna be our choices, right? And then, right top, right center, and right bottom. Should do the trick.
0:05:53
Okay, now, I will say that the way that you write these in, it is gonna be case sensitive. So, pay attention, if you don’t use, like if you don’t capitalize the first part of every word, the CSS code that I’m gonna give you won’t work. It’s case sensitive. So, make sure that you get that right. All right, the default value, remember, most people set the default as 5050, so that center center. So, we can set our default value as center center. And I think that’s really all we need to do here. We don’t need to do anything with the advanced, yeah, we’re just gonna hit publish. Now, when I go to my blog post edit page, and I refresh, I should see control now.
0:06:34
All right, there we go. So, hero background position, center top. It should be center center. Let me refresh, okay. Center center. All right, let me do a new one. Because I think that might be from the database from earlier stuff that I was doing. Add new post, yeah, it is. Okay, default is center center. That is absolutely correct. All right, so, yeah, here’s our post, center center. Now, if I go back to looking at the actual post on the front end, obviously nothing has changed because we haven’t told it to change yet.
0:07:10
This is where we have to get into talking about data attributes. Because the reason I created this dropdown with these values, I can actually dynamically pass these values into the template using data attributes. And you can do this very easily inside of oxygen. So, I’m gonna go to the template real quick and show you where data attributes are located and then we’re gonna talk about them. All right, so, I’m selecting my section under the advanced tab, I’m gonna look at the attributes panel right here and I’m going to actually delete that. Okay, so when you go to the attributes panel, it’s gonna be blank like this.
0:07:47
We’re gonna hit add attribute. So, what an attribute does is it allows you to dynamically inject data into the HTML without JavaScript, without anything else. It just works, okay? And in fact, with oxygen, that’s how it’s programmed to work. So, if I just said this is my custom data type and then value is nonsense and I hit apply and I hit save and then we go to the front end, obviously nothing has changed. But if I look inside the HTML here, let’s pull this all the way up. You’re gonna see it injected, this is my custom data type equals nonsense. So, you have the name of the data type and then you have a value that you can pass into the HTML as well.
0:08:35
And this is super powerful because custom data types can be targeted just like classes. This is effectively like having a dynamic class added to a section. All right, so what we don’t wanna do is name it that and I will say this, it’s bad practice to just write a name. Like this is name, okay? You wanna put data dash before the custom name. So, we’re gonna create one, excuse me, called beji position for background position. So, beji data beji position. And then what is the value? Well, if I put in center center, remember I’m editing the template right now. So, if I put in a static value, that’s no better than becoming here and going 50-50 because I won’t be able to control it at the blog post level.
0:09:27
I need to dynamically insert a value from a blog post, right? So, what I’m gonna do is go to data, metabox field, you see my field that I made, hero background position, and I’m gonna return the value of that, insert. So, now I’m effectively whatever is in that dropdown on this post is gonna get passed into this field and then I called it data beji position. Now, what I’m gonna do is also gonna go to background and I’m gonna go take out the left 50 top 50. You wanna leave that blank so that our custom code and our custom values can overwrite this, okay? If you have values here statically, you’re gonna have to use important on your CSS.
0:10:12
I don’t wanna get too technical. But just leave these blank when you make your template. Don’t give it a background position, which is okay, because the default’s gonna be center center once we put the code in. All right, so I’m gonna hit save and I’m gonna go back here to the front. Nothing has changed. And I inspect, which I’m already doing, but now you see data beji position center center. Okay, so we’re getting somewhere. We’ve dynamically injected the value of the blog post and I’ll prove this to you. If I choose center top and I update and I go back, it is now change that to center top.
0:10:50
Like I said, it’s like having a dynamic class injected onto that section, because we can target this just like we target a class. So now it’s time to go to the CSS code that I wrote. First, I’m gonna go to center center again and hit update. And we’re gonna see it go back to center center. There it is, center center. All right, so now I’m gonna grab the code and then I’m gonna paste it into the style sheet and we’re gonna talk about it. So inside my template, I’m already in my style sheets panel over here. I’m gonna go to my custom style sheet. Oh, there it is.
0:11:18
Okay, anyway, we’ll paste this. All right, so the way that you target data attributes is by putting them in brackets. And like I said, they work just like classes. So I can literally do data BG position without any value. It’ll target every section that has a data BG position attribute on it. And I can do something to it, like style this, something like that, okay? Like whatever styles you wanna put, you can do whatever you want just like that’s a class. You can also, by the way, you pseudo elements before, after all that stuff is available to you. Also, you can attach it to another class. So like only do this if it’s the hero.
0:11:59
So if it has this data attribute and it’s got the class of hero, then do these things. So very, very, very powerful stuff. All I’m doing here is saying, if the data attribute equals left top, then set the background position to 20% 20% because that’s left and top. This is the x axis, this first number. The second number is the y axis. All right, so if you don’t know anything about background position, that’s all that’s happening here. We’re setting the x and y. If it’s left center, then do 20% 50%. If it’s left bottom, do 20%, 80%. Now you can actually change these values to whatever you want.
0:12:32
The reason I don’t do like 0%, or 100%, is because there’s typically almost no relevant information, the very, very top of a photo. Like people typically pad the photo in, right? They don’t want things touching the edges for the most part. So to get kind of the best outcome, since we’re not actually able to dynamically insert an actual percentage, we have to have these presets basically. And so to kind of be safe with it, I do the 80, 20 rule. So if I wanted it at the top, it’s 20%. If I wanted the bottom, it’s 80% instead of 100%. It gives me that little bit of breathing room in the image, which typically works out pretty well. So now that we have the code in there, I’m going to hit save. And now what we should be able to do is actually see a change.
0:13:21
So the way that you do this is if you want to see the top of the photo, you choose a top, right? And typically center top, most images aren’t going to shift left and right, though they will on mobile. So I may even want to do right top, because he’s more in the right top quadrant area. So I’m going to hit update. And then what we should see is a change in our background position based on the selection that I just made. So I refresh, and now I see the top right side of the photo. And as I scale down, you notice he kind of stays in there, because I’m letting the left side get cropped, because I’m prioritizing the right side since I chose right top.
0:14:03
I’m prioritizing the right top quadrant of the photo. And so it scales down really, really well. That’s just control, like I said, that you’ve never had before. Now imagine if you could dynamically control the background overlay. Imagine if you could dynamically control the background blend mode. Imagine if you could dynamically, like, so many options. And even outside of background images, if there’s other stuff you want to dynamically control, you can probably do that with data attributes. So start here. I think this is a really practical fix. You can play around with it, play around with all the different positions for different images, and just kind of see how, see the flexibility that it gives you, and the power and control that you haven’t had before.
0:14:49
Like I said, I’m going to give you all the code for free. If you run into any sticking points, if you have any questions, let me know. But I think even if you’re not going to use this on a real site, just doing this as an exercise is going to make you so much better dev. Because you’re going to understand data attributes. You’re going to understand how to target them with CSS. You’re going to understand how to use custom fields and dynamically insert values and all that good stuff. So that’s it. Hope you found it helpful. If you did like, subscribe, thumbs up. I’ve almost crossed 4,000 subscribers. Let’s get some more subscribers in here.
0:15:21
I want to pass that mark. Let’s march on to 5,000. Let’s get past 5,000. I’ll do some giveaways. I’ll do some cool stuff before we hit that 5,000 mark. That’s it for me today. Peace.
