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

Рет қаралды 17,018

3 жыл бұрын

Blog post cards, team member cards, product cards, service cards ... image cards are used all the time in web design. The question is ... are you building them correctly in Oxygen?
1. Are they responsive with SRCSET images?
2. Do they use actual images instead of background images?
3. Are you able to use ALT tags?
4. Are you able to achieve equal height images that can handle image uploads with any aspect ratio automatically?
If you can't answer "Yes" to all of those questions at the same time, then there's a strong chance you're not building image cards correctly.
Here's what you'll get out of this tutorial...
1. Best practices for building cards and image cards.
2. BEM class naming structure for better organization.
3. How to add SRCSET images in Oxygen.
4. How to get regular images to behave like background images (without losing SRCSET and ALT tags).
5. How to build a traditional image card.
6. How to build a full image card with text overlay.
7. Absolute positioning made easy.
8. A few other little tidbits here and there.
If you find this tutorial useful, make sure to like and subscribe. I'm also taking requests for future tutorials so drop a comment and let me know what you want to see!

Пікірлер: 143

@Gearyco 3 жыл бұрын

I recorded this prior to our discussions about making the screen bigger. Future videos have smart zoom and then the ones coming after that will also be in a smaller window, making everything appear bigger. Improvements are on the way. Hope you're learning a lot with these!

@andrew.schaeffer4032 3 жыл бұрын

I love how you are literally solving all of the exact challenges I've been having with Oxygen.

@laufal 3 жыл бұрын

This is pure gold. Thanks a lot for taking the time to educate us. Much appreciated!

@seanymomoran 3 жыл бұрын

Once again this content is providing so much value per minute! I look forward to learning more about oxygen, ccs, and website design through your future videos. You have already inspired me to pursue learning about the different unit sizes in css. Thank you!

@zul3682 5 ай бұрын

saw this video once a long time ago just bcs its on my feed, now I find this video again when I actually have this problem.... thanks a lot, no one explain better than you

@chrisroberts3610 2 жыл бұрын

Another great value video!! Thanks Kevin!!!

@thewhiterussian138 3 жыл бұрын

High quality tutorial as always. Golden nuggets sprinkled through out. Great job. Thanks.

@bluegaz74 3 жыл бұрын

That object-fit css has blown my mind. I've always been in the 'background image' camp, but recently when trying to speed up load times, I've come across an important issue, which is that background images cannot be lazyloaded easily. By using your method they can, so you are also helping to speed up the load time, win win!

@Gearyco 3 жыл бұрын

100%!

@andiwilkinson770 Жыл бұрын

Thanks for these videos - perfect for core Oxyninja users, and your style of teaching where you show mistakes and wrong ways to do things is really helpful to me personally - I've literally made a playlist of all of them!!

@sajjadnajafi415 2 жыл бұрын

Thank you so much for this tutorial !

@Justin-Bamforth 3 жыл бұрын

Another great tutorial Kevin loving your Oxy vids.

@Jeanpierre.michael 3 жыл бұрын

Magic ! So much value in this. Keep it coming

@jamestaylor7021 3 жыл бұрын

Thanks for the great tutorial mate, keep up the good work!

@astravelercom 3 жыл бұрын

Thank you so much, watching all the videos right now, and after I complete them, gonna join the premium members area. Keep creating!

@Gearyco 3 жыл бұрын

🙌

3 жыл бұрын

IDK how I have missed your tutorials before. First saw the bg overlay post on the Oxy group. Then dived into all the others. Amazing work. Thanks Kevin!

@Gearyco 3 жыл бұрын

Stop sleepin'! ;)

@ReubenHochstetler 2 жыл бұрын

Really helpful video. I was using negative margin to get my image cards to work. This is much better! I also understand absolute and relative position now. Thanks!

@alexandrevanvyve9791 3 жыл бұрын

Again : really cool tuto, thanks a lot ! I was struggling with the images rendering well in the builder, but ignoring the width and height in front-end. I found the cause after hours : I checked the option "change tags by tags" in IMAGIFY. I unchecked it and it now works like a charm.

