0:00:00
If you have been watching this channel for any length of time, you know that dynamic data and query loops and custom post types are very important in modern web design. But there is a scenario that you are going to run into from time to time, and you might look at that scenario and you might say, I can’t do this with a query loop. I can’t do this with dynamic data. I have to abandon that philosophy, and I have to go back to building this statically. And I’m gonna show you one of those scenarios right now, and we’re gonna talk about why you absolutely
0:00:32
do not have to abandon query loops and dynamic data. It just takes a little bit of extra skill, and I’m gonna teach you those skills in this tutorial. Okay, so I’m gonna go ahead and share my screen. What you’re looking at is cards on ghost.org. These are essentially marketing verticals that Ghost targets
0:00:53
with their software. They target creators, they target publishers, they target businesses. And so we want to create a custom post type for these. We want to add this section as a query loop and generate it dynamically with dynamic data. But as you can see the challenge here is every vertical has Accent images not only do they have accent images like this one has two and this one has one and this one has one But every accent image is positioned
0:01:22
Custom position manually it seems and then you might be asking yourself. How could we possibly position things manually? In a query loop because there’s only one thing in a query loop. There’s not I don’t I can’t Select each of these things and and move things around the way that I would need to. This is the challenge and this is where people would say, ah I can’t do the query loop, I can’t do dynamic data. You actually can, you just have to know an approach, a process for doing it and that’s exactly what we’re gonna do in
0:01:52
this video. I’m gonna walk you step by step through creating the custom post type. So beginners, if you’re a beginner you’re not gonna get lost because we’re gonna we’re gonna go through everything okay. I’m not gonna assume you know one of the steps in the process. I will take you through every step in the process. But if you’re intermediate and advanced and don’t know how to do this, you are gonna know how to do this by the end of the video.
0:02:13
So there’s something in here for everybody. Let’s go ahead and get right to it. So I have a completely blank page. I’m just gonna go to Edit with Bricks. And the first thing I’m gonna do is we’re just gonna get the bones of this layout onto the page and then we’re going to go in and start creating our custom post types and our fields, our custom fields, putting in dynamic
0:02:34
data. We’re just going to walk through step by step. So I am going to add a section here. We’re not going to bother with the overlapping and all the designs that we’re just going to build the cards as we see them here. So I’m going to add a block inside of that grid I’m going to open my structure panel over here. So you guys can see what we’re doing This is going to be called a verticals card. This is going to be the verticals grid I have a class on the grid called verticals grid. Let’s go ahead and just make the grid real quick
0:03:07
I’m gonna go display grid We will right-click here make it a three column grid because there’s three cards in the grid. I’m going to use my grid gap. Now I’m using automatic CSS. I’m using these automatic CSS contextual menus where I can just right-click and choose a value and it’s very very very simple and easy and fast. But if you’re not using automatic CSS it’s okay. You just you can make the grid however you want to make the grid and put in whatever
0:03:32
values you want for the gap and this just makes my life easier doing it this way. Okay so now when it comes to the card what I’m going to do is we’re going to talk about the structure real quick. So we’re going to have a media wrapper. We want to wrap our media and we want to wrap our content. So we think wrappers first, right? And wrappers are just, it’s a grouping context for things.
0:03:52
So media wrapper and content wrapper, I’m going to throw those in. Those are just going to be blocks. Okay, and this one I’m just going to label here as my media wrapper. We’ll go nice and slow so we don’t lose everybody. Here’s a content wrapper. In my media wrapper, what do you guys think is going to go in the media wrapper? Probably the media, right? Okay, in this case an image. So I’m going to put the image in, but I
0:04:15
am going to call it media, just so it keeps the same name. And that’s done for that. Now inside of my content wrapper, if we take a look, what we’re going to need is a heading. We are going to need a paragraph and we are going to need a link. Okay so I’m going to hop over here and we’re going to do heading. We are going to do text. That’s going to be our paragraph and then I am going to do a text link just like that. Okay this needs to be an h3. I know there’s no other heading in this section. Normally there would be. It would be an h2 which makes these cards an h3. If for some reason you’re not going to have another heading in this section,
0:04:53
then these should be in H2. So just keep proper heading hierarchy in mind here. Now I’m going to leave this as a div. Normally you would change it to a paragraph. I’m going to leave it as a div for one reason and you’re going to see why in just a minute when we get to the dynamic data part of this. But that’s fine for right now. I just want to make sure that this says
0:05:10
description because that’s what it is. And then this can say CTA. It could say link. It could say whatever you guys want to call it, just make sure that it’s descriptive, that it makes sense, okay? And so we have a verticals card with a media wrapper and media. We have a content wrapper with a heading,
0:05:25
a description and a CTA. And that’s honestly all we need. What we need to do now is add classes to all of these things. And I would recommend, highly recommend using BIM. If you don’t know what BIM is, go watch my video on BIM.
0:05:37
I got a bunch of videos on BIM. But essentially you would say verticals card double underscore and then the name of the element. Like this is the media wrapper and you would add that class. Then you would go to the next thing
0:05:47
and you would add a class the same way and the same way and the same way. It’s very tedious. So I don’t do that. What I do is use automatic CSS. There’s a little button here that says BIM
0:05:55
and this is gonna auto BIM this for me. It’s gonna add the class the way that I want it to every single element in here. And I just hit apply classes and it’s done. And so that saves me a tremendous amount of time. So I have my verticals card,
0:06:09
every item, every element has a BEM class on it now for proper maintainability and styling and scalability and all of that. So now what I’m gonna do is I’m just gonna leave this here. We’re just gonna hit save. And now effectively what we’ve done
0:06:25
is we’ve created the structure of our little section here, but we can’t really do anything else until we have the data that we want to loop through, and that we want to display dynamically. In order to get that data put in, we’re going to have to go back to the admin, and we’re going to have to add a custom post type. Don’t get scared here if you don’t know what a custom post type is. It’s very easy, and I’m going to walk you through all of this. Okay. So I’m using advanced custom fields, which allows you to create custom post types as well. It’s what I recommend.
0:06:55
ACF pro you can use the free version for this as well. I’m going to go to post types. I’m going to go to add new and we’re going to call this verticals. Cause that’s what they are. They’re marketing verticals. The singular label for that is vertical. And you know what, while I’m here, why don’t I just go ahead and I’ll just make my screen a little bit bigger for
0:07:11
you guys. So let’s go to a 23 oh four. Let’s just bring just a little bit, okay? Make it a little bit easier for you. Let’s make sure our recording is good. We are okay. I’m gonna let’s just go full screen for this. So we have verticals. The singular label is vertical and let’s go with, I think actually that’s all we need. Let’s just hit safe. We don’t need to do anything else. See how easy it was to create a custom post type? Yeah, there’s a few other options you can dabble in there but it was not even needed for this video so let’s just keep moving. What I need now is a field group okay so I want to add
0:07:45
custom fields these are going to be assigned to every post in that post type remember a post in there an example of a post is going to be like creators so I need a field like for this description for example I need to make sure that we assign the featured image and then I’m probably gonna need a field for these accent images. And then I’m probably gonna need a field
0:08:07
for maybe the position of those accent images, okay? So let’s go into field groups here. I’m gonna add a field group and I like to name the group the same. And the word group is a little confusing here, we’ll get to it.
0:08:21
But I like to name the main group of these fields the same as the post type. So verticals and I’m going to come down and let’s just start with an easy one and I’ll show you what this is doing. Okay so I’m going to go down to WYSIWYG editor that’s a what you see is what you get editor. You’ll see what that looks like in just a second and I’m going to say that this is the vertical description. Okay so it’s a description of the
0:08:47
marketing vertical right and I’m just going to go ahead and essentially hit save now I have to do one other thing I have to tell ACF where these fields live like what should they be attached to well they need to be attached to our verticals see this this area right here the verticals when we created the custom post type that’s where this came from and so I need to say take these fields and attach them to the verticals CPT. So essentially now if I go to save and I go to verticals and I go to add new we can create one called creators. So we’re just creating it’s like a page or a post. Okay,
0:09:26
it’s just lives in a very special area now. This segmented away from everything else and it makes it easy to template, makes it easy to add custom fields, makes it easy to do a lot of different things. A lot of advantages to doing things this way. So I have creators, but look down here at what we get. This is a WYSIWYG editor right here. It’s where you can do bolds and italics and all this, all this jazz, right?
0:09:49
And I’m going to put the description down there and look at how it says vertical description. So it’s, it’s got its own label for me. Everything is nice and easy. And now if I come over I can set a featured image right so I can get this guy in here. So I’ve got the featured image now I’ve got the description I’ve got the name of the vertical I can just hit publish. Now that’s not going to show up anywhere on the site right away I mean it does have
0:10:15
its own URL actually let me back out and show you guys. When you create a custom post type it gets its own URL just like a post or a page would. Now there’s no content on it yet is what I mean there’s no template for rendering the content, but we don’t even have to go into that. But that is a benefit of having the CPT is that now you could just create that as you just go what you want to use the template, you want to use the bricks builder, you know one-off page, whatever you want to do you
0:10:40
can do. Alright, but you have a much better system for doing that now. Big thing we need to focus on is I got a custom field attached to this thing. It’s not the only custom field that I need though.
0:10:51
All right.
0:10:52
So what I need to do is add some more custom fields. So I’m going to go to ACF and I’m going to go to field groups and under verticals, I’m going to add more custom fields. Now here’s where the part, here’s where it gets a little, a little confusing. I’m going to add a group fields.
0:11:04
Okay.
0:11:04
So, and you’re like, well, you already did a group up here. I know, I get it. Naming things on the internet is hard and everybody struggles with it. Even advanced custom fields and bricks and all these builders right. So yeah they have a main thing called group but then you can put a group in a group okay. So I’m just going to choose the group field and this is going to be for accent image one, accent image one. How many accent
0:11:28
images do we need? Well based on the design I’m looking at there’s never more than two. So we have one and we have two and that should cover all of our bases. Okay so we have accent image one is a group. Now I have to put fields into that group. All right so what am I going to do? I’m going to say we need obviously an image. Okay so let’s use an image field and let’s say accent image one. Okay perfect. Now I want to add a second. Let’s pause here. Why is this a group? Well because I need another field related to accent image one.
0:12:04
This is going to be for accent image one’s position. Okay, so I’m going to add a field and we’re just going to use a text field for this. And I’m going to say accent image one position. So I have accent image one and I have accent image one position in a group together. And that group is called accent image one. and this lives in a group of other custom fields called verticals that are
0:12:30
attached to my verticals. Does that all make sense? Let’s just pause, hit save, let’s go back to the verticals, let’s open creators and just see what happened. So I come down here and now we see, okay, there’s the description that we added earlier and now I have accent image one and I have accent image one position. Fantastic! And if I want to put those two fields next to each other, by the way, so it would look a little bit cleaner, I’m going to show you how to do that as well. So I’m going to go back into ACF.
0:12:57
I’m going to go to field groups. I’m going to go to verticals because this is how I would do it. I would go to accent image one and I would go to this accent image one right here. Actually presentation, I think, yeah, okay. We’re going to do this in the individual field. You go to the presentation tab and if I do 50% on the accent image one and 50% on the accent image one position and I hit save, now let’s go back to verticals and now let’s go to creators and see what happened.
0:13:27
Now the image and the image position live right next to each other in my custom fields area. That’s super convenient, right? And much cleaner because I can go bang, bang and then do the next one and that begs the question what about the next one? What about accent image two? Okay, so in ACF, I got a field groups. One cool thing that I really like about
0:13:45
ACF, if I duplicate this, all the ones become to well on the group, okay, it got accent image two here, I still need to change these manually. So I’m going to say two, and I’m going to say two, it’s still very easy to do. I’m going to say to position and to position. You need to change the name and the label. Okay. And then I’m just going to go ahead and hit safe. Now let’s go back to verticals again.
0:14:10
Let’s look at creators and let’s see. Ah, now I’ve got two images. I’ve got an accent image one and accent image two, both with position control as well. Okay. Let’s just throw an accent image in here. So creators uses this little thing right here and I’m actually gonna get a let’s just get a screenshot I’m just gonna cheat okay I’m gonna get a
0:14:32
screenshot of that and we will bring that in to right here and I’m just gonna select it and there is that little image right there fantastic now what should its position be well one is we want to make the position required but I can also give it a default position that might be cool so let’s talk about how to do that. Let’s just go ahead and hit update here and let’s go back. We want to nail this for one post and then once it’s done for one post we’ve got everything else good to go. So
0:14:59
I’m gonna go to ACF field groups. I’m gonna go into verticals and I am going to go to accent image one position and I am going to do a couple things here. First I’m going to go to presentations. You can see this little instructions box right here. I may not be the only one working on this project so I need to add a little instruction so people know exactly what to do here. So I’m gonna say this is gonna use the inset property value and I’m gonna say top right bottom
0:15:25
left just to remind people of how the inset property value works and we’ll talk about this more don’t worry. I’m not gonna if you’re getting if you’re like oh god I don’t even know what that means it’s fine we’re gonna we’re gonna handle it. Inset property value and then what I want to do is I want to give it a default value or like placeholder text. I don’t even know if I can give it a yeah I can default and I can do placeholder text one or the other or both whatever you want to do okay. So my default value and the if you
0:15:55
don’t know the shorthand inset property it needs a top value a right value a bottom value a left value. So our default we could make as like where that image is supposed to be. But I don’t want to cheat okay. I want to show you, I don’t want you to get confused when we go to the customization of this okay. So what I’m going to do is my default value is going to be like top left corner okay. Top left corner with a little bit of offset. So from the top I want this to be like 15% and then I just
0:16:23
hit a space and now it needs the right side value. Well I want this to be on the left so the right side value is going to be auto which is going to push it away from the right. And then from the bottom I don’t care about the bottom so I’m going to put auto there and this again is my default value and then my left hand side I want to do a little bit of an offset like minus 20 pixels or something like that let’s do minus 25 pixels. Okay so now I have a top value, a right value,
0:16:48
a bottom value, and a left value as my default. I’m gonna copy that and I’m gonna also make it my placeholder text. Why would I do this? Well, if they delete the default value and then they’re like, oh, I don’t know
0:16:58
what I wanna put there. Well, now the placeholder is gonna show up. So if the, like if they don’t know what maybe a starter value should be, now they’re gonna see the placeholder if there’s no value in the input.
0:17:09
So I like to do both. All right, we’re gonna go ahead and hit save. And then accent image two, what I’m gonna do presentation okay that’s gonna have the same instructions let me go to a general and accent image 2 position we can do the same default value but I’m just gonna kind of make it opposite so we’ll put it bottom right as the default for number 2 so bottom would
0:17:31
be from the top we want auto from the right we want our little 25 pixel offset and from the bottom we want probably 15% and from the left we want auto. So it’s almost like a mirrored version of our first one. I can copy this, go to presentation, make that the placeholder text. Let’s go up here to accent image one position and I just want to grab my little inset instructions, okay? Now we’ll go back down here for two, I’ll put those in. Let’s just hit save, and let’s now go back to verticals
0:18:09
and see what we’ve got. Creators, okay, and look, so not only are the fields there, they have instructions, and they also have default values for me. And so now when I hit update, those values are committed to the database,
0:18:24
which means when I go query loop this, accent image one is going to be positioned like this by default, accent image two is going to be positioned like this by default, but at the exact same time, is that actually the value? I don’t, it actually doesn’t look like it’s putting
0:18:37
the value in there. It looks like it’s only putting the placeholder. We’ll see in just a minute when we go. I want to work through some of these problems and challenges that you guys might run into as well, because it’s super helpful.
0:18:48
All right, so let’s go back and let’s go in and let’s just start looping things now. Let’s get to that step. So let’s go, because a lot of you are like, why are we doing all this on the back end? I don’t even know how this is going to translate to the front end. Okay, this is how, right here. So I’m going to take one of my cards.
0:19:01
It’s actually the only card I’m ever going to have, because I’m going to loop it, which is going to create more instances of it. And so I’m going to toggle this right here in Bricks. This is use query loop. I’m gonna open the query loop panel and my type is post, my post type is verticals.
0:19:19
This is where I’m telling it, I wanna query all of my verticals. I’m gonna change the order to ascending, okay? So go from old to new or whatever. And that’s it. So now I’m gonna save.
0:19:31
Now you’re not seeing anything duplicating or looping or anything like that, why? Because we only have one post in the database. We only have creators. Okay. But what I can do is I can start bringing in my dynamic data now.
0:19:44
So for example, if I take this heading, which is a static heading, and I remove it and I click this little lightning bolt, I can say, bring in the post title of that post. Okay. Let’s see what happens there when I do that. Ah, now we’re getting somewhere. So now I can go over here.
0:19:59
Let’s get rid of this static content. Hit the lightning bolt, I can search for description and I’m going to say ACF vertical description. And that’s going to bring in my description. Now let’s pause there for a second. Why did I not make this a paragraph in the beginning? Okay, because when I use a WYSIWYG fields, the what you see is what you get field, let’s inspect this and see that, oh, it brings in paragraph tags automatically for me. And if I make the container itself, this little element, a paragraph
0:20:29
tag, I would have paragraph tags nested inside of paragraph tags. Not a good situation. So leave this as a div when you’re going to use dynamic content or WYSIWYG fields or Gutenberg content, whatever. Only make it a paragraph when it really needs to be a paragraph. Alright, sounds good on that. Let’s go bring in this text link. Okay, here’s, check this out. Explore Ghosts for Creators.
0:20:52
Do we need a text field like a custom field where we can write this text custom? No, we don’t. We can kind of cheat, okay? So what I’m gonna do is I’m gonna say, what is this?
0:21:04
I use, no, explore. Okay, so explore Ghosts for, for who? For the name of the vertical, okay? So if I now hit the lightning bolt and say, post title, look at this. You can mix and match. You can mix static content with dynamic content and look what it says,
0:21:23
explore ghosts for creators. Isn’t that fantastic? Okay. So now let’s go to the image and hit the lightning bolt. What was this? The featured image that is like a custom field. That’s just in WordPress by default. So now let’s hit safe. Now let’s go to the front end and refresh and look at this. Now you might be saying, well Kevin, I mean you could have just built that
0:21:45
card from scratch manually way faster than what you just did. Well one, I’m going very slow. I’m explaining all of this to you step by step. But number two, watch the magic of custom post types and dynamic data now. So I’m gonna go to the back end. That’s not the back end. I’m gonna go to the back end And I’m gonna go back to creators and we’re gonna put in publishers right here. Okay, so I’m gonna go to Verticals I have creators
0:22:12
I’m gonna hit add new and I’m gonna say publishers and I’m gonna pop in the Description of publishers and then I’m gonna pop in accent image one, which you’re not gonna see yet, right? this is a that that the lever thing right there and then accent image two is this book up okay and I’m gonna go ahead and put a featured image in of this guy and I am going to set the featured image and I’m gonna hit publish look how easy that was and let me go to the front end and let me just
0:22:45
refresh I haven’t done anything in the builder you haven’t seen me do anything in bricks right see if this was statically done you have to go copy that card now and you would have to change the data on it and if this section existed on 30 different pages you you would have to do that on every single page but what can I do I just hit refresh and there it is it just shows up like magic and it doesn’t matter if I’m working on one page or 3,000 pages
0:23:16
where this little grid shows up. That’s the power of looping, that’s the power of dynamic data. If I ever need to edit content, I can edit it in the custom fields without ever opening the builder ever again.
0:23:30
I can fully manage that content from the back end. Now, tremendous benefit to using custom post types and custom fields and dynamic data and query loops and things like that. But now we’re gonna see where we really run into the problems, okay?
0:23:42
And I’m not gonna bother putting the third piece of content in. We have one and we have two. We’re gonna get the job done. You’re gonna understand how this works, okay? Now, I did a live stream the other day
0:23:51
where I showed a different approach to this. I’ll probably drop a link down below. I’m gonna show you an approach to this that uses less CSS and gives you more, gives you full control of the position from the back end okay all right so you’ll be able to see the difference between the
0:24:09
two if you go watch the other version and then this version but this is the version I would probably recommend for everybody so it’s the friendlier version and it’s the more beginner friendly version as well especially if somebody else is going to be coming and putting in content behind you all they need to know is what how to position with coordinates okay but they don’t need to write any css it’s all going to be done for them all right so fantastic let’s move on first thing we need to
0:24:33
do let’s go into the builder again edit with bricks and let’s add our accent images because right now we don’t have any accent images showing up for any of these cards so in my media wrapper i am going to add another image so we’re going to add another image and that image right there is going to be called. What can you can you guess it? Can you guess it accent image one? I’m going to go ahead and duplicate it make that accent image two and I need these to have classes I need them to have two classes to be really really really safe. So I need it to say verticals card double underscore accent image
0:25:08
By itself, that’s it accent image. Both of these are going to share that class, okay? Now I need a class that operates as like a unique identifier of each image. So what I’m gonna do, I’m on accent image two. So I’m gonna say accent image dash two. And then on my one, I’m gonna say accent image dash,
0:25:32
can you guess it? One, right? Okay. So now they have a shared class and they also have a unique class. So I’m going to put the shared styles on the shared class and then we’re going to use maybe the unique class to do some
0:25:45
unique styling but we’ll see okay we’ll see what we have to do here. So first let’s just talk about the well actually we’re not even going to get into positioning yet. Let’s do dynamic data let’s go accent image one lightning bolt pull in accent image one right here from the custom fields. Okay. And then accent image to lightning bolt. Now you might not have seen how I got to this real fast. I’m typing in a little search box ACC starting for accent and it’s finding it
0:26:11
for me in the list. So I don’t have to scroll through a thousand different things. So I’m going to say accent image too. And look at it pulling these, these things in. Notice that this one is still empty. Why? Because creators only had one accent image. This one had two accent image. So it’s, it’s pulling both of them in. Let’s just go
0:26:29
ahead and hit save and let’s go to the front end. Okay again making sure we’re not losing anybody. This is what we’ve got. Obviously that’s super ugly right? Big big problem here with how these accent images are positioned, their size and all of that. And now I’m thinking oh you know what besides our position we’re gonna need another custom field. Don’t we need a custom field to control the size of each accent image? I think that’s going to be quite important as well.
0:26:53
So we’ll get there in just a second. All right, let’s go with, let’s go with first the logic of what happens if one of these is empty? Do we want to try to render an image that does not exist? No, that might cause some code complications
0:27:11
on the front end. So what we wanna do is we wanna add a little touch, just a little taste, just a little sprinkle, you know what I’m saying? Not heavy, just a little sprinkle of some logic, some conditional logic. Now Bricks makes this so easy. So if you’re a beginner, don’t freak out right now. All right, calm yourself down, right? Get a hold of yourself. Get a hold of yourself.
0:27:32
I’m walking you through this. It’s not going to be a problem, okay? All right, so what I’m going to do, I’m going to click on Accent Image 1 right here, and I’m gonna go up to this little button right here that says Conditions, and I’m gonna click on it. Just stay with me, it’s fine. You are totally fine right now, okay?
0:27:48
Just deep breath, deep breath. I’m gonna hit this Add button right here, and we’re gonna say, all right, what is this condition gonna be? Now, I’m gonna tell you how this little logic section works.
0:27:57
You basically put a little logic segment together that says like, if this, then that, right? What is the then the then is always just show the element that’s the then that’s the conclusion if the if the phrase is true we are going to show the element okay so what I want to say all right what I need to do is check some dynamic data right now I’m gonna hit the
0:28:18
lightning bolt what do I want to check well I want to show it. If it doesn’t exist, I don’t want to show it, right? So I’m going to say if accent image one does not equal blank, then show it. Because remember, the conclusion is always show it, right? And then by the opposite, if it is blank, it’s not going to show it. Okay. All right. So that’s it. That’s all you have to do. See, I told you everything was going to be fine, right? Now look at this. I’m going to go to accent image two. I’m going to go to conditions and hit plus. What are we going to do again? Check some dynamic data. Okay. What dynamic
0:29:08
data do you want to check? Okay. Well, I’d like to check accent image two, and I’m going to tell you if it’s not blank, then show it please. Okay, if it’s not blank, go check it. If it’s not blank, I want you to show it. Okay, so if it’s not blank, we’re going to show it. So we’re going to hit save. Now let’s go. We’ve just added a bunch of conditional logic. I refresh the front end. We still have images. What we don’t have here, okay, in the code, you see an image right there. There’s no second image trying to be rendered that ends up with like a broken tag or anything like that. Why? Because we told it to not do that.
0:29:43
Okay, but over here you can still clearly see because there are two images it renders both of them. Fantastic. Okay, now what we want to do is we want to start positioning them. All right, so I’m going to close that out and then we’re going to go to the Yeah, let’s just go to one of the images. Both accent images.
0:30:04
Both of them are going to be positioned absolutely. If you don’t know what absolute positioning is, I have a whole video on it in Page Building 101. I’ll link to it down below, hopefully, if I remember. But just go to Page Building 101, absolute images, absolute positioning, whatever,
0:30:18
and you’ll learn, okay? But what I want to do is, because all of them need to be positioned absolute, I’m gonna do that on the class that they all share. All right, so I’m gonna go to style, I’m gonna go to layout,
0:30:29
and I’m gonna go to position absolute. See that? Now they all share it. Now here’s the problem. One is we need to contain those images, all right? So the way that I contain those images
0:30:40
is I go to my media wrapper. It’s actually not even the vertical card. I wanna go to the media wrapper, and I wanna set that to position relative. This way, the positioning of those images, those accent images, is relative to my media wrapper, which wraps my media. So it’s gonna make it look like
0:30:59
these are attached to my media at all times. And when I put in coordinates, those coordinates are going to be relative to the media, right? Really the media wrapper, but you can’t see the wrapper, it’s just on the media. Okay, so now they’re going to be attached there, right? So that’s fantastic. You see that they’re far too big, okay?
0:31:19
So what I’m gonna do is I’m going to create a variable called, so now I could come in and say, all right, these are gonna be 150 pixels wide, not on the media wrapper. I need to go to the accent images. So the accent image and just say, let’s say 150 pixels.
0:31:34
And if I do that, all accent images are 150 pixels, but I don’t want them all to be 150 pixels, right? I want them to have a custom size. So when I need something to have a custom size and a custom position, I am going to use a token, a variable, okay? And so what we’re going to do is we’re going to call this accent image size. But think about this for a second. Are they all going to be the same size or does accent image one have a size and accent image two has a size that might be different that right that’s the thing okay so i’m not going to do this on the shared class i’m
0:32:10
going to go to accent image one and my width is going to be accent image one size now you might be thinking to yourself kevin that doesn’t even have a value right what are you doing here that there’s no you just put a token in but it has no value. Well, remember I can put in with variables. I know it’s getting a little advanced but I’m just trying to keep everybody with us. You can put a fallback value in by doing a comma and then a value and if I did 150 pixels here, oh look at that, accent image 1 will always be 150 pixels
0:32:43
wide by default. But the token will allow me to set a custom value anytime I want, which I will show you exactly how to do. So I’m just gonna copy this. I’m gonna go to accent image two, select accent image two class, and I’m gonna pop in accent image two size.
0:33:01
And then that gets a default value right there, okay? So I’m gonna hit save. Now, I know this was about positioning, but it’s also about size, okay? And these are gonna be done exactly the same way. So it doesn’t really matter which one we start with.
0:33:16
I want to start with size. That might even be easier for you guys to understand because position requires four different coordinates where size just is one single value. Maybe size is the easier, better one to start with. So let’s do that.
0:33:29
Now, if you remember, I never added a accent image size. So I need to add some custom fields, obviously. We need to account for this. So I’m going to go to field groups. I’m going to go to verticals. I say I’m walking you through. This is how it happens in real life. Like you might not have every little detail figured out at
0:33:46
the very beginning. Where I knew I need a position but I forgot I needed size and that’s okay. You can come back and add it at any time. So accent image one and I’m going to say accent image one size. And this is just going to be a text field. Accent image one size. And I’m going to go to presentation and I’m going to see what happens if I put this at 50%. I think it’s just going to put it under or maybe it’s going to put it next to you. I don’t know. We’re going to see what happens. We’re going to do this together. Okay. I’m
0:34:14
going to hit save changes. Awesome. The other thing I can do is make some fields required. We’ll talk about doing that in a minute. But let’s just stick with one thing at a time. And let’s go to, now that we’ve added that let’s go to verticals and let’s go to creators and see where it put our look At that so I have an image I have position and size all like kind of like grouped together. Isn’t that cool? All right. So accent image size. Let’s do 250 pixels right here. So i’m going to hit update And then on the other vertical
0:34:42
I’m going to say creators because we need to see if we can have unique values for these things, right? No, that was creators. I need to do publishers. Okay, so accent image one size, let’s do 150 pixels or 170 pixels. Just something that we know is custom.
0:35:01
So I’ll go ahead and hit save there. Fantastic. So one has one size, the other has another size. Now let’s talk about how to get those sizes to show up. Because if I go to the front end and I refresh, they’re not gonna have the size.
0:35:13
They are not gonna have that custom size. Like let’s inspect this. It’s the default size. Okay, so it is accent. You guys can see this. Let me put this over here. Let me bring this up here. Accent image one size is blank and it’s using the fallback value of 150 pixels. So what I need to do is I need to define the value of accent size in a way where it puts it only on that card right there. How do we do that?
0:35:42
We’re going to do that with inline CSS styles. Inline CSS styles. You know what inline CSS is? It’s like this. If I open this card, I know you got to stick with me. You got to, you got to know how to do these things.
0:35:55
You got to know how to do these things. If I went to div right here and I said style equals and then I started writing styles like for example, accent image one size and then I put a colon and I put the value that I want like 250 pixels. Look at that just change at 250 pixels.
0:36:19
Why did that change to 250 pixels? Well, let’s inspect it because now accent image one size has a value of 250 pixels. Where is it getting that value from? It’s getting the value from its parent, the entire card where I put style equals. And then I said, accent image, one size needs to be 250 pixels.
0:36:40
The question is. How do we get the page builder? How do we get bricks to do exactly what you see right here? That’s actually very easy. So what we’re going to do, I’m going to select the card and I’m going to go to attributes. What you just saw, that inline style tag is an attribute in HTML.
0:37:01
And so I’m going to say add attributes and I’m going to say style. I want to add a style tag, okay? And the style tag is going to be the name of my token with a value. And then I’m gonna hit save. And I wanna say image, and because I’m doing this on the card level, I just need to put all the tokens that I wanna define in this one little style tag.
0:37:24
We’re just starting with image, accent image, one size. And what is the value of that gonna be? Can I write 250? No, remember, we’re getting that value from where? We’re getting that value from a custom field. So I now hit the little lightning bolt.
0:37:41
Look how important and valuable dynamic data is. And I search for accent image one. Oh, look, size is not here. Why? Why is it not here? Because we added it, but we never refreshed the builder. So the builder doesn’t know it’s there. So let me copy this to my clipboard. Let’s just go ahead and hit save.
0:38:03
Let’s just refresh the builder, get a new instance. Yeah, I like running into these things because you gotta know what’s going on when you run into them, right? So now I’m gonna select my card again. I’m gonna go to attributes, style.
0:38:15
I’m gonna put in my accent image one size, hit the lightning bolt again, and now search, and now it’s there because the builder now has access to that part of the database. I’m gonna say accent image one size.
0:38:26
And just like when you’re writing CSS put a little semicolon at the end And now hit save. Okay now both every card that’s in this loop now has access to that. So i’m going to refresh And look at that the the yellow we’re looking at the yellow image back there Look at it. It has an accent image one size of 170 pixels right from the custom field And what about this one right here? this has a size of 250 pixels right from the custom field
0:38:54
now to prove this let me go back here and we are on publishers right I’m just going to take that from 170 to 350 and we’re going to hit update and I’m going to just go to the front end and we’ll refresh and look how big that yellow image is now I have control of that image size not position yet, but size from the back end, from custom fields in the back end. Isn’t that fantastic? This is in a query loop. I am, I have now for the first time, I’ve just done the promise at the beginning of this video, I will show you
0:39:27
how to manually alter instances of things inside of a query loop even though everything is generated dynamically. To show you, you still have one-off Individual granular control of things that is really really really powerful So now think in your head. How are we going to solve for the position? Well, we’re going to use the exact same tactics now first thing I have to do is I have to add a Accent image one size. I want to also add
0:39:56
I’m going to paste add accent image to size. Okay, now the only problem here is it gives you this little tiny little field to work in and it’s very easy to make mistakes. Accent image two, accent image two size, okay. That should be good.
0:40:14
So now I’m able to control both accent images. Let’s go check that real quick. So there you go. So I need to put a size in for this second image right here. So we’re gonna go to the vertical. I am going to Well, we didn’t even do a custom field for it yet
0:40:29
Okay, see we’re stopping every part of the way to do a little bit at a time So I need to go back to custom fields. Let’s go to ACF field groups. Okay, and open verticals Accent image one has position and size accent image to size save Okay, and now I can go back to verticals. I can go to publishers now. It has a size field oh I didn’t do the
0:41:04
50% positioning okay, so ACF field groups Go to verticals go to to go to two size, presentation, 50% width, save changes. Now everything should look good. So let’s go to all verticals. Let’s go to publishers. And now I can put in, this is going to be 150 and then this one is going to be 150 as well. Let’s go ahead and hit save. Let’s go to our front end. Okay, bang bang. And now all is well in the world. Okay, so I’ve got Size and position for both things. Alright, so now let’s do our position. We are going in
0:41:48
I’ve already got the yellow is positioned and the Don’t look up is positioned as well, but there’s no positioning instructions in the actual HTML all I need to do is take accent image one size with the value and accent image to size with the value and Repeat that for the position So I’m going to say accent image one Position and then I’m going to hit the lightning bolt and I’m going to choose accent image one position
0:42:16
And then I’m going to put a semi colon at the end and I told you the hard part about this is you’re working in This little little little field right? I’m going to say accent image 2 position and I’m going to and I’m going to show you where all this is being output in just a second okay. Accent image 2 position and I don’t have 2 size yet so I’m going to save this and refresh the builder but it’s still all fine and dandy. Let’s go to the front end and look at the code for just a second. So we’re going to inspect and here’s our card right here and look at what we have.
0:42:52
We have accent image one size 250, accent image two size has nothing. Accent image one position has no value. Accent image two position has no value. Okay, and then publishers would have all different values and all good, okay, all good.
0:43:09
Now, what we need to do is we need to actually add the instructions for the position. We haven’t done that yet okay. So what I’m going to do is go to edit with bricks and I know we’re kind of jumping around a lot here but that’s okay once we get deep in the weeds that’s kind of what starts to happen a little bit. All right we’re essentially just I’m going to show you how to add the instructions for the
0:43:32
position and then you guys are we’re good to go we’re good to go. All right so we go to accent image one, right? This is the thing that we need to position. So we’re going to go down to style. We’re going to go to CSS and we’re going to position this absolute. Okay.
0:43:50
And we already did that. Okay. We did that on the main class, but we didn’t give it an inset value yet. We didn’t give it the coordinates. So I’m going to do inset and let’s just do like 50%, 50%. Look at where those images jump to okay so you can see I have control
0:44:06
over accent image one using this inset value right here but you also know we don’t just want a static random value in there we want the value of what well the custom field value for accent image one position so what I’m going to do is I’m going to take this out and I’m going to grab that. I’m going to go to accent image two, accent image two class, paste it. But this doesn’t need accent image one’s position. It needs accent image two’s position. And I’m going to go ahead
0:44:41
and hit save. And then we’re going to go to the front end and we’re going to see, look at this. So I now have two differently, well I have unique positioning in all of my images. What I want to do here is actually make this verticals grid I want to make the gap a little bit bigger. Let’s do times two okay save refresh on the front end look at that now my offsets still have plenty of room and space around them this is looking really good. Let’s look at this right here what is the position of this accent image one position not defined so I’m seeing a little bit of an issue here
0:45:15
with accent image one position. So I know that accent image one position is working because this one has a value. So what that tells me is there’s probably a missing value in my actual custom field. So I’m gonna go to creators and we’re gonna see,
0:45:31
ah, yes, look, it does give a position, but it’s blank. It only has the placeholder in it. So I’m going to say let’s do 25% from the top from the right is going to be auto from the bottom is going to be auto Minus 25 pixels on the left-hand side. Okay, so I’m going to go ahead and hit update there and now let’s go to the front end Refresh and look accent image one position is now set So I have full control over the position from all of these.
0:46:02
And remember, I have a shared class. Let me go look at accent image, shared class. I want to add a box shadow to all of these. That’s why I have a shared class. Some of these images share styles together, right? So I can do border, I can do box shadow,
0:46:16
I can fill these out, or automatic CSS users can just say box shadow and just say box shadow M, for example. And now they’re all gonna have a nice medium little box shadow that I can fully customize if I want to so now it has a nice soft little box shadow around it I have full control over position full control over size let
0:46:37
me show you the sizing again let me go in and size this down so under creators I want that to be a hundred and seventy pixels we’re gonna go ahead and need update I’m gonna go the front end refresh and look it’s a hundred and seventy pixels now it got smaller I want to take this book and I want to actually position it right here. Okay so I’m gonna go back in to publishers, find that book and I’m gonna say okay auto from the top that’s
0:47:02
actually yeah that’s fine. From the right I actually want this to be 15%. From the bottom I want this to be like my minus 25 pixel offset and from the left I want it to be auto. Let’s go ahead and hit update here. Let’s go ahead and go to the front end and refresh. And look at how I’m able to manipulate that. Now what happened with the size of this?
0:47:24
Let’s figure it out. Let’s go to publishers. Oh yeah, remember I put that ridiculous value in here? So let’s do 150 pixels there and hit update. And let’s go ahead and refresh. Okay, so I’ve got that where it needs to be.
0:47:37
I’ve got the book in a new position now. I’m just showing you, I have full control over how all this is gonna go. Now, just to close this out, we’re pretty much done, but let me close this out by adding the last one in. All right, so let’s go to Ghost, let’s add in businesses.
0:47:53
We need Buffer as the accent image, we need this girl, and we need businesses and yada, yada, yada, okay? So now look how easy this is. Let’s go ahead and kill the builder, kill the front end, kill this, and we’re just doing work in the back end now. So add vertical is called businesses. I’m going to put in the description. The accent image is going to be buffer. We’re going to select that. It already has a
0:48:18
default position, but I’m going to look over here and see, okay it needs to be on the right three quarters of the way down with the offset off to the right. Okay so we’re gonna do from the top we’re gonna do zero or I’m sorry auto from the right we’re gonna do the minus 25 pixel offset from the bottom we’re gonna do like 20% and from the left we’re gonna do auto and then the size of that image I can even like inspect the size let’s inspect it right here and see that that size is 192 so I can put a hundred and ninety two pixels in, I can hit featured image, throw in her
0:48:54
photo, alright, and my grid is my card and my grids are going to be restructured and rebuilt for me when I hit publish right here. And now we’re going to go to the front end and we’re going to see if that card was properly added. Look at that. She’s in there, we got the buffer in there, okay, we need to take a better photo that that buffer is not the same dimensions
0:49:16
as the other one but you get the point right so it built the card for me it added the accent image and it’s custom position and it’s custom size it’s got the featured image in there and remember it doesn’t matter if I have one grid of these cards or 1 million grids of these cards that just updated everywhere instantly and if I want to make any one-off changes, I can make those one-off changes,
0:49:40
if I want to, and they’ll appear everywhere. If I want to make any global changes, I can make global changes, they’ll appear everywhere. This is scalability, maintainability of the highest order. And this is the example of how you don’t have to abandon dynamic data and query loops and custom post types,
0:49:59
simply because some of the things in the loop need to be styled manually. You still have the level of control. You just need a little bit of an increase in your skill when it comes to CSS and dynamic data and things like that. Bookmark this video, come back to it if you need to come back to it. If you have any questions about anything that I covered in this video, definitely drop them
0:50:24
down below in the comments. I’m happy to help you out. Other than that, I will see you I’m happy to help you out. Other than that, I will see you again very very soon with another tutorial. Cheers!
