LJSK 03 – CTA Section Indigo

0:00:00
What’s up my JavaScript friends? Okay, the layout that you are looking at on the screen right now is what we are going to build for this tutorial. Now, you might look at that layout, you might think to yourself,

0:00:11
Kevin, I don’t see any reason for JavaScript in that tutorial. And I was thinking the exact same thing. When I tried to build this for frames, I thought, hey, I’m just gonna whip this up, hit publish, move on with my life.

0:00:22
You get five minutes into this thing, you realize you’re in a bit of a situation. And then you try some CSS tricks, anything like reach deep into your tool bag,

0:00:31
whatever you can come up with,

0:00:32
and you start to realize, like I might need JavaScript for this. And that’s exactly why we’re doing this course, because when you do need JavaScript for something like this, I want you to be empowered, and I myself want to be empowered

0:00:45
to just be able to do it, right? And understand it and just be confident in it So it’s a perfect fit for this series of learn JavaScript with Kevin So let’s go ahead and dive right in this is going to be a to a twofer as we say in the United States Right. I do even say that anymore I don’t even know but part of it is how do you actually build this layout which is a little bit complicated in itself and

0:01:10
Then the second part is the actual JavaScript to make it all work and come together. Okay, so what I’m gonna do first is just get a section on the page, let’s just add a section, that’s nice and easy. I get this little container thing. I wanna group my content, so we’re gonna group all of these photos into what we’re gonna call a media grid,

0:01:29
and then we’re gonna group this content right here. The grouping allows these two groups to sit next to each other, which is not possible if you don’t group the stuff, okay? So we’re just gonna go block, block. That’s our two groups right there.

0:01:41
Make sense? We’re gonna call this one media grid. We’re gonna call this one content wrapper. Content wrapper. Okay, great. We’re just gonna call this whole thing an inner.

0:01:52
We’re gonna call this a social proof, right? So it’s a social proof section. Great, fantastic. Let’s move on. Low-hanging fruit first. What’s the low-hanging fruit of this layout?

0:02:02
It’s getting this content onto the page. Heading, paragraph, paragraph, link. Okay, let’s do it. So in the content wrapper, we want a heading. We want text, text. We want a link.

0:02:14
All right, there we go. Now I need to make sure that those are actually paragraphs. So I’ll go ahead and change their tags. Accidentally added two links. Let’s make sure that this is actually a link. Fantastic.

0:02:24
Make sure that this is a heading too. I want to say that this is our accent heading. I want to add a class called accent heading, which I already have, and it’s going to move that to the top. Why? Because that has order minus one on it. Fantastic. Let’s put in some lorem ipsum here.

0:02:40
We can use automatic CSS for that, can’t we? Can’t we? Ipsum short. There you go. Ipsum short gives us some ipsum text. What else do we want to do? I think that’s it for that side. Now let’s talk about the media grid. I would highly highly highly recommend that you do not

0:02:57
try to manually put all these images in here. Be more efficient than that. Let’s just put the photos in a folder in the media library because I’m using happy files which gives you a nice folder system. Not only does it give you a nice folder system, it allows you to query directly out of that folder system. Now, let’s say you wanted these to be headshots from testimonials on the website,

0:03:20
which would be another great use case. If you have a testimonials custom post type, as you should, and post for each of the reviews and they’re using featured images, you could easily query loop them this way. But I’m gonna show you how to query loop them

0:03:35
out of a happy files folder. So what I’m gonna do is I am going to first add a div. The thing, well, let me just back up. I’ll just show you why we’re adding a div. I mean, other than the rule, wow, other than the rule of always wrap your images,

0:03:50
if you’re gonna loop things, you have to. Look, I don’t have any loop control, but the minute I say right-click, wrap, with a div, or a block, doesn’t matter, you can now see that I can query loop it. So you have to have a wrapper if you’re gonna loop things.

0:04:05
Now I’m gonna say, yes, I wanna use a query loop. I’m gonna come down here to post type, I’m gonna choose media. And then I’m gonna say post per page, I want a lot of them, okay? Let’s just put like 35.

0:04:17
And then I essentially want almost all of them that are in there. Now, which folder are we querying from? That’s where we come down to terms include and because we’re using Bricks and because we’re using happy files guess what there’s my folder sitting right there it just knows. Alright so I’m gonna do that now I need

