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!
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