How to Properly Create Image Cards in Oxygen (Best Practices)

all right so let's say you want to build an image card in oxygen it might be a blog post card it might be a team member card it might be a product 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 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 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 verse best practices i'm going to show you you know 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 uh so one is a traditional like blog post card 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 the main thing that the tutorial is about 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 uh and so it's going to be super valuable that's it like i'm rambling now so we're just and the guy's 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 we're going to talk about two different styles of cards just so you can see the technique applied two different ways and uh you know the second way is a little bit more advanced but it's gonna teach you a lot of things you know 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 what i'm saying basically is stick around for the entire video right like there's there's value from beginning to end that's kind of the way i'm trying to design these things so here is my starters section 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 you know 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 like you know 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 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 oxy ninja's grid classes i'm going to do an entire tutorial video on uh grids versus columns and how to create grids and things like that but for the purposes of this tutorial you're just gonna have to watch me uh do this and i'm not really gonna 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 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 and we're going to add a text element 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 from my other uh 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 uh 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 a 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 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 right 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 okay in some instances 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 alright so image card new enter and then i'm gonna make that a hundred percent width and i'm gonna make it a hundred percent height as well because i wanted to take up the whole the whole thing all right now i'm gonna 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 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 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 of learn more and i'm going to go ahead and just style these because you know in these tutorials i want things that look somewhat realistic we're not going to go you know balls to the wall with it and make it crazy but we are going to just get you know basic styling now if you saw my um other tutorial my very first tutorial on setting up oxygen you know this would be one of those instances where i would go back to my little trusty fluid font size calculator and i would say you know what i want these to be like uh 18 pixels on mobile uh but on desktop you know 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 right so now i have a responsive heading and then on you know desktop for the other thing i actually want that to be you know 18 but on mobile i you know i i want like 14 pixels inside that card so i'm gonna grab that clamp function as well there and we're gonna target this font size okay uh and i i believe what did i do did i grab some extra code oh 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 uh the same spacing this is actually a bit too much so i'm gonna do half v max on there this is a standard blog post card uh this is the headline i need i hate having uh orphans that's called an orphan this is a standard blog post card so this heading is this heading is for a standard blog post card all right there's a 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 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 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 all right so let's take a look like if somebody joe schmo and marketing came along was like no you know i'm just going to you know i'm going to break all the rules and i'm going to upload a an image that's tall and you know think about this being in a repeater or something so you know 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 okay 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 so 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 do 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 i 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 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 the width and like because we're going to get the 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 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 okay 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 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 enter yes that's the wrapper okay this is what happens we don't label things folks there's another card and i'm going to go ahead and target the background image of this one with the new image and you see we don't have a problem anymore right so we have solved the problem of aspect ratio squishiness now we've created uh two additional problems unfortunately problem number one is we can't use uh source set images responsive images so with this background set if you look at this image it's 1200 pixels wide that is not 1200 pixels of space so we're loading a an image that's way too large for the space uh 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 and the area that somebody's looking 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 you're doing blogging the right way the images are important to be indexed and to have alt tags 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 yes 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 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 dash 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 so if you do object position and you start putting in values oop if you know our hot dog shifted and i'm going to put in a vertical value of and 50 is the default so let's do 20 you see now that it has shifted the crop just like background cover does right this is this is fascinating and it's amazing and it's super powerful and think about like if you had uh 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 oh actually 20 is prioritizing the top of the frame we're seeing what's above her right so their head would be up top the default for object fit cover by the way is 50 50. that's the default but if you don't want the default you have complete control over the over the position of these uh of this element all right so i just wanted to show you that i'm gonna leave it at the 50 50 default because for like blog post cards and stuff 50 50 should be perfect all right so we we've fixed the problem now we need we need to fix one other problem because we inserted these images in 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 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 sites normally i would have like nine image sizes here to choose from and when you put it in you're gonna choose like let's say medium was it it's not you're gonna see it's like 300 pixels which is going to pixelate this uh 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 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 we don't need to use any of this we're going to start from scratch i'm going to create a div which is going to be a wrapper and you're going to see how this stuff kind of comes together kind of quickly all right so gap is l and m 1 boom so i've got my responsive grid now i'm going to put in a new card we're going to call this um let's say image card uh i already have 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 it's going to be a heading we don't need all the elements it's 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 with this technique we are going to definitely need to be able to see our structure and we're going to because we're going to we're going to now need to think in layers okay so i'm going to name that card great and i'm going to go ahead and set a width on this of a hundred percent and i'm gonna go set a height on this this time i'm gonna go like 50 rim so we're gonna have a tall card now that's a little much maybe 40. okay 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 so we're probably going to need another layer in there that's 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 a 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 gonna give you that piece of the puzzle it's gonna change your absolute positioning life all right 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 be able to see let's do that okay 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 add 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 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 you know traditional css it's like uh i gotta have room for both of these things in here so we're gonna 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 of the elements or we have to take the image out of the normal flow of the elements 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 uh background image overlay all right so let's go ahead and add that now so we're gonna go add a diff and we're gonna call this image card big underscore double underscore overlay okay now 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 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 gonna 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's it seems to be doing whatever it wants we don't know how to control it i don't know what to do next i don't know how to fix this okay 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 attach itself to 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 so let me show you i go to the card right that's why i named these things we can find them easily i go to advanced layout position relative now this is the relative 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 uh advanced layout and absolute and you can see that it is it's gone like crazy but it's contained it's contained inside of the relevant uh the relative parent all right so i have a hundred percent width and 100 height the problem is it's squished but we already know how to fix the squish problem don't we so we go to advanced and we go to custom css and we go to object uh fit cover so look at what we've done we have a full image full width full height no aspect ratio problems and no heading it is out of the it's out of the normal flow of the card the thing is 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 and 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 you use z index okay and you assign these values 0 to like you know 9.99 or something so default is 0. so if i want my image to be the bottom layer it's fine it's already there it's set that way by default because it's zero i want the overlay to be the next layer so i'm gonna go to layout on the overlay and set that to one and if you remember we we had that set as a 100 width 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 they're both if if this isn't positioned absolute so this is position 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 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 0 1 and 2. those are our layers see how that works okay 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 2 vmax and then on the right side i'm also going to do two vmax 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 there's a couple ways to do this i could also absolutely position the heading but we've already seen absolute positioning on two separate elements here i want to use a different technique just so 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 this is this heading is for our big blog post okay and now i i don't want that to be dark 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 uh nothing 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 uh and then what i need to do you can see the default's like 50 50. 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. um 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 the default anyway and i just want to bring down the opacity there maybe like 60 990 something like that okay so i've lightened it a little bit so basically the effect um and let's let's go all the way and see see where we're at with this um let's go see that's that's like a lot right and that's fading it i think i need a value here it's 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 darken effect behind the text but then we can see full color kind of up top that's just a little you know overlay effect so you 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 that 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 see it you know joe schmo from marketing goes and uploads this 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 and 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 digitalambition.com and use the contact form and just shoot me an email and let me know what you want to see 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 peace

Channel: Digital Ambition

Views: 8,792

Keywords: oxygen builder, cards, web design, web development, wordpress, responsive image cards, responsive images, srcset, background images, responsive cards, oxygen tutorial

Id: if8JuJf--JU

Length: 32min 49sec (1969 seconds)

Published: Sun Apr 25 2021