@peteragazanis2812 3 жыл бұрын

Excellent work! I've seen a couple of your videos and you have a great talent breaking down the subject you are addressing, making it easy to understand and follow. We use almost precisely the same techniques so the way you explain these stuff are very valuable to me and apply greatly to my efforts to explain these to my clients as well!! What I do slightly different for these type of cards is that I tend to set a wrapper around the image and the overlay giving it an index of -1. This way it's easier to keep track of z-indexes (0 is the normal layout, negatives for backgrounds and positives for layers on the front). I use the wrapper in order to better organize the "background" and to be able to handle more complex situations with multiple overlays or complex hovering effects without having to worry with keeping track of z-indexing. Just having them all absolute and display in the order they appear in html. Keep up the great work!!!

@jbbouleau 2 жыл бұрын

Thank you so much for sharing those amazing tutorial for Oxygen Builder. It helps a lot. Best to you!

@Rajjjj19929 3 жыл бұрын

Thankfully I already been applying this card-related techniques from some time and they were truly a game changer. That said, I still found truly valuable to see how you name classes, gives precious hints for cleaner and less chaotic crouded environments with classes. One note aside for those that may be coming from time to time to refresh their ideas: consider adding chapter to your videos in order to make them more accessible by section :)

@importadoravyr 22 күн бұрын

pure Gold ! Thanks

@dorissouza4419 3 жыл бұрын

Mais um vídeo sensacional!!!!! Estou virando sua fã!!!! Estou aprendendo muito com as tuas dicas.

@CrisClaessens 3 жыл бұрын

Thanks!! Nice tutorials, no bs, only to the point 👍🏻💪🏻😉

@snicho 3 жыл бұрын

Some absolute golden nuggets of information here, Kevin! Very clear explanations. The only minor suggestion would be to move the image of you away from the Structure tree so that we can clearly see what you have selected when you are applying Classes. Keep up the great work!

@chr_aikicom 3 жыл бұрын

crzy excellent tuto thanks Kevin

@MariusVideoTuts 2 жыл бұрын

Great tutorial!

@thinkgobig 2 жыл бұрын

This is a great video because background images don't work in oxygen/gutenberg for when we turn over to clients. Love it.

@joebalingit 3 жыл бұрын

This is awesome. Thank you very much for this.

@silentphil77 3 жыл бұрын

Excellent!!

@ChristianBehrends 3 жыл бұрын

Wow, you're good at that. Thanks for sharing your knowledge.

@hasan3502 3 жыл бұрын

Thank you very much for providing this wealth of information, excellent video

@steveclark4821 2 жыл бұрын

Top job. Thanks.

@EduwareIzekor 3 жыл бұрын

Very well done Video!

@hetsar 3 жыл бұрын

Thank you soo much! This was really useful and insightful. Subscribed!

@omedjamal7509 3 жыл бұрын

Excellent .

@cokidevssiregar2474 3 жыл бұрын

clamp function is the best thing I found from your videos, it so much easier for some of us if your were made those tutorial about oxygen from 2 years ago... really loves what you did sir... :)

@Gearyco 3 жыл бұрын

It's magic :)

@sebaborquez 3 жыл бұрын

