[Resolved] How to display CRED Generic checkboxes field with image as label

[Author]

Posts

[Timothy]

I've created a CRED form with a generic checkbox field that outputs a list of posts as the options. I'm using a View to create the values/labels. This works fine for outputting the post titles. But I'd like to have the labels be an image field from each post. I'm not having any luck yet. Here's my View:

<wpv-loop>[wpv-item index=1]{"value":"[wpv-post-id]","label":"<img src="[types field='element-image' size='medium' url='true' resize='crop'][/types]">"}[wpv-item index=other],{"value":"[wpv-post-id]","label":"<img src="[types field='element-image' size='medium' url='true' resize='crop'][/types]">"}</wpv-loop>

I assume the label needs to be a string, so the image is probably causing this issue. Is there another way I can get this to work?

For reference, this is the CRED content:

[credform class="cred-form cred-keep-original"]
[cred_generic_field field='TestCheckboxes2' type='checkboxes' class='' urlparam='']
{
"required":0,
"validate_format":0,
"default":[],
"options":[
[wpv-view name="website-wizard-view-1"]
]
}
[/cred_generic_field]


[cred_field field="form_submit" value="Submit" urlparam=""]
[/credform]

Tim

[Minesh]

Hello. Thank you for contacting the Toolset support.

Could you please share the problem URL where you've added the above CRED form?

[Timothy]

Sure:

goo.gl/ncaAzq

Tim

[Minesh]

Well - the link you shared is not working at this end.

Could you please share correct site URL.

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

[Minesh]

Indeed - there looks like some issue rendering checkboxes options using the view. I've reported this to our next level support.

Please hold on for further updates, I will get in touch with you as soon as possible.

[Minesh]

I just wanted to update you that the issue has been confirmed and our developers will soon address it. Please hold on for further updates.

[Timothy]

Ok, thanks. But does this mean I have to wait until the next CRED plugin update or do you mean they are looking into a workaround?

Tim

[Minesh]

Can I have problem URL and temporary access to your site.

*** 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]

After debugging this too much finally I found the solution for you.

I've changed your view code as given under and now you can see image is rendered using the checkboxes:

[wpv-layout-start][wpv-items-found]<!-- wpv-loop-start --><wpv-loop>[wpv-item index=1]{"value":"[wpv-post-id]","label":"<img src=[types field='element-image' size='medium' url='true' resize='crop'][/types] >"}[wpv-item index=other] ,{"value":"[wpv-post-id]","label":"<img src=[types field='element-image' size='medium' url='true' resize='crop'][/types] >"}</wpv-loop><!-- wpv-loop-end -->[/wpv-items-found][wpv-layout-end]

Could you please check and confirm it works at your end as well.

[Timothy]

Outstanding! It works. But what was the issue? I can't see what is the difference between your Views code and mine.

Tim

[Minesh]

Well - if you see your code there is mix of " " (double quotes) and '' (single quotes) used.

As you can see with the code I provided, please check how image field is rendered now, its not using "" (double quotes) with src:

"<img src=[types field='element-image' size='medium' url='true' resize='crop'][/types] >"

[Minesh]

I hope you spot the difference or you can try some online string comparison to check the difference between previous code and current code.

[Timothy]

Thank you.