[Résolu] Allow user select background color or upload background image

[Auteur]

Publications

[davidZ-4]

Tell us what you are trying to do? allow the user select the background color of his custom post or upload a background image

Is there any documentation that you are following? i couldn't find something on this

Is there a similar example that we can see?

What is the link to your site?
lien caché

i would like to give the user the ability to choose his custom post background color or allow for a background image the user can upload.

Thanks,

David

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - do you mean that you want to have a custom field which holds the color and when you display the posts belongs to any post type - you want to assign that selected color as background color?

[davidZ-4]

Hi Minesh,
yes, something like that.
the idea is to have a front end form (CRED) that will allow the user choose a background color or a background image.
the user will select the color or upload the image to a custom field created with types.
then based on the color or image selected/uploaded the background of the post will change.
the post is created by the user and can be edited by the user using toolset front end forms (CRED)

Thanks,

David

[Minesh]

Do you mean that the form will be User form? or you mean that with whatever post created by whatever user - with CRED form user will select color/image and that image should be displayed as background?

so - the thing is that, to save the color value or image when user submit the post is not an issue but the thing is that how you apply that selected color/image as background as you need to adjust your theme/html when post displayed. This is something you need to handle on your own OR I need information which theme you are using and how you displaying the post. If I see there is a easy way I can certainly help you.

Could you please share the page URL from where the user will add the new entry using CRED form and access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important. If you agree to this, please use the form fields I have enabled below to provide temporary access details (wp-admin and FTP).

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Well - its not possible directly but you need to use custom styling and assign the value of background color or image.

I see currently with the following post for example, the background image is setup with Body clasee:
=> lien caché

You need to find a way to override the Body class and assign the background color/image value of your custom field.

Something like this:

<style type="text/css">
body {
background-image: url('[types field="post-bg-img" size="full" url="true"][/types]');
}
</style>

More info:
=> lien caché
=> lien caché
=> lien caché

[davidZ-4]

Thank Minesh,
this is a good direction
i was able to find the Custom CSS location for the Content Template I created with Divi and used the following css in it

body.custom-background {
background-color: #000000;
background-image: url('[types field="post-bg-img"][/types]');
}

however the css does not resolve the shortcode to the image URL
when i inspect the page I see that the css is

body.custom-background {

    background-color: #000000;
    background-image: url('[types field="post-bg-img"][/types]');
}

When I hard code the image url like this

body.custom-background {

    background-color: #000000;
    background-image: url('<em><u>lien caché</u></em>');
}

the page render with the defined image.

I then stooped using the Divi builder for the content template and tried to insert the same in the Toolset Content Template CSS editor with the following

body.custom-background {
    background-color: [types field='post-bg-clr'][/types];
    background-image: url('[types field='post-bg-img' output='raw'][/types]');
}

with no success

any thoughts why the image shortcode does not resolved in the css?

[davidZ-4]

also, I tried to use the JS editor in the toolset content template as follow

$('body').css('background-image', 'url("[types field='post-bg-img' output='raw'][/types]")');

with no success.
when I use

$('body').css('background-image', 'url("<em><u>lien caché</u></em> ")');

it works just fine

so again for some reason the shortcode does not resolve to the url in the JS nor the css

please advise,
thanks,
David

[davidZ-4]

oh, i forgot the JS run locally and not on the server...
so how do I do_shortcode in side JS?

or can you think of something else to resolve this.

[davidZ-4]

I tried another workaround: load the values on the page in hidden element and call the values using JS but i'm not sure i have this nailed down.
on the content template i used

<p id="bgimg" hidden>[types field='post-bg-img' output='raw'][/types]</p> 

and in the JS i used

var imbg = (document.getElementById("bgimg").innerText);
$('body').css('background-image', 'url(imbg)');

[Luo Yang]

Hello,

Minesh isn't available, I will take care of this ticket.

Yes, you are right, your workaround have this nailed down.

Thanks for share the solution, that will help other users.

[davidZ-4]

Hi Luo,
Thanks for the comment however my workaround doesn't work.
Something is not working and i need help on this.

Please advise,
Thanks,

David

[davidZ-4]

Hi Luo,
I Was able to fix my JS code and now the workaround works...

Thanks,

David