[Resolved] Select Background Color for Feature Image (SVG)

[infocus]

Hello Tom! I have a question, with your extense knowledge maybe you have a solution.
I am create a site in Generatepress with the posibilty of agregate SVG image for the feature image (i think that is more fast and easy instead create image for each post) and i whant to select a background color for each post created for the feature image svg (post 1 – feature image with backgrond blue, post 2 – with feature image background red, etc).

Do you know how can y do it or what is the function for it?
Thank you!

[Tom]

Hi there,

Not too sure what you mean. Are you wanting to give all of your SVG images a default background color?

I think you can use fill, but I don’t know a lot about SVGs: https://stackoverflow.com/questions/44198625/how-to-change-background-colour-in-an-svg-image

[infocus]

Hello, i am not refer to the svg (that is only a mension), i am refering to Pick a Background Color for each feature image background post (the image selected to the post). For example, in your theme i can select a color for the header, the footer, etc. I want to do the same por each background of the feature image (in my case an svg or transparent image).

[Tom]

You could use CSS to set the backgrounds. If you use Simple CSS (https://en-ca.wordpress.org/plugins/simple-css/), it adds a metabox to each page which you can add CSS to.

Something like:

.featured-image {
    background-color: red;
}

[infocus]

Thanks you Tom, but i am searching more for somethink like Color Pick Función of WordPress or somethink like that. You use this función for the selection of the colors,i want to use that función but Will be apply for each post. I have the perfect design for this website in my mind (and i will to Share it in your foro soon)
😉

[infocus]

PS. CSS on each post is like:

2000 posts > 2000 CSS sheets

[Tom]

Unfortunately there isn’t a built in color picker that can achieve that.

Wouldn’t you need to use the color picker on each post anyways, if each post needs a different color?

[infocus]

Yes that is the idea, use in each post the color picker, this can be asociate to a list of CSS colors prdefined, for example, red:#ff000; blue:#0000ff; like a class. Or, you know some way to put a class in a post? Then i can put this class “red” and include the class in my css style.

[Tom]

You could use the custom fields metabox (core WP). If you don’t see it, click “Screen Options” at the top right of the screen, and check the Custom Fields option.

Then add a new field, and give it a name: featured_image_background

Then give it a class value: red

Then add this function:

add_filter( 'post_class', 'tu_add_post_class' );
function tu_add_post_class( $classes ) {
    if ( is_single() && get_post_meta( get_the_ID(), 'featured_image_background', true ) ) {
        $classes[] = get_post_meta( get_the_ID(), 'featured_image_background', true );
    }

    return $classes;
}

[infocus]

Muchas gracias Tom, funciona muy bien!

[Tom]

Awesome 🙂 Glad I could help!

[Author]

Posts