Skip Navigation

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

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

This topic contains 7 replies, has 2 voices.

Last updated by thomasK-12 1 month, 1 week ago.

Assigned support staff: Minesh.

Author
Posts
#1727611

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

#1727951

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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.

#1728005

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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?

#1728121

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

#1728123

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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.

#1728323

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!

#1729077

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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 🙂

#1743907

This worked brilliantly! Thank you for your help!