How to Properly Create Image Cards in Oxygen (Best Practices)
Vložit
- čas přidán 24. 04. 2021
- 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! - Jak na to + styl
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!
I love how you are literally solving all of the exact challenges I've been having with Oxygen.
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!
100%!
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
This is pure gold. Thanks a lot for taking the time to educate us. Much appreciated!
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!
This is a great video because background images don't work in oxygen/gutenberg for when we turn over to clients. Love it.
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!!
High quality tutorial as always. Golden nuggets sprinkled through out. Great job. Thanks.
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!
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!
Stop sleepin'! ;)
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.
Another great value video!! Thanks Kevin!!!
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!
Another great tutorial Kevin loving your Oxy vids.
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!!!
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 :)
Thank you so much, watching all the videos right now, and after I complete them, gonna join the premium members area. Keep creating!
🙌
Thank you so much for this tutorial !
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!
Thanks for the great tutorial mate, keep up the good work!
Thank you so much for sharing those amazing tutorial for Oxygen Builder. It helps a lot. Best to you!
Magic ! So much value in this. Keep it coming
pure Gold ! Thanks
Mais um vídeo sensacional!!!!! Estou virando sua fã!!!! Estou aprendendo muito com as tuas dicas.
Wow, you're good at that. Thanks for sharing your knowledge.
crzy excellent tuto thanks Kevin
Thanks!! Nice tutorials, no bs, only to the point 👍🏻💪🏻😉
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... :)
It's magic :)
This is awesome. Thank you very much for this.
Thank you very much for providing this wealth of information, excellent video
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.
Excellent!!
Top job. Thanks.
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!
Excellent .
Thank you soo much! This was really useful and insightful. Subscribed!
super nice video to use image element with that little css..
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.
Great tutorial!
Very well done Video!
Love the content! If at all possible time stamps would make this perfect!
I learn something new today love your oxygen tutorial ur great in both entertain and teaching.
🙌
Excellent
How does the scrset work when images are inserted via dynamic data?
Have to do a separate tutorial. It's not a built in feature.
Please make sure you've upvoted the feature request for this, by the way: github.com/soflyy/oxygen-bugs-and-features/issues/1204
@@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
Another masterclass... I really appreciate it.
I am wondering how do fully clickable card (with the permalink) in the cards with full image.
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.
You have to create fallbacks. Or use automatic.css as the fallbacks are already installed.
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
Noted!
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.
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.
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.
Got it, will work on it!
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
Great video! Super helpful... . How about making a video on how to create a responsive fixed parallax back ground with an image.
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
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
Awesome videos K. Constructive criticism - You should move your video image to the left so it doesn't block the structure panel!
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.
Definitely possible. Just have to get the CSS targeting right.
@@Gearyco HeHe yep I guess thats the trick. My next trick is getting my work to get me into your inner circle!
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.
I learned so much from this, so I owe you a big big thank you. I also got this to work in Bricks. The only thing that stumps me a little is that when I set the image's HTML tag to , it changes its aspect ratio, becoming slightly squeezed together. So, the CSS "object-fit: cover" doesn't seem to work anymore.
In oxygen?
No, in Bricks. I know it's off topic in an oxygen thread -apologies!
@@GeertBonamie yeah sometimes the figure element and bricks is a little sketchy. I would need to see a link to see what’s going on though. Good question for the inner circle.
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.
I’d need to see an example
Awesome video instruction, great detail, you are the go-to person for any tutorial I need. I would pay $100 if on udemy.
Wow, thanks! I'm happy to do them :)
I fkin love you!! Ur the best source for oxygen builder info!
🙌
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.
📝
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.
Yes, will do that at some point :)
Great content. But how do I use this in repeater? The primary use for cards are in repeaters and dynamic use cases.
I'll be doing a video on repeaters. But cards are super useful outside of repeaters as well.
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.
object-fit: contain sorted it.
I don't mind the crop in most use cases. Contain can cause unpredictable behavior in certain use cases.
@@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.
Some very handy and useful tips here. But how can we make this work for acf fueled images?
Just insert the image dynamically like you do text from custom fields. It's definitely possible.
Another great vid! Any chance of doing one on vmax / min-maxing?
I'll include it in context in a future video. Trying to avoid doing pure CSS videos , though.
Smart 🧠
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...
Also, will be great if you can do a tutorial on masking images and text elements in oxygen. Thanks
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.
Love your work! Could you resubmit this video without your circle headshot overlapping the layers in the bottom left please?
Can't, unfortuantely. It's part of the original recording. It's not an overlay that can be moved after the fact.
What you did at 6:58 in a split second would have taken me somewhere between 15-20sec.
17:40 How do you insert these extra sizes?
You only insert the largest size needed. The others are automatically inserted to the code.
nice video, question why using heading levels for font-size, heading 3 is normally following heading 2, no ?
I usually use h3 for cards. sometimes I just go with what’s quickest in tutorials if it’s unrelated to the main topic.
@@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" ;-) )
@@BienveillanceMartialeAikiCom it's debatable how much impact it actually has.
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.
Will do!
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.
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.
@@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
@@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.
@@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.
Should we do absolute positioning for the image on Hero Section? So that we can have alt text for SEO purpose.
If the page is important it’s not a bad idea :)
@@Gearyco Thank you
How we can use the Spacing tutrial that you have when we have card with image? Thanks
You can use AutomaticCSS variables for padding in your custom class.
@@Gearyco is plugin or simple css?
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?
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/
Hey man, can you do a tutorial on vmax and best practices regarding it?
I’m trying to avoid pure css tutorials but I’ll integrate it into an oxygen tutorial.
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?
Have you set a custom width and height on the image?
@@Gearyco beg thank you Kevin for you answer, I missed the 25rem at 11:40, my bad.
Is there a way to make this work with an archive template when bringing in dynamic images like the feature image?
No :/
@@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!
@@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.
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.
You can use flex stretch or flex:1 instead
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.
I think that tutorial just uses custom classes. So for ACSS you simply replace the styling values with variables on the same custom classes.
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?
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.
@@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.
I am assuming this is only for image cards. It should not be used for hero images. ??
You can use the same technique for hero images
@@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
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.
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: czcams.com/video/6w1BQ5Lx27A/video.html
You are rambling again
Just for you Bobby