Very good Oxygen videos. Here are some ideas that I have been trying to solve: 1. Implement an accordeon with native js or jquery (the oxygen component is very poor). 2. Build a sticky header with headroom.js (oxygen's header builder is too limited). 3. place a video in the background from youtube or similar. Greetings from Chile - South America!

@s.hammad 3 жыл бұрын

What do I say! marvellous way of teaching. I found out the hard way of object-fit css with lots of searching as I'm a ui/ux designer and a total code noob. The way you presented is awesome. The wrong way to do it and the right way to do a better job with best practice is super amazing. One small request for new videos. Can you maybe create a series of tutorial videos that is user friendly for designers like us involving NO to very little code in oxygen. There are thousands of designer that can benefit from this. Would be happy to purchase if that would be a paid one as well. Cheers mate.

@diacutex6391 2 жыл бұрын

Excellent

@shibupandit24 3 жыл бұрын

super nice video to use image element with that little css..

@onepotdishrecipe7806 3 жыл бұрын

Love your videos on oxygen - well done - would love a video on setting up oxygen templates for a new or better still an existing site that take into account tricks/tips like your clamp function video - well done!

@KeshavDaBhutra 2 жыл бұрын

I learn something new today love your oxygen tutorial ur great in both entertain and teaching.

@Gearyco 2 жыл бұрын

🙌

@tigaron27 2 жыл бұрын

Thanks for your tutorial. I love how you explained all possible ways to create image card in Oxygen, and I find it very helpful. If possible, I'd love to see a tutorial for building a custom responsive header in Oxygen, as I find the built-in header builder in Oxygen lacks flexibility in its mobile responsiveness.

@BillyRybka 2 жыл бұрын

Hey Kevin Quick question. I want to have text overlaying a slider element. So Essentially I want multiple images on a slider while the text remains the same. I tried to use the absolute/rrelative method. I must have messed it up, it seems to be overlaying other sections on my page.

@Gearyco 2 жыл бұрын

Depends on how it's structured and the design you're trying to achieve. I'd have to see it. You can post stuff like this in the Inner Circle and tons of people will help you out.

@jasonvargas4798 3 жыл бұрын

Love the content! If at all possible time stamps would make this perfect!

@racingheartentertainment1835 2 жыл бұрын

This is such a helpful video for me. I have had this exact problem and was using background images to solve it. I've hestitated using clamp because I'm afraid of what happens in browsers that don't support it.

@Gearyco 2 жыл бұрын

You have to create fallbacks. Or use automatic.css as the fallbacks are already installed.

@vovi547 3 жыл бұрын

Great video. Any chance for future videos you could have the overlay video in the bottom left so we can fully see the structure panel. I think it would help

@Gearyco 3 жыл бұрын

Noted!

@migecko5016 3 жыл бұрын

Another masterclass... I really appreciate it. I am wondering how do fully clickable card (with the permalink) in the cards with full image.

@robertlee6634 3 жыл бұрын

Great video! Super helpful... . How about making a video on how to create a responsive fixed parallax back ground with an image.

@thinkgobig 2 жыл бұрын

Awesome videos K. Constructive criticism - You should move your video image to the left so it doesn't block the structure panel!

@premnathd 3 жыл бұрын

How does the scrset work when images are inserted via dynamic data?

@Gearyco 3 жыл бұрын

Have to do a separate tutorial. It's not a built in feature.

@Gearyco 3 жыл бұрын

Please make sure you've upvoted the feature request for this, by the way: github.com/soflyy/oxygen-bugs-and-features/issues/1204

@premnathd 3 жыл бұрын

@@Gearyco will do. Thanks. Please do a separate tutorial for time being because we are unsure when Oxygen Devs will fix this.. with pagespeed experience included for Google ranking.. it is best to avoid background images and use srcset

@rossmcaulay7341 3 жыл бұрын

Great tutorial as usual. On another note it would help in follow the tutorial if you could collapse the structure panel down so we can see the structure you are working on as when you are talking about the full image card the structure divs you are working on are hidden behind your video image.

@Gearyco 3 жыл бұрын

Got it, will work on it!

@MPOMarketingPowerColombia 2 жыл бұрын

I really love your tutorials, and thanks for helping us, to improve our skills, I would love if you can maybe create a tutorial where when can create a ribbon label corner using a repeater and custom field and switch colors according to post type category, lol sounds a little complex. But would be nice, this are things the always ask and want to know it how to do it well. Thanks I really appreciate your tutorials

@jlangman614 2 жыл бұрын

This is really great, learning alot from you- Thank you. I am trying to make a card that overlays on hover AND the title has a hover state along with a button apearing. I get them working individually, but cant get them to work all together-ideally when you first hit any part of the card.

@Gearyco 2 жыл бұрын

Definitely possible. Just have to get the CSS targeting right.

@jlangman614 2 жыл бұрын

@@Gearyco HeHe yep I guess thats the trick. My next trick is getting my work to get me into your inner circle!

@PhilDodici 2 жыл бұрын

Nice video! I have a recommendation for a new video: create an image card with the aspect ratio of the image card always the same, in this way when the page is resized, the amount of image shown is always the same

@patjescloud9585 2 жыл бұрын

I fkin love you!! Ur the best source for oxygen builder info!

@Gearyco 2 жыл бұрын

🙌

@racingheartentertainment1835 2 жыл бұрын

You'll want to add Layout > Display: block to your images so they lose the extra margin underneath. In some layouts you'll want to use display: inline-block with vertical-align:bottom. I wish there was a way to place more than just a headline over an image (like a card full of text), but absolutely positioned elements are not included in the flow so there's nothing holding the container open. You can use min-height, but this isn't responsive. You can use breakpoints and min-height, but the results might not be what you want.

@brysaba 3 жыл бұрын

Awesome video instruction, great detail, you are the go-to person for any tutorial I need. I would pay $100 if on udemy.

@Gearyco 3 жыл бұрын

Wow, thanks! I'm happy to do them :)

@elmatougguielhoussein4509 3 жыл бұрын

Hello, great job as usual I wonder if you can make a responsive mega menu, there are many people in the facebook community who are looking for it and especially that there are very few tutorials on this subject. thanks a lot

@OlegYarkayev 2 жыл бұрын

Hi Kevin, thank you very much for a great video. I am wondering if there is a simple way to combine both of your designs. I need an image covering the whole card and the heading, text and button on top of it + all of it should look good on all devices. I am using your method for a hero section and on mobile devices text is overlapping the image.

@Gearyco 2 жыл бұрын

I’d need to see an example

@kenanmalas7095 3 жыл бұрын

Smart 🧠

@dankuta 3 жыл бұрын

Great content. But how do I use this in repeater? The primary use for cards are in repeaters and dynamic use cases.

@Gearyco 3 жыл бұрын

I'll be doing a video on repeaters. But cards are super useful outside of repeaters as well.

@ribenawrath 3 жыл бұрын

Some very handy and useful tips here. But how can we make this work for acf fueled images?

@Gearyco 3 жыл бұрын

Just insert the image dynamically like you do text from custom fields. It's definitely possible.

@kittyinferno 2 жыл бұрын

Love your work! Could you resubmit this video without your circle headshot overlapping the layers in the bottom left please?

@Gearyco 2 жыл бұрын

Can't, unfortuantely. It's part of the original recording. It's not an overlay that can be moved after the fact.

@rexbenedict8474 3 жыл бұрын

Hey buddy. Thanks a lot for these advanced tutorial. Can you do a video on WooCommerce product cards that I can use on any page not just the shop page and I can use acf for fields not available and I want on the cards.

@Gearyco 3 жыл бұрын

Yes, will do that at some point :)