0:04:36
to say that this div is called a media wrapper. I don’t want to just say div it’s gonna be called media wrapper and then I’m gonna open this up and I’m gonna call this image media. I’m also gonna give it a figure tag and then in order for the media to show up I have to get dynamic data going. Now in WordPress, remember everything is a post, so don’t look for like media ID or image ID

0:04:58
or anything like that, it’s literally just the post ID. Okay, so you grab post ID and there we are. And now I’m gonna say, I just want the thumbnail size of these. Fantastic, great. And then what I wanna do is just check,

0:05:11
okay, I wanna get my structure panel going here. So this is the accent heading. This is the lead. Okay, and I think we’re good. All of our HTML elements are on the page. What we want to do now is we want to get classes added

0:05:27
to everything so that I can start styling things. Remember, we gotta use BIM. When in doubt, BIM it out, okay? So, because I’m an automatic CSS user, I’m gonna hit BIM. Every other person, if you’re living in Chumpville, you don’t have Auto BIM.

0:05:43
You’re gonna have to one by one add the BIM class to every single element here. I’m just gonna go ahead and say Apply Classes, and it’s gonna do it all for me with automatic CSS. Okay, so now I’m gonna take my media grid. Now let’s do that next.

0:05:58
Let’s do that next. It’s a little bit complicated, okay? Let’s click on the inner, and let’s just get our groups side by side. How about that? So the way we’re gonna do that is by display grid,

0:06:07
grid template columns, we’ll do two, okay? And then gap will just be a grid gap. Now, yes, I’m flying through this part a little bit and I’m just using automatic CSS and clicking around and things, okay? Because this is a JavaScript tutorial.

0:06:19
Our goal is to get to the JavaScript. It’s not to teach you how to do CSS Grid and all the other stuff, okay? Watch my other videos. This is a JavaScript tutorial. So we’re just going to try to get to the actual JavaScript. Okay.

0:06:31
So I’ve got two groups side by side, but this does not look like a grid, does it? So I’m going to click on media grid. Now here’s the thing. The reason this is so tough is because one, it has to be perfectly symmetrical, which means it has to have the same, like the rows and columns have to be full at all times without cutting anything off. Okay. And, and the number of columns is not knowable.

0:06:53
So right now there’s one, two, three, four, five, six, seven columns. But as the screen shrinks, we’re gonna lose columns. And so we can’t just define a grid, like we can’t just say we need a seven column grid. We don’t know how many columns we need.

0:07:07
So the way that we handle this in GridWorld is we go to grid and we say repeat. And we use something called auto fit. Okay, auto fit min max. And then it’s going to ask you, it’s a min max function. So what it’s going to ask you for just try to follow with me, I know this is the tough part, it’s going to ask you for a minimum. And it’s going to ask you for a maximum, okay, like min max function says, what’s the min? What’s the max? Okay,

0:07:35
you get it, right? It’s not too hard. It’s not too hard. So the minimum is gonna be our minimum media size. All right, this is a square, so it’s height, width, whatever, it’s just size. Really, it’s the width in this case. So we’re gonna put a magic number in.

0:07:52
I’m gonna put a magic number in of 75 pixels, okay? Then what I’m gonna do is I’m gonna say repeat auto fit min max, okay, so 75 pixels, the maximum is gonna be one FR, one fractional unit, which is essentially the rest of the space. Just take up the rest of the space.

0:08:09
So one FR. And look at that right there, my friends, I get an absolutely fantastic looking grid. Now, couple things that we have to do here. This 75 pixels, which we’re gonna call the media size, I’m also gonna put in grid auto rows.

0:08:26
I’m essentially gonna say that the rows of this grid should also be that size, 75 pixels. Now I just repeated myself, didn’t I friends? Remember the dry principle, don’t repeat yourself. I just repeated myself. There’s a 75 here and a 75 here.

0:08:43
So before I move any further, what I should probably do is tokenize that. So I’m gonna replace this 75 pixels with something called var image size. And then I’m going to come down here and say var image size. So now I have a token that’s repeated, which is okay,

0:09:00
because I have a single source of truth for that token wherever I define the value. Where am I going to define the value? Well, you could do it on the section up here. You could also do it on the grid itself. I’m going to choose to do it on the grid itself. So I’ll come down to custom CSS,

0:09:15
and I am going to say that this is media size 75 pixels. Okay, media, did we do something wrong? Media size 75 pixels is on the grid. Let’s go to content, auto fit, min max. Oh yes, I did image size. I wanna do media size.

