Skip Navigation

[Resolved] In wpbakery content template: show ICON element conditionally

This support ticket is created 3 years, 9 months ago. There's a good chance that you are reading advice that it now obsolete.

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.

Sun Mon Tue Wed Thu Fri Sat
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Kolkata (GMT+05:30)

This topic contains 20 replies, has 2 voices.

Last updated by dorianS-3 3 years, 9 months ago.

Assisted by: Minesh.

Author
Posts
#1653917

Tell us what you are trying to do?
In building a template for a custom post type, trying to show a WPBakery ICON element ONLY if a URL field from the custom post type has a value. (E.g. show a twitter icon if the twitter URL field was filled out.)

Is there any documentation that you are following?
no.

What is the link to your site?
hidden link

#1653929

Also I realized the URL of the icon is broken.

I enter: {!{types field='ypa-twitter' output='raw'}!}{!{/types}!}
Output is: href="hidden link'!!/types!"

Please advise.

#1653943
EditContentTemplate.png

I think I found a workaround to show the icons conditionally by splitting the [wpv-conditional] shortcode into two text fields and hiding those text fields via CSS. Surely there must be a better way?

The second issue is still there, the URL of the icon is broken.

#1654053

Minesh
Supporter

Languages: English (English )

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

Hello. Thank you for contacting the Toolset support.

The first thing is that you should not wrap WPBakery page builder module with [wpv-conditional] shortcode. That is not suggested and if you use that as workaround, sooner or later it will be broken.

The [wpv-conditional] shortcode should be used in text module and you should add whatever content you want to display within the conditional shortcode.

Having said that you need to wrap the icon module code/html manually.

For example:

{!{wpv-conditional if="( $(wpcf-ypa-twitter) ne '' )"}!}
<div class="vc_icon_element-inner vc_icon_element-color-blue vc_icon_element-size-md vc_icon_element-style- vc_icon_element-background-color-grey"><span class="vc_icon_element-icon fab fa-twitter"></span>
<a class="vc_icon_element-link" href="{!{types field='ypa-twitter' output='raw'}!}{!{/types}!}" title="twitter" target="_self"></a></div>
{!{/wpv-conditional}!}
#1654071

Hello and thank you.

I added the code you provided into a text field, but it get's displayed as text instead of an icon...?!
Please see hidden link again.

Also I'm wondering where to get the icon module code from - do I have to place the icon element on the template, then view one of the posts, copy the source code, add it to the template? That's really complicated.
There must be a comfortable way to conditionally show elements?

#1654077

Minesh
Supporter

Languages: English (English )

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

Also I'm wondering where to get the icon module code from - do I have to place the icon element on the template, then view one of the posts, copy the source code, add it to the template?
==>
Yes. exactly.

There must be a comfortable way to conditionally show elements?
==>
There is no other way and the way you chose by adding conditional statement into two separate text element is one of the workaround but again, that is not the recomonded way as Toolset do not offer any native way to conditional display the WP Bakery page builder elements. You can always file a feature request using the following form;
- https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

#1654079
united-europe.png

Here's a screenshot,please advise how to show the icon there.
Thx

#1654089

Minesh
Supporter

Languages: English (English )

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

Can you please share access details and problem URL so I can see if I can share any workaround.

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

#1654095

Sorry I'm contractually not allowed to give out access.

I don't understand how a div.vc_icon_element is supposed to work inside of a div.wpb_text_column ??
I think a div.vc_icon_element needs to be placed like this:
div.wpb_wrapper > div.vc_icon_element
?

#1654117

Minesh
Supporter

Languages: English (English )

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

The example I shared was just an example. you can create your own HTML that should work and display the twitter icon and add that HTML to conditional display.

I know this is bit complicated but we have limited integration with WP Bakery page builder as you can see with the following integration doc:
=> https://toolset.com/documentation/user-guides/using-toolset-with-wpbakery-page-builder/

The workaround I think of is, you should build your content template first with WPBakery page builder and once you done with that switch to normal content editing mode by clicking on the link "Stop using WPBakery Page Builder for this Content Template" and then you can identify your places where you want to display conditional statements and add types shortcode that will display the dynamic values.

#1654131

On https://toolset.com/documentation/user-guides/using-toolset-with-wpbakery-page-builder/displaying-fields-inside-any-wpbakery-page-builder-element/ it clearly says "As Toolset is integrated with these elements, you can easily insert any custom Fields or Views into any of them." and it's not even possible to link an ICON or BUTTON element to a URL coming from a Toolset field? That's basic stuff to me..

I've now found a way to display the HTML code you provided using a shortcode - please advise on how this icon is not linked?

#1654173

Minesh
Supporter

Languages: English (English )

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

I agree what Doc says but it has some exceptions where icon URL field is not accept the shortcode.

I've now found a way to display the HTML code you provided using a shortcode - please advise on how this icon is not linked?
--
As shared, the URL field of icon does not support the shortcode. So, you need to find a way to assign the dynamic URL.

If you can share what shortcode you are using I can check where we can add dynamic URL.

#1654177

I've added a TEXT BLOCK element including this code:
{!{wpv-conditional if="( $(wpcf-ypa-twitter) ne '' )"}!}[php slug=ypa-twitter-icon]{!{/wpv-conditional}!}

The shortcode-part is added via plugin "PHP Code For Posts" (hidden link) and includes your html bit:
<div class="vc_icon_element-inner vc_icon_element-color-blue vc_icon_element-size-md vc_icon_element-style- vc_icon_element-background-color-grey"><span class="vc_icon_element-icon fab fa-twitter"></span>
<a class="vc_icon_element-link" href="{!{types field='ypa-twitter' output='raw'}!}{!{/types}!}" title="twitter" target="_self"></a></div>

#1654181

Minesh
Supporter

Languages: English (English )

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

If you able to use PHP within your shortcode.

You can change that to:

global $post;

$url = get_post_meta($post->ID,'wpcf-ypa-twitter',true);

 
$str = '<div class="vc_icon_element-inner vc_icon_element-color-blue vc_icon_element-size-md vc_icon_element-style- vc_icon_element-background-color-grey"><span class="vc_icon_element-icon fab fa-twitter"></span>';
$str =  $str.'<a class="vc_icon_element-link" href="'.$url.'" title="twitter" target="_self"></a></div>';

return $str;

You are free to change the code as per your requirement. As you can see we are grabbing the custom field value using get_post_meta() function and using $url variable to display that.

#1654185

Please see hidden link, that only produces an empty text column.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.