DYNAMICALLY Control Template Behavior in Oxygen With Custom Data Attributes!
Vložit
- čas přidán 28. 07. 2024
- There's probably a gazillion awesome use cases for this concept.
In this video I'm going to focus on just one use case, which solves a problem I've been having since the first day I ever used a template in Wordpress (not just Oxygen, but WP altogether).
A universal problem with templates is that a background image or object-fit cover image (think blog post featured image) can't be controlled at the individual post level. So, if you want to change the featured image background position (to see a more relevant part of the photo), overlay color, etc. you can't. Until now.
This goes beyond blog posts -- it works with all kinds of templates and has various use cases, so don't miss it!
In this video you'll learn:
- How to create a dropdown custom field for controlling background position
- How to create a custom data attribute in Oxygen
- How to dynamically insert the dropdown choice into the data attribute value field.
- How to target data attributes with CSS
- And more.
Super powerful stuff IMO. Let me know what you think!
Code here: digitalambition.co/watch/dyna...
Can you think of any other really valuable use cases for dynamically controlling templates with data attributes? Please share!
0:00 Intro
1:02 Problem Overview
3:50 Add BG Position Custom Field
7:10 Intro to Data Attributes
9:00 Creating Dynamic Custom Data Attribute
11:00 The CSS
13:15 Testing It
The channel is CLOSE to hitting 4,000 subs! If you're not subscribed yet, click the sub button to help us get over the hump!
Please do not stop! I've never learned such great super pro tips in any other channel. Thank you .
You are not only teaching something new but also concept and mindset to develop Oxygen based wp sites. Thanks Kevin, very much appreciated. Please keep doing!
Thanks for this Kevin, an excellent way to keep customers happy when they call you and say "My image does not look correct, his head is cut off" etc. They now can play around with positioning in their blog and do it themselves. Awesome stuff!!
100%.
SO USEFUL! Never thought of this before! You're such a helpful genius! I will def get in the inner circle soon!
Just hearing Kevin utter the line “none of that nonsense” in almost every video he produces is almost as valuable as the techniques he teaches... 🤣
This is a nonsense-free zone.
You're off to the races!!
Thanks! Awesome intro to data attributes. Very powerful stuff, my mind is spinning.
Brilliant Kevin, this is awesome!
I've been in your inner circle since it started and there is sooooo much value. I only thought of using attributes for accessibility purposes, this opens up a whole new world of control. Thanks a ton!
Can you elaborate? What kinds of tips and tricks did you take away from the inner circle?
These tutorials are impressive.
@@nielstieman9594 Yeah for sure! He has given Oxygen templates best practices, pricing strategy, BEM and structure, he also is creating a new system called automatic.css which we are testing which he will release to the group to allow for the automation of many things, like making automatically responsive grids, automatic complementary color systems, and automatic resizing of text. Its pretty fantastic. O and my favorite are his SEO tutorials, they are really in depth and helpful. The one I'm waiting for the most is how to get clients and where, that should be coming up at some point in the near future.
I miss your oxygen tuts, please support oxygen more! I know they made some bad or moves but they have proved the project is not abandoned! If anything I feel it’s growing!
I've used a number of your tuts and this one really makes you think of the possibilities. Thanks. Kevin :-)
I wonder if we could use CSS variables in Data Attribute fields (a-la your previous tutorial)? ;-) Imagine setting the image-overlay for a specific background image with var(--primary-trans-60)
Really excellent Kevin!! Mind is blown. Congratulations on the 4K subscribers BTW!
Currently sitting at 3984. So close! :)
Bang on Video, Always saw attribute but didn't know how to use it. Now sky is the limit
Brilliant as ever Kevin. I am in the circle but you do give away so much value for free as well.
Wow. GREAT tutorial. Very, very, cool and useable tip!
You are a rockstar. This technique is super useful. Keep up your good work 👍👍
Thanks for sharing. This is a valuable resource!
Thank you. Your videos have been so helpful.
Tnx for the guide! In will be nice to see more videos with the data attributes.
This is so cool and solves the problem for a lot of our customers. Thanks Kevin. Inner circle pease
digitalambition.co/inner-circle/
Awesome as always. Love that you use metabox.
Awesome as always!
Another good one Kevin!
Thanks for the awesome tutorial.
Simply brilliant! Thanks Kevin.
Very welcome
I love this tutorial! It's incredible!
Fantastic Kevin, thank you for this
So valuable, thank you Kevin !
I just found a use case for this. Nice one.
Thanks Kevin. Great give away and great tutorial as usual :)
Super Cool!!!! 😎🙌 Thanks!!
Very cool! Learn something new every day. Awesome share
🙏
Pure gold!
Awesome video!
Great tutorial, thank you.
But one thing -- it is very important for people to know that this works when the background image is applied to the section and not an image element within that section.
Very valuable info
Just a great Tutorial
Still trying to take it all in. Cheeeeze!!! Does your brain ever take a break? Awesome stuff Kev!
Rarely.
wow! I had the same problem with bg images on portfolio several weeks ago and now I can solve it easy thatnk to your video!!! 💜
Glad it helped!
We loved so much
Not sure why anyone would Dislike this!
Me either! #haterade
Thanks for this video
This is THE best, MOST powerful customisation for Oxygen.
It is totally under-rated. The uses for this are only limited by our imagination.
Just don't tell everyone, coz we'll end up no longer looking like wizards!
- "... would you like data attributes with that?"
Totally underrated!
I think the naming convention "data-" makes sense, but I would also like to make sure we distinguish data attributes that are specific to JS controls. Or even a tag to know that this value is specifically set in the post edit screen. For example "data-pe-" where "pe" is "post edit" or "data-js-" for JS-only features. Even "data-t-" could be like an attribute which is set by the template itself via some other coded logic. Or how about "data-css-" to denote purely a style control.
What I'm afraid of is in a year down the road I see this value "data-bg-control-" and not know where it comes from, how it's set, how it can be expanded on or changed, etc. If I could see at a glance that "oh this is edited on the post edit screen and therefore controlled by custom fields output in an Oxygen template", this makes it easier to dev down the road. Otherwise, the amount of time it might take to sleuth how and where this data attribute is being output, could take a while.
Hells yeah baby!
As of my comment, there are 3 down-votes, why on earth would you down-vote this useful tutorial? P.S. thanks for the tutorial, very helpful.
First :) thanks Kevin
well.game change Oxygen builder
Thanks Kevin
If you use object-fit instead of a background image you should use object-position instead of background-position?
Kevin Just a beautiful technique, I always love your content, and really usefull, you dont imagine with your techniques you have made my life easier with my customers. Thanks for your great tutorials. I'm already subcribe to your website, Learning SEO thanks
🙌
Wow! Thanks a million Kevin. Another awesome tutorial. So this could this also be used for the single post template with the featured image?
Yep, that's exactly what I was editing. But it can be used for ANY template. I use it for Custom Post Type templates for service pages, service area pages, etc.
@@Gearyco Excellent. Thank you. I missed that in the video. Should have watched it twice!!
BOOM. Another awesome tutorial...Can you share the link to your monthly tutorial sign up page. I would have that on the bottom of every video...
DigitalAmbition.co/inner-circle
Great video Kevin! I'm not sure to be advanced enough to grasp the full power of it though. Is it possible to use this in a dynamic slider to correctly position each single slide? And should I use it on the "repeater" itself or on the "slide" element?
Not sure i would have to play around with it. What are you trying to accomplish?
@@Gearyco I have a dynamic slider with 4 images with focused object not in the middle of the images. I managed to implement your solution on the "slide" element of the slider. But I had to add an attribute with a unique value (img title) along with the "data-bg-position" attribute so the background position can be different from one image to another :)
Hi Kevin, nice tutorial, I'm thinking, can this be used to set a div's background color based on the taxonomy of a cpt? I need to use a repeater and then get the background color dinamcally but I haven't found a way to do it.
Depends on the actual use case. I'd need to have more details or an example.
Superb tutorial. But now, I'm trying to use it for my homepage, but it doesn't work there. When I want to find my ACF field, then in attribute is this settings_page='false'.
Thanks big god Kevin
The CSS snippet is missing on the referenced page.
All snippets got moved into the IC a long time ago. Also, these snippets have received updates since these videos were published.
Thanx for the video Kevin! The CSS is not more available, this is beause "old" stuff and not more valid or still good and can be found in Inner Circle? Thanx!
We moved everything to the IC for better management and keeping things updated.
Any suggestions for using data attributes on Easy Post templates?
I don’t use easy posts so not sure.
Hey Kevin, how would you apply this where the image is not a background image, rather set up to appear as one (as an image, absolutely positioned etc.)...like in your other teachings?
Wouldn’t be much different at all.
I wonder if it's possible to catch hascode from color picker and apply it to let's say border of an element?
Anything is possible just depends on how good you are at coding
Well, I'm learning from you.. 😉 Thanks for great content Kevin
Hi Kevin, the linked page is going to an error. I just had a client insist on this possibility so is the code still available somewhere?
Thank you!
All code snippets were moved into the Inner Circle because we took video show notes off the website. Was too much extra work for each video.
Hi Kevin, I came back to this video to refresh my memory as I wanted to implement this technique into a website I'm building, but unfortunately the link to copy the code is broken. Is there any other alternative link where I can copy the code from? Many thanks for everything you do for the community! Cheers.
All resources got moved into the inner circle a ways back.
@@Gearyco thanks, I will have a look.
since the update to the new domain, the code seems to be gone
This works a treat!
But how would you set the overlay color of a dynamic background image with this method?
It's usually set up like this: background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url(xxx/xxx.jpg);
I can't see how I could get data attributes to work here. 🤔
The only solution I could think of is to add a div on top of it with absolute positioning and control its opacity through a data attribute.
[data-bg-overlay] And then make the value a preset of some sort like "primary-overlay". But you'll need to follow my tutorial for being able to do overlays properly in Oxygen > czcams.com/video/_ju-i54C9hg/video.html
@@Gearyco thank you so much; I'll check it out! :)
@@nikostrobel Make sure you read the pinned comment. The tutorial wasn't exact. There was a better way I posted.
Brutal, no custom fields option with the default meta box. Layout is completely different in here haha.
I’ve done ACF and CPT UI videos before. You can use those for reference.