0:09:34
We’re calling everything media. Let’s stay nice and consistent. Now I don’t know if you can tell, but the images are kind of overflowing their container a little bit. What I want to do is I want to go to media

0:09:48
and I want to say that the media is 100% width and 100% height of its wrapper, okay? So notice that that one got a little bit smaller now because it’s not overflowing anymore. The other thing I want to do is you think about the flow of this content. It’s really going from the right edge that way off the edge of

0:10:06
the screen. Okay, you may not see anything happen, but when I do this, but I want to justify content to the end. And I want to align, let me justify. Yeah, I want to justify content to the center. And look what this is going to do to that image up there, you can see that little one moving. Remember, the rest of them are just part of the loop, okay? But the first one is, you see something happening, where it is being put in the center of the box. Because as the box gets bigger,

0:10:36
because we’re manipulating the aspect ratio, because we have a thumbnail, right, which is a one by one, in fact we can go to media wrapper and put, we can go to media wrapper, and we can actually force it aspect ratio of one, okay?

0:10:51
The media actually, if the box is wide, can only be so tall, right? We can’t let it fill the width and the height because if we do that, it’s not gonna be a square anymore, which here’s why we need to be a square because we need to go to border,

0:11:06
we need to go to border radius, and we need to do something like 50 VW. And when we do 50 VW, it is going to make our circle. I’m gonna save and I’m gonna refresh the canvas. And actually refreshing the canvas does absolutely nothing, apparently.

0:11:19
Let’s just refresh the builder. Now when it regenerates the loop, we’re actually getting circular images, okay? And they’re actually positioned properly in their box. And so this is very important actually to making sure nothing actually gets cut off in a minute.

0:11:35
You’re gonna see what I mean by cut off. Okay? All right. The next thing I’m going to do is if we look at this on the front end, let’s go to the front end and review what we have. So two major problems. One is this content right here needs to be vertically aligned. Problem number two is, isn’t this grid supposed to stretch over here to the edge of the page? And if we look at the source, yes, those two things are supposed to happen. Okay? Okay, so this one is an easy fix.

0:12:01
Grab your content wrapper and just align main axis to the center and you’re gonna get that vertical centering. This part is not so easy. Well, it is if you have automatic CSS. If you don’t have automatic CSS, you’re going to have to, and this is why that flow of justify content end

0:12:21
is so important, you’re gonna have to do a technique to break this stuff out to the left hand side. I’m not going to go into all of that because there’s no reason to because it’s an inferior technique to what I’m about to do. In automatic CSS, all I do is bring content grid. Again, reach into the toolbox, grab your content grid, and now is the time to use it.

0:12:42
So we go content grid, put it on there, and then what I can do is take this inner and that that inner starts at full width and goes until the edge of content. So I’ve maintained my right side column width while allowing the left side to go all the way to the edge of the screen and just like that,

0:13:02
like magic, I get exactly what I want. Super, super, super, super, super easy. Look at that, okay? Now what I wanna do, I’m noticing I don’t have enough images in this regard. So I am probably going to just make the images bigger

0:13:17
because I don’t really feel like making y’all wait while I go find more images. But just to give you a heads up on the actual technique, the technique is that we need to overfill this container. We need more images than we actually need to make sure that this doesn’t happen right here.

0:13:33
See how this is obviously not good. Like we’re missing a big chunk of content right here. So what we need is more images loaded than what we actually need, and then we’re gonna cut off the overflow. We’re gonna hide the overflow, okay?

0:13:47
So what I wanna do is I wanna come in here to my grid, my media grid, and just change my media size from 75 to 85. Notice how everything updates because it’s nice and tokenized. It’s an unbreakable situation.

0:14:00
So then I’m gonna refresh, and essentially we’re getting now more to where we want to be. What I want to do now to just take away some of the extra space and help this grid fill itself out is I’m going to change the gap on this grid. We’re going to use grid gap but we’re going to say times 1.5. So if I have a bigger gap it takes up more room which means less images can load and when I refresh on the page,

0:14:28
now I get an extra row. That’s what I’m looking for. You want an extra, let me, my foot, my leg, my whole leg is falling asleep. It’s a whole situation. I got a situation right here.

0:14:38
I got a situation down here, okay? My whole leg’s falling asleep. I gotta pivot. I want an extra row. When you have the extra row, then you’re ready to rock and roll.

