Skip Navigation

[Resolved] Hiding icon graphic when form field is empty

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.

Our next available supporter will start replying to tickets in about 1.00 hours from now. Thank you for your understanding.

This topic contains 2 replies, has 2 voices.

Last updated by Waqar 1 month, 1 week ago.

Assigned support staff: Waqar.

Author
Posts
#1913687

Potential members have the option to include social media links on their submission form. Once I have published the member to the site, I only want to see the icons associated with a provided link. So if, for example, the options are Facebook, Twitter, and Instagram and the member only includes an Instagram link, that is the only icon I want to see on their page. I have been unable to hide the unused icons and clicking on the "blank" icon refreshes the member's page.

This is an example of one of the profile pages:
hidden link

Submission form:
hidden link

#1914101

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

Thank you for contacting us and I'd be happy to assist.

From the output of the form, it doesn't seem to be using the Toolset's Form.

And from the output of the social icons too, it is not clear exactly how they are being shown in the single member's template.

In the case of Toolset Type's custom fields, you can use conditional output, to show or hide the content based on the values:
https://toolset.com/documentation/legacy-features/views-plugin/checking-fields-and-other-elements-for-emptynon-empty-values/

If you could share temporary admin login details, I'll be in a better position to analyze the setup and suggest accordingly.

Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.

regard,
Waqar

#1918609

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Thank you for sharing the admin access.

I've noticed that the custom fields for the social profiles are not being managed by Toolset Types, which is why the "$" variable method will not work for the conditional evaluations.

You can use the "wpv-post-field" shortcode that you're using to show these custom field values, in the conditional evaluations too.
( ref: https://toolset.com/documentation/legacy-features/views-plugin/using-shortcodes-in-conditions/ )

Old code:


[wpv-conditional if="( $(wpcf-wpt-mem-facebook) eq '' )"]<a href="[wpv-post-field name='facebook']" target="_blank" rel="noopener noreferrer">
<img src="<em><u>hidden link</u></em>" width="30" height="30" class="size-full" />
</a>[/wpv-conditional]
[wpv-conditional if="( $(wpcf-wpt-mem-twitter) eq '' )"]<a href="[wpv-post-field name='twitter']" target="_blank" rel="noopener noreferrer">
<img src="<em><u>hidden link</u></em>" width="30" height="30" class="size-full" />
</a>[/wpv-conditional]
[wpv-conditional if="( $(wpcf-wpt-mem-linkedin) eq '' )"]<a href="[wpv-post-field name='linkedin']" target="_blank" rel="noopener noreferrer"> 
  <img src="<em><u>hidden link</u></em>" width="30" height="30" class="size-full" />
</a>[/wpv-conditional]
[wpv-conditional if="( $(instagram) eq '' )"]<a href="[wpv-post-field name='instagram']" target="_blank" rel="noopener noreferrer">
  <img src="<em><u>hidden link</u></em>" width="30" height="30" class="size-full" />
</a>[/wpv-conditional]<br>
[wpv-conditional if="( $(wpcf-wpt-mem-other-link) eq '' )"]<a href="[wpv-post-field name='other_link']" target="_blank" rel="noopener noreferrer">
Additional Website</a>
[/wpv-conditional]

Updated code:


[wpv-conditional if="( '[wpv-post-field name='facebook']' ne '' )"]<a href="[wpv-post-field name='facebook']" target="_blank" rel="noopener noreferrer">
<img src="<em><u>hidden link</u></em>" width="30" height="30" class="size-full" />
</a>[/wpv-conditional]
[wpv-conditional if="( '[wpv-post-field name='twitter']' ne '' )"]<a href="[wpv-post-field name='twitter']" target="_blank" rel="noopener noreferrer">
<img src="<em><u>hidden link</u></em>" width="30" height="30" class="size-full" />
</a>[/wpv-conditional]
[wpv-conditional if="( '[wpv-post-field name='linkedin']' ne '' )"]<a href="[wpv-post-field name='linkedin']" target="_blank" rel="noopener noreferrer"> 
  <img src="<em><u>hidden link</u></em>" width="30" height="30" class="size-full" />
</a>[/wpv-conditional]
[wpv-conditional if="( '[wpv-post-field name='instagram']' ne '' )"]<a href="[wpv-post-field name='instagram']" target="_blank" rel="noopener noreferrer">
  <img src="<em><u>hidden link</u></em>" width="30" height="30" class="size-full" />
</a>[/wpv-conditional]<br>
[wpv-conditional if="( '[wpv-post-field name='other_link']' ne '' )"]<a href="[wpv-post-field name='other_link']" target="_blank" rel="noopener noreferrer">
Additional Website</a>
[/wpv-conditional]