@GavinDavidson 3 жыл бұрын

Thanks for a great tut again, I have used so much of your content already, it has helped me a great deal. I've followed this video religiously, a few times already, the aspect ratio seems to be sorted with object-fit: cover; the images are still cropped off - any ideas? They are set at 100% width and 25rem height.

@GavinDavidson 3 жыл бұрын

object-fit: contain sorted it.

@Gearyco 3 жыл бұрын

I don't mind the crop in most use cases. Contain can cause unpredictable behavior in certain use cases.

@GavinDavidson 3 жыл бұрын

@@Gearyco Ok, thanks, noted. I was using this for client logos on recent-projects cards where I'm showcasing my recent work, where the crop is a problem, so it works pretty well. But I'm going to rebuild my blog post cards where the images will have more of these types of aspect ratios you have in your video. Also, I was wondering, in your inner circle, do you cover WP Grid Builder? And thanks for responding, it is appreciated.

@arvydasgasparavicius7231 2 жыл бұрын

What you did at 6:58 in a split second would have taken me somewhere between 15-20sec.

@goshenweb 3 жыл бұрын

Another awesome tutorial. Is there a trade-off between using image background with no option for SEO in contrast to using actual image layer which technically increases the DOM size of the page since you now have to add additional divs to achieve same thing an image background would do...