0:14:48
You know you’ve got what you need, okay? Because what we need to do is now hide the row. Now, you can hide the row with max height. You say max height and you pick a random number, right? You can just magic number this to death. So I come into MediaGrid and I say max height of 450 pixels, okay?

0:15:06
And then I go hide the overflow. So go to overflow and say hidden. And look what happens. I hide the overflow and my gosh, that looks terrible, right? Why does it look terrible? Because it’s slicing through the images.

0:15:20
And it doesn’t matter what magic number you, there will be no magic number that makes this work because watch what happens. At different screen sizes, you lose columns, okay? And so the effective height needs to change, things need to happen mathematically. And in order for that to happen there’s things that you just don’t know. You don’t know what the column number is going to be on

0:15:42
any on any given screen size. You may not even know what the image height is going to be because remember the grid is actually choosing the size of the images based on the size of the device as well because we used a min-max function for the size of the image. All we did is say it can’t go under 85 but we never said it can’t be bigger okay. So there are times where the image could get rendered a bit bigger,

0:16:06
and then that’s gonna change the math. And so these are unknowable situations, and when you have an unknowable situation, that tends to, you know, allude to, you’re probably gonna need JavaScript for this. And it turns out, just to give you a little heads up,

0:16:19
okay, if you haven’t caught on yet, this requires a bit of JavaScript to solve. Okay, so we realize now that, yes, max height is the way to go, but the value of the max height is what is an unknowable number. And so we’re going to calculate the unknowable number using JavaScript.

0:16:38
Okay, so let me get rid of that. And now what we’re going to do is to our inner right here, we are going to add a code block. All right. And now my friends, ladies and gentlemen, the show that you came for, we are gonna start writing our JavaScript. I’m gonna say execute code, render without wrapper.

0:16:56
The first thing I need are script tags, right? You gotta put your JavaScript in a script tag, but not just any script tag. One thing that I’ve learned over my short career in JavaScript is that it is possible if you just put stuff in raw script tags like this,

0:17:13
you raw dog it, okay, as we say, the variable names that you come up with could potentially collide with other variable names used in third-party applications or in other code blocks on the website or what have you. And so it’s a good idea to define a new scoping context,

0:17:31
essentially to modularize this code block so that what variables and stuff you use in it are not impacting anything outside of it. Okay, and you can use what’s called an iffy function to do that, an IIFE function. There’s actually two things that we have to account for here. One is the IIFE or the isolation of this code block. The second thing is we have to wait until the DOM is fully loaded before we can interact with the DOM. So we would need a DOM content ready function to make sure that the DOM is

0:18:10
actually ready. But I’m about to show you something where it turns out you actually don’t need either of those things. Okay you’re gonna do something called script type equals module. And guess what I just did? I just essentially scoped everything to this code block and automatically deferred it and automatically waited for the DOM to load, all just doing that.

0:18:34
Now, if you can’t remember to do this, we just added a nice little recipe in Automatic CSS called at script, hit semicolon, it gives it to you right there, okay? And you just start every code block, you just say at script and that’s your starting point right there.

0:18:50
Okay, perfect, great, fantastic. Now, let’s talk about what we need to do here. I’m gonna do as much of this as possible from my, I’ve got my notes over here, but again, your goal is to not look at the notes unless you have to, right?

0:19:04
Don’t look at the keys when you’re typing, when you’re trying to learn how to type on a keyboard. Don’t look at the notes until you have to look. And if you have to look, it’s okay, it’s fine. But you know, try to work it a little bit without looking at the notes. So the first thing in my mind is we have to get our variables

0:19:20
for the things that we need to work with, that we need to identify. Like I have to select the objects that I want to work with, right? One of those objects is the media grid. So what I’m going to do is a const, I’m going to define a constant variable, called media grid, media grid. I’m going to use the camel case, okay?

0:19:38
I’m going to do equals. Now, I’m going to do document.querySelector. So this is the JavaScript function to select an element. And right here, actually, we run into a roadblock. And I ran into this roadblock when I was working on this original frame,

0:19:53
where I was like, how? Sorry, I’m still sick. How are we going to identify this thing? We can’t identify it by ID because I think Brics generates the IDs dynamically when somebody imports this thing.

0:20:07
We can’t use the class name to identify it because if people change the class names, if they change the class name, our code is going to break. What is something we can use to identify this thing that they’re not going to mess with,

0:20:19
that the user is not going to mess with? They may not even realize it’s there. A data attribute. A data attribute is what I came up with. So what we actually have to do is jump over to our media grid, go to style, go to attributes,

