Showing/hiding linked images from CMS content

Hello dear community,

I used the CMS to collect data about my team members, including links to their social profiles. What I cannot figure out is how (or whether) I can add an image with an icon for each of these links instead of displaying them as plain URl in the collection item I created to display them on the page. Any hints?

Thank you!
Chiara


Here is my public share link: https://preview.webflow.com/preview/packator?preview=8e9d3d61999a8aa477c21d247d8cc555

Hey @chiaravet,

This can be done as simple as inserting a link block element with a background image of a social media icon. In your link block settings on the right side of your designer mode, check the box for 'Get URL from (the collection where your social media links are added, could be ‘authors’ or ‘team members’) and then select ‘Open in a new tab’.

Hope this helps.

Best,
Naweed

Hi Naweed,

thank you so much for your help! This indeed got me one step closer, but I have now the problem that each team member has different contacts they want to show, and by going the way you suggested the icon is shown for all team members. Any idea how I can fix that?

Cheers
Chiara

Hey Chiara,

You’re very welcome.

Sorry for the late reply. Now you need to setup conditional visibility for each social media icon.

Best example I can give you is via screenshot. On my website, the video section is only displayed if the video URL is set in the CMS post. Otherwise, if the video URL is not set, then the video section won’t and the page reverts to a normal blog post. Same logic for what you need to do.

Hope this helps.

Naweed

Naweed, you made it :slight_smile:

Thank you so much, now it behaves exactly how I wanted, I could have never made it without your help!

Have a good day,
Chiara

You’re very welcome, Chiara :smiley:

Have a great week :metal:

Kind regards,
Naweed