@goshenweb 3 жыл бұрын

Also, will be great if you can do a tutorial on masking images and text elements in oxygen. Thanks

@Gearyco 3 жыл бұрын

On the first card version it has the same dom size. Second version requires more dom elements but crawlable images is far more important than less dom.

@forsterarts 2 жыл бұрын

I have to sit back and treat this like a college course. His instructions are multilayered, which means I need to relax and take notes or else I will get completely lost.

@Gearyco 2 жыл бұрын

📝

@HarryThomas_HMT3design 3 жыл бұрын

Excellent presentation and delivery. We do need a web page on your digitalambition.co site that shows the video and includes the Oxygen settings so that we have a printed reference, like your first two presentations. I also want to echo someone else who asked that you minimize the sections not in use in the structure panel so that the part you're working on doesn't disappear behind your headshot overlay.

@Gearyco 3 жыл бұрын

Will do!

@binaryfire 3 жыл бұрын

Another great vid! Any chance of doing one on vmax / min-maxing?

@Gearyco 3 жыл бұрын

I'll include it in context in a future video. Trying to avoid doing pure CSS videos , though.

@tomashudolin7197 Жыл бұрын

I'm trying to make cards with easy post where data are loaded from ACF. Images are loaded with php function wp_get_attachment_image (based on ACF documentation). The problem is that these images break the structure and the grid is overflowing the screen. Don't understand why. When I make a div with class for three columns and put images there, even they are set as full, they use only third of the parent div. So why the behaviour of images loaded in same size (also full) with easy post is so different?

@Gearyco Жыл бұрын

I'd have to see a link to an example to inspect what's happening. You're better off posting this in the Inner Circle and a bunch of people will jump in to help you. -- digitalambition.co/inner-circle/

@chelofonte 2 жыл бұрын

THANK YOU VERY MUCH, but for me the object-fit: cover; feature doesn't make any affect. I applied to the image class but the image is still tall. What do Im doing wrong?

@Gearyco 2 жыл бұрын

Have you set a custom width and height on the image?

@chelofonte 2 жыл бұрын

@@Gearyco beg thank you Kevin for you answer, I missed the 25rem at 11:40, my bad.

@badinpattamasirikul1287 3 жыл бұрын

Should we do absolute positioning for the image on Hero Section? So that we can have alt text for SEO purpose.

@Gearyco 3 жыл бұрын

If the page is important it’s not a bad idea :)

@badinpattamasirikul1287 3 жыл бұрын

@@Gearyco Thank you

@chr_aikicom 3 жыл бұрын

nice video, question why using heading levels for font-size, heading 3 is normally following heading 2, no ?

@Gearyco 3 жыл бұрын

I usually use h3 for cards. sometimes I just go with what’s quickest in tutorials if it’s unrelated to the main topic.

@BienveillanceMartialeAikiCom 3 жыл бұрын

@@Gearyco ok, so you confirm we should care about the heading level (for "real" dev I mean), I suppose it has an impact on SEO, no? (just to clarify as I consider that (almost) what you show us is "sacred" ;-) )

@Gearyco 3 жыл бұрын

@@BienveillanceMartialeAikiCom it's debatable how much impact it actually has.

@ferdianlie 3 жыл бұрын

Hi, thanks for the lesson. I have a question. How do I connect the image cards to my blog posts list so that its dynamic (like repeater)? I am kind of new to using oxygen and I am not tech savvy neither. Thanks a lot man.

@Gearyco 3 жыл бұрын

You can't use SRCSET natively inside of repeaters, unfortunately. But to link up the cards, just add a link wrapper on your main card div.

@ferdianlie 3 жыл бұрын

@@Gearyco hey man thanks for the reply. I will try that. One more thing. How do I set the blog post’s query, pagination, and the filtering in link wrapper? Thanks a bunch