0:20:34
add attribute, and say data media grid, and then hit save. And what that’s gonna do, my friends, let’s go back to the front end and just take a look at this. Let’s inspect, and let’s look right here. Data, oh, I’m sorry, I was thinking about how to write the thing for targeting in CSS.

0:20:53
You don’t need the brackets, you do this without brackets. Let me go refresh on the front end and we have data media grid, look at that. That is like a label you can target with CSS and JavaScript and everything else. It’s absolutely fantastic and nobody’s gonna touch it,

0:21:08
it doesn’t even need a value, it’s just gonna kinda sit there as like a unique little label for our data media grid. It does have to have the word data in front of it. Alright, so what we’re going to do is we’re going to go back to our JavaScript and we are going to say, OK, good. So we’re going to use our little single quotes, OK?

0:21:26
And now we use the brackets because that’s how you target a data attribute or any attribute with CSS or JavaScript. And so you say data media grid and you’re going to hit save. Now, how do we know that we just actually correctly targeted? Us and the JavaScript are on the same page. We’re going to talk about something we haven’t talked about yet. By the way, I also want to add a little internal documentation.

0:21:54
So two forward slashes gets me a comment, and I’m going to say target media grid. Perfect. Now, what I’m going to do is come down and I’m going to use what’s called an error logging essentially right so if it doesn’t find we’re telling it to find something called a data media grid and if for some reason it can’t find it we want it to return an error so what we’re

0:22:18
going to do is an if statement and then we’re going to say exclamation mark which basically is like no okay so if there’s no media grid like this, okay, we’re gonna do a console.error. And our console.error message is gonna say, no media grid found, something like that. Now I’m gonna sign the code, I’m gonna save.

0:22:40
And now what I’m gonna do is show you what the console is, and we’re gonna use the console a lot, okay? We’re gonna go to the console, and you can ignore this, because this is all dashboard related stuff. It’s looking like it needs the automatic CSS license check. I generated this new install, but didn’t activate the license, so you’re going to see some nonsense

0:23:00
in here. Ignore that. It has nothing to do with our grid. Notice that we’re getting no errors. We’re getting some flags for things. We’re not getting any errors.

0:23:08
So it has, theoretically, found our media grid. Because if it didn’t, it would give… In fact, let’s test that why don’t we just test that so I can test that by getting rid of that attribute so data media grid let’s just delete okay let’s save let’s go back to the front end and look at this no media grid found you guys see that look at this look at how

0:23:31
do I how do I draw look at that right there that is a console error and I and I told it that I want that error if you can’t find my grid, okay? And that’s what it’s giving me. This is great. This is how you use the console to check your JavaScript as you work, right? Okay. So let’s go in and where did we get lost? I thought I’m at the code block. Okay. We’re at the code block. Oh, no, no. I don’t want to be at the code block.

0:23:55
I want to get our attribute back. All right. So data, media, grid, like that. Save. Oh, oh dear oh I had ad split okay save and let’s go and you could actually I mean could we split this maybe we could split this maybe we get would that confuse you guys what’s happening over here versus over here we’ll just do this for right now okay all right I think that might help that might actually be helpful let’s go to code and let’s go back to here great

0:24:22
fantastic now let’s target the next thing. And I hate, hate, hate how small this box is. I wish we could make this box bigger. All right, we’re gonna do a new internal note, right? I wanna target the images, target image in media grid, okay? So I have to do another const.

0:24:41
And I’m gonna use the same concept, media image equals document.querySelector. And then see the problem with not having this window big enough. Can I make the sidebar bigger? Okay, that helps a little bit right there. All right, so cons media image document. Oh, and I’m okay I’m covering up. This is gonna be another problem. I am covering up. Where’s my ecam live window?

0:25:06
Mmm Let’s move me. Let’s make me a little smaller smaller just for this tutorial, okay? All right, we’ll just get me completely out of the way here. All right, media image document.querySelector, guess what?

0:25:23
We can go data, media, grid, and then image, space image. It’s just like you’re writing CSS. Like if you were gonna target the image by calling on the media grid first, you’re doing the same thing that you would do in CSS but with JavaScript and a query selector.

0:25:39
Okay, now I’m gonna grab that if right here, okay? And if media image IMG, right? Is that what I called it? Yeah, media IMG, no media images found. No media images found, okay? Save, refresh, I get no errors.

