[Resolved] Change a background image based on a field selection on a form.

[Author]

Posts

[thomasK-12]

Tell us what you are trying to do?
I would like to change the background image of a container based on the user selection on the form for a CPT

Is there any documentation that you are following?
Conditional HTML Output in Views - But i'm pretty clueless at this

Is there a similar example that we can see?
hidden link - User can select the theme
hidden link - The background image for the container at the top needs to change based on selection

What is the link to your site?
hidden link

[Minesh]

Hello. Thank you for contacting the Toolset support.

I will need to check your block structure and review how its organised. Once I review that I will be in better situation to guide you in the right direction.

*** 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 have set the next reply to private which means only you and I have access to it.

[Minesh]

I can see that you have setup a static image as your container background.

The thing is that, Container block allows you to set a dynamic image but the field it supports is the image field only. Please check the following screenshot:
=> hidden link

Now, I see on your form, you setup the theme filed as radio buttons which has options (Sea, Cloud, Christian) which has the value assigned as (1,2,3) respectively.

Now, I've question how to know if I select option Sea, what image you want to display and if I select option Cloud what image you want to display and so on? from where I can get that image?

[thomasK-12]

After following a few tutorials on conditional views etc.. I pretty much got lost, But I learnt that having the theme options as radial buttons so only one can be selected would be a good start.

Currently I only have the 3 there, while I develop a working model, then I will add more once I understand the code an system more.

I have uploaded 3 temp images that can be used into the media libary;

header-christian-01.jpg
header-clouds-01.jpg
header-sea-01.jpg

[Minesh]

The solution would be, you need to add the custom image filed that holds the image URL as per your radio button selection and we can assign the correct selected image using the cred_save_data form hook.

For example: - you should add one more custom image field namely bk-image to your custom field group.

Then when we save the form, we will check the selected value of your radio button and update the bk-image value(as URL).

If you agree - I can setup that for you on your site.

[thomasK-12]

Sounds like a good plan. If you can set that up it would highly appreciated. I can then learn how you set it up and improve it it with the other themes, any more information you can supply in the reply would be great!

[Minesh]

Can you please try to create a new post for using the form:
=> hidden link

I've added a image custom field namely "theme-photo" to your following custom field group:
=> hidden link

Then, I've added the following code to "Custom Code" section offered by Toolset:
=> hidden link

add_action('cred_save_data','func_update_theme_photo',10,2);
function func_update_theme_photo($post_id,$form_data) {
    if ($form_data['id']==357) {
         $selected_theme = get_post_meta($post_id,'wpcf-theme',true);
         if($selected_theme==1){
           $theme_photo = '<em><u>hidden link</u></em>';
         }else if($selected_theme==2){
            $theme_photo = '<em><u>hidden link</u></em>';
         }else if($selected_theme==3){
            $theme_photo = '<em><u>hidden link</u></em>';
         }
      	 update_post_meta($post_id,'wpcf-theme-photo',$theme_photo);
    }
}

- the above code will update the theme-photo as per the theme selection from the form.

Then, I've set the content template to use the theme-photo as background as you can see with the following screenshot:
=> hidden link

Now - whatever new post you will create using the following form it will automatically set the background image for your container as per the selected theme:
=> hidden link

I hope the solution I share will help you to resolve your issue 🙂

[thomasK-12]

This worked brilliantly! Thank you for your help!