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!

The Code

Paste this into a stylesheet in Oxygen:

/*** 
BACKGROUND IMAGE CONTROL FOR TEMPLATES
Control background position on template-generated pages.
***/

[data-bg-position="Left Top"] {
	background-position: 20% 20%;
}

[data-bg-position="Left Center"] {
	background-position: 20% 50%;
}

[data-bg-position="Left Bottom"] {
	background-position: 20% 80%;
}

[data-bg-position="Center Top"] {
	background-position: 50% 20%;
}

[data-bg-position="Center Center"] {
	background-position: 50% 50%;
}

[data-bg-position="Center Bottom"] {
	background-position: 50% 80%;
}

[data-bg-position="Right Top"] {
	background-position: 80% 20%;
}

[data-bg-position="Right Center"] {
	background-position: 80% 50%;
}

[data-bg-position="Right Bottom"] {
	background-position: 80% 80%;
}