0:26:00
No errors over here, okay? So we’re still good to go. So I’ve now found my media grid and I found my media image. The next thing I want to do is get the height of my media image. Let’s get the height of my media image. So const media image height equals,

0:26:19
and I believe there’s a JavaScript function we can use for this. So we are going to get, let’s see. Yes, it’s called offset height. Offset height. So we already identified the media image so that we can work with it.

0:26:37
So we’re going to go media image dot offset height. That’s all you have to do. So the JavaScript is already, that’s like an internal function thing that’s just going to grab the height of the media image and it’s going to assign it to something called media image height. That’s really good.

0:26:54
Now I’m going to come back up here to the target media grid because we need to do something else with the media grid. We have to get, because what we have to do, let me explain the concept to you that we’re going for. If we know the height of the image, then we know four image heights is equal to four rows. Like every row is the height of an actual image.

0:27:13
Okay. So if we want four rows, we need the image height times four. So that gives us part of the equation, but what else needs to be accounted for? Aren’t there gaps, row gaps, between the rows? We need to know the height of the row gaps so that we can say, okay, if we want to grid this four rows, we need image height times four, and then we need grid gap times three. And those two numbers combined gives us the actual,

0:27:39
the exact height that we need, and that’s what we’re gonna put in the max height field. Okay, so what we need here is const media grid styles equals, and again, there’s an internal JavaScript function that we can do to get all of the computed styles of this element, like the height, the width,

0:27:58
the padding, the margin, the gap, okay, the gap, right? All right, good, my wife’s calling me. That’s, you know, it’s nothing like doing JavaScript tutorials and web design and recordings when you’re also needed elsewhere, right? Okay, so constant media, this is just the life.

0:28:19
This is the life of a person trying to create content on the internet. All right, constant media grid style. So what I’m gonna do, because I don’t have these memorized, right? I’m gonna go to the JavaScript function.

0:28:30
Okay, it’s called get computed style. Get computed style. Computed style of what? And actually, I don’t think we need, we don’t even need the quotes. So of the media grid, right?

0:28:43
If I get the computed styles of the media grid and assign them to media grid styles, then I can use them. I just saved my work here so we don’t get lost, right? So I’m just gonna say another internal note, get the media grid styles,

0:28:58
and then I’m gonna say get the gap value of the grid, okay? And so what we want here is constant media grid gap equals, and what we’re gonna do with the media grid gap is take that media grid styles and just do dot gap. Okay, it looks like this media grid styles dot gap That’s another kind of just internal JavaScript thing where it knows what I’m looking for. Okay? It’s got all the styles in here and then it knows gap is a style

0:29:26
So it’s going to return that now to make sure that it returns it what we can do is something called console log Right, so we did console error, which is creating an error flag. This is console log, which is just essentially saying print something or give me the value of something. So what we’re gonna say is console.log,

0:29:46
and then we’re gonna say, now if I just do media grid gap, like actually without the quotes like this, okay? Media grid gap, let’s just see what that does. I want you to see this in real time, piece by piece, okay?

0:30:00
Let’s refresh. And there it is. It’s spit out 36 point one oh seven six pixels now in the console You have no idea what the heck that number is for right? So what we’re gonna do is this little quotes and then a comma, okay? And in the quotes we get to write a nice cute little label that actually makes sense

0:30:20
So we say media grid gap colon space refresh over here and in our console, where are we? Oh, I gotta sign the code block again. The code block will not run unless you sign it. Refresh, media grid gap, 36.1076 pixels. Great, fantastic.

0:30:39
So we’re actually getting the gap value. Isn’t that awesome? It’s very awesome, right? Okay, now here’s the thing. We can’t do math with the pixels attached, okay? We need it to be a raw number, no units.

0:30:56
How do we do that? Okay, there’s a JavaScript function called parseFloat, okay? And so what we’re gonna do is we’re gonna take our gap, where did it go? Right here,.gap. We’re gonna take all of this, copy it, get rid of it.

0:31:12
parseFloat is a function. You could just drop that right in, media grid styles that gap. Now watch, I sign the code block, I save, I refresh. And now, look at that, media grid gap is a raw number. It has no unit anymore, which means I can mathify it cleanly and not have to worry about the units screwing anything up.

0:31:32
So that’s really good. Okay, so I’ve got the gap value. I’ve got the image height value. What I need to do now is I need to do an equation where I add all of those things up and we’re going to call that the media grid height. Okay so I’m going to come down here and we’re going to say calculate media grid height like this. Okay now I believe this is where we’re going to need to switch from const to let because the value of this thing is kind of dynamic

