Adding Dynamic Attributes for Unique Styling inside Repeaters

Being able to style items inside repeaters individually based on certain criteria; custom fields, taxonomies, etc has been something that has been difficult to achieve until now.

The new attributes feature in Oxygen v3.5 allows us to add new data into the HTML that is output by Oxygen components. There are a lot of big use cases for this, adding schema markup, storing data in the HTML for JS libraries to use, but having dynamic attributes means we also now have a way to differentiate between posts inside the repeater.

Note – This is a better method than this tutorial, which was trying to solve a similar issue, but using shortcodes.

We can’t change the existing attributes, which are the IDs and the classes, they will still be the same for each repeated element, but now we can add our own.. and being able to use dynamic data inside these attributes means they can store some information about the posts themselves.

Property Listing Example

We’ll follow on from the most common example of using the repeater – Create a property listing using a property post type with custom fields added for the information about each property.

If you’re relatively new to using custom fields to add dynamic data to the repeater component, I recommend this tutorial from the Oxygen team to watch the build process using the repeater component for a typical property listing.. https://www.youtube.com/watch?v=Xo9PEIDRWfo

Using Dynamic Attributes

Let’s say in our property post type, alongside the other custom fields, we could add a new select field that allows content editors to mark a particular property as ‘featured’, ‘highlight’, ‘regular’, ‘new’, ‘bargain’ etc.

With the new attributes feature, we can use this value from this custom field to populate the attribute value. We can do this on the main div inside repeater or any element inside. We’ll add ‘data-highlight’ as the attribute name, and then use Oxygen’s dynamic data option to add the custom field value as the attribute value.

Now the HTML markup from the repeater component would go from looking like this.. (ID’s removed for brevity).

<div class="oxy-dynamic-list">
  <div class="ct-div-block property"></div>
  <div class="ct-div-block property"></div>
  <div class="ct-div-block property"></div>
  <div class="ct-div-block property"></div>
  <div class="ct-div-block property"></div>
</div>

to something like this..

<div class="oxy-dynamic-list">
  <div class="ct-div-block property" data-highlight="regular"></div>
  <div class="ct-div-block property" data-highlight="regular"></div>
  <div class="ct-div-block property" data-highlight="featured"></div>
  <div class="ct-div-block property" data-highlight="regular"></div>
  <div class="ct-div-block property" data-highlight="regular"></div>
</div>

Notice only the third property has been marked as featured by the content editor. That data is now inside the HTML so we can target it for styling.

One way would be to create a custom selector that would apply styles only to the property listings that have been selected as ‘featured’..

.property[data-highlight=featured]

or target any child elements inside that div..

.property[data-highlight=featured] .property-title

.property[data-highlight=featured] .property-image

The same method can also be used to add pseudo-elements like a ‘featured’ banner using ::before only on those posts that have been marked as featured. For eg this is the CSS used to add the banner in the screenshot.

.property[data-highlight=featured]::before {
    transform: rotate(-22deg) translate(-6px,10px);
    -webkit-transform: rotate(-22deg) translate(-6px,10px);
    position: absolute;
    background-color: #d74238;
    color: #ffffff;
    padding-left: .5em;
    padding-top: 0em;
    padding-right: .5em;
    padding-bottom: 0em;
    border-radius: 5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
}

Adding attributes for styling is a useful little trick. It’s definitely not the main benefit of being able to add custom attributes to elements, but when using the repeater component especially, having quite a simple way to be able to distinguish between different types of posts can be very useful.