0:00:00
All right, so let’s say you want to build an image card in Oxygen. It might be a blog postcard, it might be a team member card, it might be a products card, it might be a service card. There’s a lot of different uses for cards in web design. So you want to build your image card in Oxygen and you want all of the images to be exactly the same height so that all of your cards look nice and neat. But you don’t want to have to crop your images a specific way before you upload them to the card. You want a card design that can support an image of any aspect ratio. Still keep all of the images equal height and just make sure it’s all staying super clean automatically. Also, you want to retain the ability to use source set images, responsive images, and you want to retain the ability to use alt tags for SEO and have scannable, indexable images.
0:00:53
So we have to avoid using background images, which is a common solution that people try to use. So in this tutorial, I’m going to show you how to build image cards properly in Oxygen without using background images. I’m going to show you bad practices versus best practices. I’m going to show you the stumbling blocks that the beginners run into. And then, of course, I’m going to show you the right way to do things. And I’m going to show you two different card designs. So one is a traditional blog postcard layout. And the next one is a full image card. So as is true with a lot of these tutorials, you’re going to learn a lot of other stuff along the way besides the main thing that the tutorial is about.
0:01:33
Like, for example, when we do the full image card, you’re going to learn absolute positioning versus relative positioning. You’re going to learn a lot of great stuff. And I’m going to try to make this stuff as easy as possible. And so it’s going to be super valuable. That’s it. I’m rambling now. So we’re just in the guys mowing the lawn outside, which I’m sure you can hear in the audio. So we’re off to a great start. But let’s go ahead and get into the tutorial. All right, guys, no time to waste. Let’s go ahead and dive right into it. I’m going to show you how to create image cards properly in oxygen.
0:02:02
We’re going to talk about two different styles of cards, just so you can see the technique applied two different ways. And the second way is a little bit more advanced, but it’s going to teach you a lot of things. And in all of these tutorials, my goal is to teach you the main thing. But hopefully, you pick up a lot of other golden nuggets along the way. So all right, let’s go ahead and we’ll start by adding a section. So what I’m saying, basically, is stick around for the entire video. There’s value from beginning to end. That’s kind of the way I’m trying to design these things. So here is my starter section.
0:02:36
I’m also, by the way, going to show you the wrong way to do things or the way that you might think to do them. So for those of you who are beginners, you’re going to try things out. And you’re going to stumble upon wrong ways to do things, obviously, where you might think it’s a good way to do it. So I’m going to show you what I would call bad practices and then best practices. So that’s part of what you’ll pick up in these tutorials as well. All right, so I have my section. What I’m going to do, because cards don’t typically exist by themselves, they usually exist in a grid.
0:03:09
So I’m going to create a grid. And I’m not going to use Oxygen’s Default Grid Builder. I’m going to use Oxygen Injus Grid classes. I’m going to do an entire tutorial video on grids versus columns and how to create grids and things like that. But for the purposes of this tutorial, you’re just going to have to watch me do this. And I’m not really going to explain much as I go through. But basically, I’m creating a three column grid with a large gap. And then I want that to be responsive to one column on medium-sized devices. My grid is done. I have a responsive grid built.
0:03:43
If I put in a div, you’ll see that it’s there. If I duplicate it, you’ll see there’s three of them. And for right now, we’re just going to focus on the first div that’s inside this grid, because that’s going to be our card. So I’m going to go ahead and I’m going to put a class of card on this. And I’m going to put elements inside of our card. And because I said we’re going to be creating image cards, there is going to be an image element inside of this card. There’s also going to be a heading. And that’s going to be an H3 level heading. And there’s also going to be a text element, not a class. We’re going to hit add. We’re going to add a text element.
0:04:22
And then we are going to add, oh, you know what? I think I’ve used this class before, and it’s picking up owl spacing styling for my other tutorial video. So I’m going to clear that. We’re going to create a new class to put all this under. So I’m going to add my final element, which is going to be a button. So I’ve got my card wrapper, basically. That’s this. And then I’ve got all these elements inside the card. So first best practice is our wrapper needs a class. And we’re going to call this, let’s say, card. I think I’ve used a few classes before, and I don’t want to double up on my classes.
0:04:59
So image card new. We’ll just do that. All right. And then I’m going to add a class to every element that’s inside the card. And I use BIM naming convention. So image card new, and then double underscore image. Because that’s the element inside of the image card new. And then I’m going to do the same thing for these. Image card new, double underscore. This is the heading for the card. And then text, image card, new, double underscore text. And then this is the button, obviously. So image card, new, double underscore button. So now I have classes on all of these elements.
0:05:37
Again, best practices, right? So now I’m going to start styling. And I’m going to show you one of the problems here. I actually need another element inside this card that doesn’t exist yet. But I’m going to show you why. So if I go to the wrapper and I try to put spacing on this to just get some padding inside of this card. So I’m going to do 2V max on all sides. You’re going to see that my image is squished in two, like it has the padding. Let me go ahead and I’ll put a background color on this of white just so you guys can see the card better. So my image is, the padding is affecting my image as well. And that’s OK in some instances.
0:06:14
But in this case, I actually want a card that stretches left to right 100%. So it goes edge to edge. And then it also touches the top as well. So this would be like a standard blog post card or a team member card, perhaps. So I’m going to show you how to do that because that might be something you run into often. So I’m going to go ahead and clear our padding from this. And I’m going to click on the image because I want to add a div below it. So there’s my div. And this is going to be what’s called an inner wrapper. All right. So image card new inner.
0:06:47
And then I’m going to make that 100% width. And I’m going to make it 100% height as well. Because I wanted to take up the whole thing. All right. Now I’m going to just drag in these elements into the wrapper. And the goal of doing this is to be able to apply padding that affects all these elements while leaving our image alone. So I have an inner wrapper that now, and I have that selected. So if I put the 2V max, if I can type today, on all sides of that, you see that my image is unaffected. But I have a card that I have padding around the other elements inside of this card. So we’re going to say this is a standard blog post card. Great.
0:07:33
And I won’t put a period on the end of that. And we’ll say this is the description of the blog post for this card. And then obviously, this will be something like call to action to learn more. And I’m going to go ahead and just style these. Because in these tutorials, I want things that look somewhat realistic. We’re not going to go balls to the wall with it and make it crazy. But we are going to just get basic styling. Now, if you saw my other tutorial, my very first tutorial on setting up oxygen, this would be one of those instances where I would go back to my little trusty fluid font size calculator.
0:08:10
And I would say, you know what? I want these to be like 18 pixels on mobile. But on desktop, I think we can afford to have it maybe like 22 pixels or something. And so I’d grab that clamp function. And I would put that in the typography section here and go to none and boom. So now I have a responsive heading. And then on desktop for the other thing, I actually want that to be 18. But on mobile, I want 14 pixels inside that card. So I’m going to grab that clamp function as well there. And we’re going to target this font size. And I believe what did I do? Did I grab some extra code?
0:08:56
It’s already 1.8 pixels probably. But if we look on mobile, you see it shrunk down to 1.4 rim. So that’s exactly what we want there. And then the button we’re just going to leave alone. Now, we do want spacing here. And best practice, if you’re doing your spacing, I have a tutorial video called Owl Spacing, which you could use for cards as a best practice. The second best practice is to apply the spacing to the class of each element. So for example, my heading would get a bottom margin of 1v max. My text would get a bottom margin of 1v max. And that way, when I create more cards, they all have the same spacing.
0:09:38
This is actually a bit too much. So I’m going to do half vmax on there. This is a standard blog post card. This is the headline. I hate having orphans. That’s called an orphan. This is a standard blog post card. So this heading is for a standard blog post card. All right, this is description of the blog post card. And then we have our learn more button. Great. Can we actually get to the tutorial about images, Kevin? Yes, absolutely. I was thinking the same thing. So here’s our image inside of our card.
0:10:11
And I’m just going to grab, like I downloaded two images ahead of time. One is hot dogs, and one is this lady right here on the phone. I grab these two because one is wide, and one is tall, because we need to create some problems and then solve them. So by all intents and purposes, this looks like a proper image card. And you would say, yes, look, if I duplicate this, it’s going to be nice and consistent. And if I change these things, they all have classes. So it’s all going to work very nice. But they’re not going to work very nice. I’m going to go ahead and put 100% width on this, just so that has a width.
0:10:47
All right, so let’s take a look. If somebody Joe Schmo and marketing came along and was like, no, I’m going to break all the rules, and I’m going to upload an image that’s tall. And think about this being in a repeater or something. So we’re not actually styling these. We style the card once. We put it into a repeater. And then it takes care of our blog posts from that point forwards. Well, if you do this improperly, it’s not going to take care of things. It’s going to break. You’re going to have something that looks like this. And yes, I will be doing a tutorial video on oxygen repeaters.
0:11:19
OK, so how do we solve this problem? Well, you might say, well, that’s easy. Let’s just put a height on it. And they’ll all be the same height. All right, cool. So I have the class targeted. Let’s go ahead and see how that works. I’m going to go to RIM and we’re going to try like 30 RIM, which is a, you know, well, that’s like due 25. So that’s cool. But we have this lady who’s all squished up now, which is a problem. And so most people don’t know how to fix this, basically. So they’re like, I don’t know what to do. So one of the solutions that people have used traditionally in the past is I’m going to go ahead and duplicate this section so we can start with a brand new area to work with.
0:12:02
And I’m just going to do that as our background. So we can have some differentiation. They say, well, we can’t use images. That’s not going to work because we can’t set the height on the images with a width. And like, because we’re going to get this squishiness effect, it’s going to break the aspect ratio of the image, basically. So the solution that they came up with to this problem. Again, I want to teach you bad practices, best practices, middle of the road practices. Because what I’m about to show you is actually a solution. But it’s a solution that creates additional problems. So the way that they would go about this, I have my card selected. So I’m going to add a div.
0:12:40
And we’re going to call this image card new, double underscore, image dash wrapper. And they would set their width on this. And they would set their height on this as well. Remember, we wanted the height to be 25 rim. And then if I put this in its right position, they would say, OK, so the way we’re going to handle this is with background images. Because I know that with background images, I can do background cover. And I can have equal height without screwing up the aspect ratio. So they would go to background, and they would choose their hot dogs. And they would do background size cover, background repeat, no repeat, left top both set to 50%.
0:13:27
And suddenly you see that we have an appropriate card. And if we look, let me go ahead and delete this one. If we duplicate our card, is this our card? Yeah. Or is that the inner? Yes, that’s the wrapper. OK. This is what happens when we don’t label things, folks. So there’s another card. And I’m going to go ahead and target the background image of this one with a new image. And you see we don’t have a problem anymore, right? So we have solved the problem of aspect ratio squishingness. Now we’ve created two additional problems, unfortunately. Problem number one is we can’t use source set images, responsive images.
0:14:11
So with this background set, if you look at this image, it’s 1,200 pixels wide. That is not 1,200 pixels of space. So we’re loading an image that’s way too large for the space. Whereas if you insert images, which I’m going to show you in a second, like real image elements, you can easily use source set with these. And you can have responsive, perfectly responsive images that load the appropriate size for the device and the area that somebody’s looking at. So I lose that capability when I go to background images. The other thing that you lose is some SEO potential, because Google cannot read background images, and background images do not have alt tags. So when you’re creating something especially like blog post cards, where if you’re doing blogging for SEO, and you’re doing blogging the right way, the images are important to be indexed and to have alt tags.
0:15:04
It’s very, very important. And you want those in the cards as well as in the blog posts because they all have relevant information inside of them. And by creating these cards with background images, you lose that potential. And so we’ve solved the aspect ratio problem, but we’ve created two new, what I would consider major problems with this method. So that brings us to the actual solution, which we were very close to up here. So I’m going to leave that, but I am going to copy it, and we’re going to put it down below so that we can fix it. So we were on the right track by putting actual images in here and setting a height on those images. It’s just, I mentioned a lot of people don’t know where to go from there to fix it, to fix the aspect ratio problem.
0:15:49
So I’m going to show you now. It’s one line of CSS. You can’t do it natively in Oxygen. But if you have your image selected, your class, and you go to Custom CSS, we’re going to type in Object-Fit, colon, cover, semicolon. And our problem is solved. We’re done. That’s one line of code we have completely solved our problem. Now, this image is behaving as if it is a background image, but it’s not a background image. It’s a real image. And I’ll prove to you that it behaves exactly as a background image does, because you also have control of the position of the crop into that image.
0:16:24
So if you do Object-Position, and you start putting in values, if you know that our hotdog shifted, and I’m going to put in a vertical value of 50% to default. So let’s do 20%. You see now that it is shifted, the crop, just like background cover does. This is fascinating. And it’s amazing, and it’s super powerful. And think about, like, if you had headshot cards, for example, well, most headshots, like the person’s head, is toward the top of the frame. So you would want to prioritize the top of the, actually, 20% is prioritizing the top of the frame. We’re seeing what’s above her.
0:17:02
So their head would be up top. The default for Object-Fit covered, by the way, is 50.50. That’s the default. But if you don’t want the default, you have complete control over the position of this element. So I just wanted to show you that. I’m going to leave it at the 50.50 default, because for blog postcards and stuff, 50.50 should be perfect. So we’ve fixed the problem. Now we need to fix one other problem, because we inserted these images incorrectly. We just went to image URL browse, and we put them in. You actually need to go to Media Library, and you’re going to see it clears it.
0:17:37
And then you browse, and you choose your image. And when you insert this, you have a new feature in this section called size. And you actually get to choose the appropriate size for that image. Now, this is a training install of Oxygen, so I don’t have access to all of the sizes I traditionally load in client size. Normally, I would have like nine image sizes here to choose from. And when you put it in, you’re going to choose, let’s say, medium was it. It’s not. You’re going to see it’s like 300 pixels, which is going to pixelate this.
0:18:05
But it would put in that image size as the full size. And then it would load all sizes below to use if that image happened to ever need to be smaller. It would load the smaller image size as well. This is source set. So this is responsive images. So this is very, very powerful. I’m going to do a tutorial on how to load all of those custom image sizes. But for now, I’m going to have to choose full. But just know that this is how you insert responsive images appropriately. So not only do we have responsive images, but we have them behaving as background images.
0:18:37
All right, I’m going to move on from this, because I think we covered the whole thing. I’m going to now show you a full image card. So what if we wanted a card that looks completely different? It’s a full image. And we’re going to have to do some stuff with absolute positioning and relative positioning here. You’re going to learn a lot besides just making another image card. But it uses the same technique, achieves a completely different look, and it’s going to teach you a couple new things as well. So I’m going to go ahead and I am going to just create a whole new section, because we don’t need to use any of this. We’re going to start from scratch.
0:19:11
I’m going to create a div, which is going to be a wrapper. And you’re going to see how this stuff comes together kind of quickly. So gap is L and M1. Boom. So I’ve got my responsive grid now. I’m going to put in a new card. We’re going to call this, let’s say, image card. Already, oh, yeah. We already did that. Let’s not do that. Let’s do image card big, or something like that. All right. So there’s my image card big. And I’m going to have only one element this time.
0:19:44
It’s going to be a heading. We don’t need all the elements. This is going to be like a more minimalist style card. And I’m going to do H3 on here, and image card big, double underscore heading. Cool. And then what I’m going to do is I’m going to select the card, if I can find it in the structure panel here. There’s my card. Let me just name this real quick. Because with this technique, we are going to definitely need to be able to see our structure. And we’re going to now need to think in layers. So I’m going to name that card great.
0:20:17
And I’m going to go ahead and set a width on this of 100%. And I’m going to go set a height on this. This time, I’m going to go like 50 rem. So we’re going to have a tall card now. That’s a little much, maybe 40. OK, that’s like 400 pixels high. All right. So normally, with a full image card like this, you would try to do the background image approach. But we don’t need to. We’re going to use an actual image in this card, using the same technique that we just saw. But we want the image to take up the entire card, and we want the heading to be on top of the card. And then we want to be able to read the heading.
0:20:51
So we’re probably going to need another layer in there this designed to cover the photo a little bit with a gradient, perhaps, that only shows up behind the heading. That sounds like really complicated. But I’m going to make it easy for you. And by the end of this little mini tutorial inside this tutorial, it’s like inception. You’re going to feel like you’re a master of absolute positioning. Because I’m going to give you a trick. Everybody gets confused and overwhelmed by absolute positioning, typically because they’re missing one piece of the puzzle. And I’m going to give you that piece of the puzzle. It’s going to change your absolute positioning life. All right.
0:21:26
So here we go with our card. We are going to give this a background color, even though it’s also going to have an image. And let’s go ahead and throw in this is a white section. So you’re not going to move it to C. Let’s do that. OK. So now you can see the white. And let’s go ahead and throw in our image as well. So we’re going to go image and the image element. And let’s put it above our heading. So we can see what happens, the problem that we’re going to fix. And we’re going to call this image card big underscore image. Great. And we’re going to say 100%.
0:22:00
And we’re going to say height is 100%. Because we set a height on the wrapper itself. So we don’t need to set an actual height value on here other than take up the whole thing. Go 100%. Take up the whole thing. Now it’s not taking up the whole thing because we have this pesky little heading. And they’re running into each other. And traditional CSS, it’s like I got a room for both of these things in here. So we’re going to 100% is going to be until it meets something else, which is this heading. So we have to take the heading out of the normal flow of, we have to either take the heading out of the normal flow of the elements, or we have to take the image out of the normal flow of the elements.
0:22:38
I’m going to take the image out of the normal flow of the elements. That’s what absolute positioning does. And we have to start thinking in layers now. So the photo is going to be the bottom layer. And then the heading is going to be on top of that. And then we talked about having another layer in between those that controls the background image overlay. All right. So let’s go ahead and add that now. So we’re going to go add a diff. And we’re going to call this image card big underscore, double underscore, overlay. And we’re going to have this be, remember, this overlay has to affect the entire image. The entire image is 100% width and 100% height. So we are going to do that on this card. And now you see we have a sandwich.
0:23:24
And we don’t want a sandwich we want layers. We want actual visible layers. So let’s go ahead and do that now. Image card image big, advanced, layout. I’m going to show, oh, actually, let’s get an actual image in there first. So you can see what tends to happen. So people are like, hey, I’m going to attack this with absolute positioning. Let’s go. And they go to advanced and they go to layout. And they’re like, all right, let’s do it. Absolute. Oh, my gosh. And it completely spills out of the container. It seems to be doing whatever it wants. We don’t know how to control it.
0:23:57
I don’t know what to do next. I don’t know how to fix this. OK, so let’s step back. Remember, I said with absolute positioning, people tend to miss one important piece. And the one important piece is what that image decides to attack itself too. An absolutely positioned element attempts to attach itself to the first parent that it can find that is positioned relative. All right. Now, that sounded really complicated, but it’s not. Watch. So I have the card. If I want to attach the image to the card, then I need to set the card to position relative. If I want this image to attach itself to this container, this wrapper, I need to set the position relative on the wrapper and not the card. If I wanted this image to attach itself to this section, then I would make the section position relative and none of the other things that it’s containing.
0:24:55
So let me show you. I go to the card. That’s why I named these things. We can find them easily. I go to advanced layout position relative. Now this is the first parent that is positioned relative. So the card will attach itself to that wrapper that I just made position relative. So now I go to advanced layout and absolute. And you can see that it’s gone like crazy, but it’s contained. It’s contained inside of the relative parent. All right, so I have 100% width and 100% height. The problem is it’s squished. But we already know how to fix the squished problem, don’t we? So we go to advanced and we go to custom CSS and we go to object fit cover. So look at what we’ve done.
0:25:43
We have a full image, full width, full height, no aspect ratio problems and no heading. It’s out of the normal flow of the card. The thing is that the heading is behind it, right? So what we need to do now is layer these things. And we also have to remember to bring our div overlay into effect somewhere as well. But we’re going to have an image, which is the first layer. We’re going to have an overlay, which is the second layer. We’re going to have a heading, which is the top layer. So right away, image layer, let’s go to layout. If you want to do layering in web design, it’s used, use the index. OK? And you assign these values zero to like, you know, 999 or something. So default is zero. So if I want my image to be the bottom layer, it’s fine. It’s already there.
0:26:37
It’s set that way by default because it’s zero. I want the overlay to be the next layer. So I’m going to go to layout on the overlay and set that to one. And if you remember, we had that set as 100% weight, 100% height. I also need to set that as absolute so that it is not affected by the heading, right? The heading is going to affect that if this isn’t positioned absolute. So this is positioned absolute as well. And the Z index of one raises it in front of the photo. I’ll prove that to you by setting a background color on it. See? So that is effectively the second layer. The heading we want to be the third layer. So I’m going to go to layout and I’m going to go to Z index 2. So we have zero, one, and two. Those are our layers.
0:27:26
See how that works? OK. Now let’s talk about before we do our overlay because that’s sitting there waiting to be done. We actually need to know where the overlay needs to be because, and that’s going to depend on the position of this heading right here. So I’ve got to figure out how to position this heading in the box. Because right there, it ain’t looking so good, right? So we need to figure out a better way to do this. So the first thing I’m going to do is I’m going to put a margin on the left and right of the heading because I don’t want it touching the sides. Let’s do 2V max. And then on the right side, I’m also going to do 2V max. And then I’m going to figure out if I need, you know, top and bottom. But what I’d like to do is have this. I don’t know if you’ve seen the image cards where the heading is like floating at the bottom, right?
0:28:14
There’s a couple ways to do this. I could also absolutely position the heading. But we’ve already seen absolute position on two separate elements here. I want to use a different technique to see you guys can get more variety in what you’re learning inside of this. So I’m going to do margin top auto. And whenever you do auto on a margin, it’s going to force the element away from that side. So if I do margin top auto, it’s going to force the element away from the top all the way. Like it’s going to take it all the way to the other side of the container. So you see what happens there. So now I’ve achieved getting that heading on the bottom. And what I’m going to do is call this heading is for our big blog post. OK. And now I don’t want that to be dark.
0:29:02
I want it to be white because what I’m thinking is we’ll use a darker overlay and then the white text will pop out on this card. So there’s my white heading. And then I also need our 2V max here because I don’t want it touching the bottom. So if I give it margin on the bottom, it’s going to push it away from the bottom and there we are. Now I’m going to go steal the font size that I used up there, that clamp. And I’m just going to put it on here so that we can match that and be kind of even. But you see now we’ve introduced a new problem of like I can’t read the heading because it’s blending in. That’s where our overlay layer comes in. So I’m selecting the overlay layer and I’m going to go to background and we’re going to add a gradient to this. And our gradient is going to consist of two colors. Color number one is going to be nothing.
0:29:50
So I’m going to drag that slider all the way to zero. And color number two is going to be this dark color and we’ll probably do, let’s just do like, yeah, let’s do that kind of gray, dark gray. And then what I need to do, you can see the default is like 5050. So it’s like blending dark gray into nothingness. But I think I want a little bit more control over that. So I’m going to go like, okay, 20, we need to go the opposite direction, like 80. Let’s see, what is, yeah, okay. So 80 and then let’s do like, if we do zero on there, I think that’s a default anyway. And I just want to bring down the opacity there, maybe like 60, 90, something like that. Okay. So I’ve lightened it a little bit. So basically the effect, and let’s go all the way and see where we’re at with this. Let’s go, see, that’s like a lot, right? And that’s fading it.
0:30:54
I think I need a value here. Probably, yeah, there we go. I want like a lot of the photo to be its normal color, but I just want the, you know, the darkened effect to be behind the text so that we can read the text. I think that percentage is good. And I just dropped this now to like 70. And so we have that little darkened effect behind the text, but then we can see full color kind of up top. That’s a little, you know, overlay effect. So you see now we have a card that, and I will prove to you that this handles any size image. So if I duplicate the card and I go target its image and I’m not using it for the sake of this tutorial, I’m not using, I didn’t do all the source set stuff, but that’s what you should do as I showed you before. Just moving quickly here.
0:31:43
See, you know, Joe Schmo from Marketing does an uploads his tall photo and we’re all good. Nothing breaks, right? And I will prove to you that this is all responsive as well. So we go down to 480 pixels. I mean, you might want to adjust the height on mobile. But other than that, I mean, it all degrades to mobile very, very nicely, very clean. So no issues there. So that is absolute positioning, creating a full image card with some overlay stuff going on. We’ve talked about how to just do the normal type cards. We talked about the wrong way to do it. So I hope you’ve learned a lot in this tutorial. If you have any questions, don’t hesitate to drop a comment below. If you have any recommendations for a next video or requests for a specific tutorial, drop those in the comments below or you can go to digital ambition.co and use the contact form and just shoot me an email and let me know what you want to see.
0:32:38
Happy to help in whatever way I possibly can. If you found anything that I can do better, right, in my workflow, then drop a comment and let me know that as well. I’ll go on with my other step in current sketch- otherwise