0:32:06
okay it needs to be redefined and so we don’t want to use a constant we want to use a let and what we’re going to say is that this is the media grid height what is the media grid height it’s going to be something plus something else a group of some things plus a group of something else remember I said it’s the image height times the number of rows that you want. Okay, so I have something called media height, right? Where is it? Media image. Media image, yeah. Media, it should have been, oh, media image height, right there. Media image height. So media image height times four,

0:32:44
because I want four rows. Right now we had five. I only want four. We’re going to cut off the fifth one. We’re going to cut off the overflow. So I want four rows plus the gap, right? So there’s something called media grid gap that I got. Media grid gap times three because there’s only three row three gaps for four rows, okay? So let’s console log that. Console log and media grid height. What is it equal to?

0:33:15
Okay, let’s sign our code block and let’s run it. And let’s see what we’ve got in our console. Media grid height, okay, console, oh, I need to get rid of that. And that, we just want the value, okay? We don’t want just a dummy label there.

0:33:29
All right, let’s refresh, okay? 448.32222. Now I can bring in my cute little label like we did earlier, media grid height. All right, save, sign the code block, refresh, refresh, media grid height, 4495261. But can I use that number? No, because it has no unit. If I use that in CSS, it’s not going to know what the heck to do. What does that mean? You want pixels,

0:33:55
you want rims, you want percentage, what do you want? So what we have to do is in our little equation, okay? Let, remember here’s the equation right here. Let media grid height equals media image height times four plus media grid gap times three, plus, plus in quotes pixels.

0:34:20
And that will just append the pixel unit to our final thing. So we’re gonna hit sign code, we’re gonna save, we’re gonna refresh, okay? Look at that, media grid height, 449.5261 pixels. Fantastic.

0:34:36
So we now know what the height, the exact height of this grid needs to be in order to perfectly cut off overflow without slicing through any of our images. This is fantastic. What we have to do now is use that.

0:34:50
Where do we use that? Okay. So we’re going to the media grid. Back to the media grid. Layout.

0:34:55
Max height.

0:34:56
We’re going to create a CSS variable called, funny enough, max height. Now where are we going to assign the value of max height? Well, we want to assign it in one of the easiest places to assign it is with an inline style tag. An inline style tag. Okay, so we need JavaScript to put the value of this thing in there. So what I’m going to do down here is go add value, add media grid height to locally scoped variable. Okay,

0:35:28
all right, perfect. So we want to grab our media grid, right? This is the thing that we want, style, I believe, dot, what is that? Let me reference, let me check here, style. I don’t have all these things memorized yet. Yes, the function that we want is set property, okay? Set property, bang, just like this.

0:35:51
And then what we wanna do is we wanna pass two things. We wanna pass the name of the property and then we wanna pass the value of the property. So the name of the property is max height. It’s the property we literally just created in the input field, right?

0:36:08
Var max height, right? So we’re gonna set that property name and then the value of the property is going to be media grid height, media grid height, just like that, okay? That should work unless I’ve done something wrong.

0:36:22
So let’s sign the code block, let’s save and let’s refresh and let’s bring this down, okay? So we can actually see what we’re doing. Okay, how do I shrink that? There we go.

0:36:35
Okay, let’s get rid of that. And then let’s refresh. Oh, friends. Oh, friends. We’re making some progress here. Things are looking quite good, aren’t they?

0:36:46
Now, I can test this out by going down to another breakpoint. Okay, so let’s say we load the page right here and I refresh. Look at this, look at this, look at this. I mean it’s just, don’t you love it when stuff comes together? You know, it’s just absolutely fantastic. Now if you resize, I have not programmed it to dynamically recalculate, right? It requires a page load to do that, but anytime the page actually loads at the spray point, the grid is going to work flawlessly. All right. Now, how do we get that off screen effect? If you go back to the original,

0:37:23
and I hate all these windows being open. This is like Inception here. Okay. So I go back here. Look how it’s cut off over here. You want to know how to do that? Watch this. So easy, so easy, so easy. Okay, we’re going to go to our grid. Let me get this over here. So media grid style, and we’re just going to use a transform. If we translate it across the X axis on a negative value, it’ll go off the screen. I’ll prove it by just putting minus 100.

