[Resolved] Selecting background color of a post in View loop, based on a custom field

[Author]

Posts

[alexG-4]

I know it is possible to select a background image to display in a view loop, as explained here
https://toolset.com/forums/topic/background-image-inview-loop/

But I wish to select a background COLOR rather than an image, based on a custom field of the post type being displayed.

I can't that this is possible using the View Block. Is that so, or am I missing something?

Thanks

Alex

[Waqar]

Hi Alex,

Your observation is correct and in the block settings, there is no option to set the dynamic background color from the custom field.

But you can use a 'Fields and Text' block to insert some custom CSS code that uses the custom field value.
(please make sure to use 'HTML' mode)

For example, suppose you have a color type custom field 'post-color', and the container block where you'd like to show this dynamic background color has a class 'special-container'.

The CSS code, in this case, will look like this:

<style>
.special-container {background: [types field='post-color'][/types];}
</style>

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[alexG-4]

Hi Waqar

Thanks for that suggestion.

Unfortunately, I'm displaying several posts at once, so the background colour for ALL of them ends up being that of the last one to be rendered.

One option would be to create a single-colour image for each post and use the background image mechanism, but that's beginning to make it more trouble than it's worth.

Alex

[Waqar]

Thanks for writing back.

In case of multiple items coming from the view, you can extend this workaround further.

1. You can wrap the contents of the individual post/loop item inside a "Container" block. And in the ID field of this container, you can insert 'special-container-[wpv-post-id]' to dynamically generate the unique ID using the current post's ID.
( screenshot: hidden link )

2. And in the loop, you can include the 'Fields and Text' block, to add the dynamic CSS code for each item's unique background, like this:

<style>
#special-container-[wpv-post-id] {background: [types field='post-color'][/types];}
</style>

This works on my test website.

[alexG-4]

Brilliant!

Thanks so much Waqar.

My issue is resolved now. Thank you!