@Gearyco 3 жыл бұрын

@@ferdianlie You set those things on the repeater. The link wrapper goes on the main div inside of the container div that the repeater generates.

@ferdianlie 3 жыл бұрын

@@Gearyco i see. i see.. thank you so much. i have tried and u understood now. Thank you very much for your tutorial and your response. Really appreciate it. I hope you have great days man.

@loukaskouros9438 2 жыл бұрын

How we can use the Spacing tutrial that you have when we have card with image? Thanks

@Gearyco 2 жыл бұрын

You can use AutomaticCSS variables for padding in your custom class.

@loukaskouros9438 2 жыл бұрын

@@Gearyco is plugin or simple css?

@PswACC 3 жыл бұрын

17:40 How do you insert these extra sizes?

@Gearyco 3 жыл бұрын

You only insert the largest size needed. The others are automatically inserted to the code.

@adamzonnis980 3 жыл бұрын

Hey man, can you do a tutorial on vmax and best practices regarding it?

@Gearyco 3 жыл бұрын

I’m trying to avoid pure css tutorials but I’ll integrate it into an oxygen tutorial.

@djmwebsites1529 3 жыл бұрын

Is there a way to make this work with an archive template when bringing in dynamic images like the feature image?

@Gearyco 3 жыл бұрын

No :/

@djmwebsites1529 3 жыл бұрын

@@Gearyco what I did was apply a class to the img element and then write the css in a style sheet. .class{ object-fit:cover;} works!

@Gearyco 3 жыл бұрын

@@djmwebsites1529 Oh, sorry, I thought you were talking about SRCSET. You can just put the object-fit: cover; in the CSS section of the main image in the repeater div.

@AdamJHumphreys 2 жыл бұрын

This video is beyond confusing now that automaticcss is out and the fact I can't figure out what half those classes added are lol. Request an update on this for sure for hero images etc. Images aren't conforming to divs for example which is bizarre.

@Gearyco 2 жыл бұрын

I think that tutorial just uses custom classes. So for ACSS you simply replace the styling values with variables on the same custom classes.

@tomashudolin7197 2 жыл бұрын

Hi there. I have another question here :) You're using height 100%. But as I know, the best solution is not to use height and %. From my experiences, it makes issues on Apple devices (don't know why). But always when I used height 100% there was a problem on apple devices.

@Gearyco 2 жыл бұрын

You can use flex stretch or flex:1 instead

@jamesburgos 3 жыл бұрын

So, when is it a best practice to use a background image? And, why don't we have object controls for the image element in Oxygen?

@Gearyco 3 жыл бұрын

Non CSS background patterns. Any backgrounds that need to repeat or be parallax. Images that need to be part of pseudo elements. Those are a few.

@jamesburgos 3 жыл бұрын

@@Gearyco thanks. great content. i don't think I've ever binged a youtube channel, but you got me watching your tuts like I'm watching Game of Thrones or some shit. lol.

@DeepakGargeyesolutions 2 жыл бұрын

I am assuming this is only for image cards. It should not be used for hero images. ??

@Gearyco 2 жыл бұрын

You can use the same technique for hero images

@DeepakGargeyesolutions 2 жыл бұрын

@@Gearyco Dear Kevin, Finally did this on my home page banner. I cannot thank you enough. For the benefit of others, I wanted a home page banner landscape and then on the phone wanted the orientation to change to portrait. With this technique without doing anything except adding that one line of code and setting a height for my banner i was able to achieve everything i wanted. Thank you thank you

@SpiritTracker7 Жыл бұрын

I really don't like the fact that at the beginning of the tutorial, we can't follow along because you already have classes pre-made (ninja grid classes). So right out of the gate we're stuck because you applied 3 classes that are unexplained. Sorcery dude.

@Gearyco Жыл бұрын

I don’t use those anymore. I use AutomaticCSS now. Also, I’ve updated this tutorial twice. You have to watch the newer stuff. And watch this video for context about those premade classes: kzfaq.info/get/bejne/bN1hdbRmsd6WZ3U.html