What to Use as Social Media Field Name/ID in Layout Template

[Molly Jepson]

I'm trying to edit the Profile layout template so that different things are displayed for each Social Website that's filled out in the profile. I thought it would be as simple as {if $[user.social_network.name] == "..."}, but nothing is displaying when I put the proper name in the field. Is there a different way I should be doing this?

[Brian]

Hi, Molly Jepson.

Unfortunately the only thing the variables can generate other than the links is the URLs those links lead to. There's no class or title that contains a name that can be referenced in an if statement. Sorry!

[Molly Jepson]

Ah okay. So there is no way to have it display, say, the icon for the respective site instead of the site's name because the boxes don't have specific names or IDs? (Just to be sure I properly understand)

[Brian]

Not through the templates, but you may be able to use CSS to accomplish this by targeting only links targeting those specific URLs.

For example, this would target only links that contain "facebook.com" in the URL and change them to only display the background image you specify:

a[href~="facebook.com"] {
    display: block;
    height: 32px;
    width: 32px;
    font-size: 0;
    background-image: url(IMAGE URL);
}

The selector will need to be more specific than that to target just the links on that page, but it should get the job done.

[Molly Jepson]

This is helpful, I'll give it a try. Thank you!

[Molly Jepson]

Aug 16, 2016 14:00:21 GMT -8 Brian said:

Not through the templates, but you may be able to use CSS to accomplish this by targeting only links targeting those specific URLs.

Thank you very much for this solution, it did accomplish what I was hoping to.

There's one more element we'd like to add to this, but I'm mostly sure this won't work the way this is set up, which is fine if there's no way to do it. Is there any way to have the title/tooltip display the username entered for that link when the link is hovered over? Or would that go back to the thing of not having an ID that can be referenced?

[Molly Jepson]

bump

[Ulises]

So when you hover over the image you want the user link of the user to be displayed? Can you link to a post that has the image and maybe a screenshot of what exactly you need? I'm thinking its gonna go back to the same issue of not having an ID but maybe there is another way.

[Molly Jepson]

Yes, what I'd like to happen is that when you hover over the icon, whatever username they have put in would display in the tooltip. It probably will go back to that ID issue, but if there's a workaround to be found you guys would know better than me, haha.



This is a user profile on my test site (the images have not been created yet so placeholders are there instead). The upper section of blocks is the Social Media icons (Facebook, etc). Nothing happens when you hover over them except for the cursor turning into a clickable pointer. The lower block with the tooltip example is the Instant Messenger icons (Skype, etc). Those DO have an ID that can be referenced, so they function the way I'd like for the Social Media icons to.

[Brian]

The only way to do that would be to analyze each link using Javascript or jQuery and add the tooltip based on what you can find in the URL, most likely using the .split() method in Javascript.

[Molly Jepson]

Ah, I see. That's all right then, the icon workaround will suffice for what I'd like to do. Thank you both for the help!