[Resolved] Hiding icon graphic when form field is empty

[Author]

Posts

[elizabethF-3]

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

[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

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