We have 4 social media link fields set up as custom fields for the Freelancer content type. I'm setting up the Freelancer template and adding these fields to display. They are currently displaying the full URL as a text link. I would like to change the output to show icons instead for each social media network. I want them to remain as clickable links. Any advice on how to achieve this in the easiest way? I'm thinking I can edit the output as HTML in some way to change it there. The HTML showing on the field now is:
<div class="tb-field freelancer-twitter" data-toolset-blocks-field="1" data-last-update="1.4">[types field='twitter-link' output='normal' target='_blank' ][/types]</div>
That is yielding the output on the Freelancer page as:
hidden link
How should I set up the HTML for this to show only an icon as a clickable link? Or is there another way to do define the field that would be easier?
Hello,
You can setup the link with HTML codes manually, for example:
<a href="[types field='twitter-link' output='raw'][/types]" target="_blank">Here display the twitter icon</a>
More help:
https://toolset.com/documentation/customizing-sites-using-php/functions/#url
OK, I was able to get that to work. Thanks for the assist there. I set up images for it to use. I used the following code:
<div class="tb-field freelancer-facebook" data-toolset-blocks-field="1" data-last-update="1.4"></div>
Now that leads us to one additional issue with this. By doing it this way, it displays all four social media field icons that we have. But we only want them to display if those fields are defined with URLs. If the fields are left empty with no data, the icons should not appear. So this needs to be conditional based on a check that there is field data present. I'm not sure how to change the field I've set up to a conditional display that will not show it if the field data is empty.
You can view what I have here:
hidden link
For the new question: Now that leads us to one additional issue with this....
You can use [wpv-conditional] shortcode to check if it isn't empty custom field, then display it, for example:
[wpv-conditional if="($(wpcf-facebook-link) nq '')"]
<div class="tb-field freelancer-facebook" data-toolset-blocks-field="1" data-last-update="1.4"><a href="[types field='facebook-link' output='raw'][/types] target=" _blank"=""><i class="fab fa-facebook-square"></i></a></div>
[/wpv-conditional]
https://toolset.com/documentation/legacy-features/views-plugin/checking-fields-and-other-elements-for-emptynon-empty-values/
I tried this on the facebook link and it correctly made the icon and link not display because that field doesn't have any data on our test content.
But then I added it for the other social media types as shown below:
[wpv-conditional if="($(wpcf-twitter-link) nq '')"]
<div class="tb-field freelancer-twitter" data-toolset-blocks-field="1" data-last-update="1.4"></div>
[/wpv-conditional]
[wpv-conditional if="($(wpcf-linkedin-link) nq '')"]
<div class="tb-field freelancer-linkedin" data-toolset-blocks-field="1" data-last-update="1.4"></div>
[/wpv-conditional]
[wpv-conditional if="($(wpcf-youtube-link) nq '')"]
<div class="tb-field freelancer-youtube" data-toolset-blocks-field="1" data-last-update="1.4"></div>
[/wpv-conditional]
Now it is not showing any of the social media icons and links. That isn't working right. On this test content, we have data in the Twitter field and the LinkedIn field. So if these conditionals are working properly, they should eliminate the display of only Facebook and Youtube from that area. instead they are eliminating all of them. I'm not sure if I've done something wrong here but it is likely that I did.
I got it working. It was ne , not nq. Thanks hugely again!
My issue is resolved now. Thank you!