0:37:50
Look, it went off. And I can even come down less than that, and it’ll come back slowly, slowly, right? Okay. How much are we going to move it? Well, don’t we have something called media size, a variable called media size? I mean, like media size like this, that moved it over one media size.

0:38:12
What if I did my times negative one? It would move it to the left, the exact value of one image, but I actually want it to do a third of the image. Okay, so I take and it actually broke our little calc here. Let’s go var media size divided by three times minus one. So cut off one third of the image.

0:38:34
I literally just say cut off, I don’t have to put a magic number in. I can say, dude, just cut off one third of the image. And that’s exactly what I’m doing right here. So we hit save and I’ll go back and we’ll refresh over here.

0:38:44
And now I’m cutting off one third of the image on the left-hand side over there. And it gave me a little bit bigger gap over here, which is actually desirable. I mean, guys, what are we doing here? Now, let me make sure that this is,

0:39:01
oh, it’s not very responsive in terms of like, it’s getting a little squishy, isn’t it? So what we need to do is we need to determine when our grid should stack, okay? So I’m gonna go to here and I’m gonna say, you know what, that’s probably still pretty good. Let’s

0:39:16
go to here this breakpoint right here and let’s say that at this breakpoint we want to go to grid 1. Okay and now at this point we take our inner and we just say it’s aligned to the content axis and then this media grid we’re going to get rid of that translate. Okay so we’re going to come down transform translate X is 0 and that’s that’s going to position our grid right in the center. Okay. So let’s go back over here to where we actually have our live version. And I got to refresh the correct one. So let’s go

0:39:48
down and see where that’s there it goes. It stacks right there. Now we can say, let’s say that we believe well four rows now is a little much. It’s a little much for the four rows. Okay. So what we want to do is we want to get rid of a row at this breakpoint. So what we need to do that is we need to go back to our code block and give ourselves the second option. So if I go to media grid height right here, let media grid height, I can come down here. I think this is the best way to do it.

0:40:19
If anybody else knows a better way to do something like this, I am all ears. But I’m essentially going to create a media grid height SM. So like a small media grid height. And this is going to be the media image height times 3 and the grid gap times 2. So essentially, I’m removing a column with this.

0:40:38
And then what I’m going to do is I’m going to set property. I’m going to set the property again. I’m going to actually set both of them. And I’m going to say max height SM. And then this is media grid height SM like that. So what I can do now is I can come to this media grid at this breakpoint and I could say that my max height is actually

0:40:59
max height SM here or I could potentially even redefine but we’re using an inline style tag so I’d have to think about that more. I think this is probably you know at least the most straightforward way to do it. But again, I’m all ears. I’m all ears. But let’s see what we get there.

0:41:18
Let’s refresh. And we broke it. OK, good. Good. I’m glad that we broke it. Let’s figure out, let’s see if we can diagnose here

0:41:26
why we broke it. First, let’s look at the code. I could probably guess that I just copied something wrong, like duplicated something wrong. So let’s go down media, set style property, media grid. Okay, yeah, media grid style set property,

0:41:44
max height SM, media grid height SM. Okay, media grid height SM, SM, that looks good. Media image height, I’m not immediately seeing what might be wrong here. Oh, other than like, I probably didn’t sign the code block. It does help to sign the code block.

0:42:07
OK, so let’s refresh. And there we go. So we have our three rows. We have our three rows. This is this is really good. So if they load it here,

0:42:17
it looks good if they load it at this break point it looks good if they load it. Down here it looks good. OK, everything everything is. I mean, it doesn’t look fantastic right there,

0:42:30
but I mean, this is gonna be so few devices, right? So few devices. But overall, I mean, this is really, really, really good, right? I mean, look at this. Just, this is fantastic.

0:42:41
And we learned something. Hopefully you learned a lot of somethings. You know, you might have to watch this a couple of times. I highly recommend that you build along with me, right? Build along with me, don’t just watch it. You’re not gonna absorb this stuff by watching it.

0:42:57
I try to replicate exactly what I’m doing here and just follow along and type it all out. No copying and pasting. And it should work out for you. And hopefully you’ll learn something. Let me know if you like this tutorial.

0:43:09
Drop a comment below, show me some love. I’ll be at WCEU, WordCamp EU next week. And then I’ll be back and I’ve got a great training lined up, it’s an agency training on bucketing. It’s gonna be absolutely fantastic, super valuable stuff. So that’ll be available as soon as I get back from WordCamp Europe. from WordCamp Europe. All right guys, I’m out, peace.