Dynamic CSS on ID with custom field value in query loop

How To
1

Hi,

In a posts query loop, I need to set objet-position on my featured image with a value coming from a custom field associated to the post.

As Bricks does not currently accept dynamic custom fields in element CSS setting or object position setting, how can I retrieve element’s id in the loop to output the right CSS in a code block?

Something like:

<style>
#brxe-<?php echo HERE_I_WANT_TO_RETRIEVE_LOOP_ELEMENT_ID; ?> {
  object-position: <?php echo get_field('position_image') ?>;
}
</style>

Or is there a better way to do this?

2

OK found a solution with attribute:

  • I set the element attribute with the custom field value
  • I use the attribute to target the element

image

[pos-img="Left"] {
    object-position: left;
}

But it’s not optimal since I need to write the CSS for all objet combinations combinations.

3 
But it’s not optimal since I need to write the CSS for all objet combinations combinations.

I think it would be less optimal if Bricks did this. It would mean a few lines of CSS for every single element inside of a loop. I think the attribute solution is the cleanest (in terms of how much CSS needs to be added)

1 Like
4

Hi David,

I was not thinking of Bricks doing all the combinations for me, of course.
I wanted something automated, something like this in CSS setting for instance:

root img {
  object-position: {acf_position_image};
}

Where I don’t have to define, left, right, etc…

I the meantime, I found CSS attr() that does exactly what I need, but it doesn’t seem to supported yet except for pseudo element content: attr() - CSS : Feuilles de style en cascade | MDN

When it is officially supported, we will be able to write that:

root img {
  object-position: attr(pos-img string, 'center');
}