[Resolved] Show image or button if there are content

[Author]

Posts

[avansisI-2]

Hello!
I need to know how an image or button can be displayed depending on whether or not there is content for that field. The data comes from a post form and I want to configure it in the content template.

Can you help me?

[Jamal]

Hello and thank you for contacting the Toolset support.

I assume that you are using the block editor to create the content template, right?
In this case, add a conditional block and set a condition to compare the custom field against an empty static value. Check this screenshot hidden link

Check these tutorials:
- https://toolset.com/course-lesson/using-toolset-conditional-block/
- https://toolset.com/course-lesson/custom-fields-conditional-display/

[avansisI-2]

Hi Jamal,

Thanks for you reply.

In my template content have this imagen (attach screenshot) and I want to if one of them are not filled in on the form that does not appear

[Jamal]

It seems that you want to align all these images(URLs to website social networks) on the same line, right?

I'll suggest using the column block and put every icon on a column. You will have to use a conditional block to check if the URL exists and inside of it you can put the image.

Or you can use a "Fields&Text" block and build the conditional using shortcodes. Check our shortcodes references here https://toolset.com/documentation/programmer-reference/views/views-shortcodes/

If you still find trouble with this, please allow me temporary access to your website and I'll check how to implement that. Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

[Jamal]

I confirm that access is working.

Please share the URL of the content template, the archive template, or the view that you are editing, and the fields that should be used.

Also, explain what images are you using in your screenshot? Is it the social networks block from WordPress?

[avansisI-2]

Hi Jamal,

Template is 'Plantilla para Comercios'

Facebook: facebook
Instagram: instagram
Web: sitio_web
WhatsApp: whatsapp

Is a custom image.

Thanks

[Jamal]

As you are adding the icons from a "Fields&Text" block, we'll need to use the conditional shortcode instead of the conditional block.
Check this screencast, I wrapped the website icon inside of the conditional shortcode using the "IF" button in the "Fields&Text" block
hidden link

I'll let you do the same with the other icons.

I hope this helps. Let me know if you have any questions.

[avansisI-2]

Thanks Jamal for your video.

I try to repeat this but I have an issue. My code is this

  [wpv-conditional if="  ( ( $(wpcf-sitio_web) != '' ) ) " ]
  <a href="<em><u>hidden link</u></em> field='sitio_web' output='raw'][/types]" data-wplink-url-error="true"><img class="alignnone wp-image-5624" src="<em><u>hidden link</u></em>" alt="web" width="45" height="45"></a>[/wpv-conditional]
[wpv-conditional if="  ( ( $(wpcf-facebook) != '' ) ) " ]<a href="<em><u>hidden link</u></em> field='facebook' output='raw'][/types]" data-wplink-url-error="true"><img class="alignnone  wp-image-5625" src="<em><u>hidden link</u></em>" alt="Facebook" width="49" height="49"></a>[/wpv-conditional]
  
[wpv-conditional if="  ( ( $(wpcf-instagram) != '' ) ) " ]<a href="<em><u>hidden link</u></em> field='instagram' output='raw'][/types]" data-wplink-url-error="true"><img class="alignnone  wp-image-5626" src="<em><u>hidden link</u></em>" alt="Instagram" width="45" height="45"></a>[/wpv-conditional]

If there is an empty field like the one in the example, the icon is still displayed.

In the facebook field and instagram the url eliminates two points in https:// and show https// therefore the link is wrong.

What can it be? in the backend is the url correctly

[Jamal]

The shortcodes are correct, I checked several posts and they do not have any information for the fields (site, facebook, etc). I found some that do have a website, but it is introduced incorrectly. They do not start with http:// or https:// check this screenshot hidden link

Then you can remove the http:// from the code, for example:

<a href="[types field='sitio_web' output='raw'][/types]" data-wplink-url-error="true"><img class="alignnone wp-image-5624" src="<em><u>hidden link</u></em>" alt="web" width="45" height="45"></a>

Instead of:

<a href="<em><u>hidden link</u></em> field='sitio_web' output='raw'][/types]" data-wplink-url-error="true"><img class="alignnone wp-image-5624" src="<em><u>hidden link</u></em>" alt="web" width="45" height="45"></a>

If you still encounter any issue, please provide an example of a post(the url of the post in the frontend or the backend) and explains what would you expect.

[avansisI-2]

My issue is resolved now. Thank you!