[Closed] Social Media Links for Directory

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 11 replies, has 2 voices.

Last updated by Christian Cox 2 months, 4 weeks ago.

Assigned support staff: Christian Cox.

Author
Posts
#1578543

I would like to add social media links to a directory listing. For example as they complete the form they choose the platform such as instagram and then add there link. If they have an entry it displays on the front end as an icon.

Please help, last thing i need to do before launching! i think!

#1578693

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

Hello, there's nothing exactly like this built-in to Toolset, but you could create something similar. You can add custom URL fields for each social media platform like Facebook or Instagram. Then on the front-end of the site, you can use conditionals to display each URL as a link. You'll have to import icons for each social media platform. I can help you create the HTML to display a linked image if you need assistance with that. Let me know if you have questions about how this would work.

#1578761

Hi Christian,

Thanks for getting back to me. Ok so i have created 4 fields for FB, IG, Twitter and LinkedIn. So how do i now set them to display as a relevant social media icon for each network and also only display if a value is in the field.

Thanks

Neil

#1578859

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

First you will download icons for each platform and store those in your site's Media Library. Note the URL of each icon, you will need that later. Then you'll create a conditional for each icon/custom field. The conditional should test the value of the corresponding custom field. If the value of the field is not equal to an empty string, you will display the icon as a link to the custom field value. Let's assume your Facebook field slug is fb-link. In the classic editor, the conditional will look like this:

[wpv-conditional if="( $(wpcf-fb-link) ne '')"]
<a href="[types field='fb-link' output='raw'][/types]"><img src="yoursite.com/path/to/fbicon.jpg" /></a>
[/wpv-conditional]

Adjust the image src path to match the URL of your FB icon image from the Media Library, and adjust fb-link to match your actual field slug.
When that is working, copy + paste the entire conditional to create 3 more conditionals and adjust the field slugs and icon paths as needed.

#1580285

I think i am being a bit dumb. I am trying to do this using the blocks plugin, is there an option to add this in here or a place to enter the code?

#1583113

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

Okay in the Blocks Editor you'll handle it like this:
- Insert a Conditional block
- Use the conditional builder to set up a condition based on one of the social media link fields being NOT empty. See not-empty.png for an example
- Add a Toolset Image block inside the conditional block. Instead of using a Dynamic Source, select your social media icon from the Media Library
- In the image block settings on the right column of the Block Editor, use the Link Settings panel to create a link using a Dynamic Source. For the source, choose the social media link field corresponding to the icon you chose from the Media Library.
- Repeat this process for each possible social media icon

#1583291

Amazing, thank you so much. Last question on this, is there a way to align them inline. I tried using 4 columns for 4 icons but still quite a big gap?

#1584147

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

The grid block is the most effective way to align items in a row with multiple columns like this. Maybe you could try adding more columns so each individual column is smaller? You could also try scaling down each image to a specific height so the icons are more consistent. To some degree it will depend on the image files as well, how much space is saved around the image will affect the final dimensions.

#1585331

Ok nearly there, i created a grid and added each social media icon into its own grid section which had a conditional rule applied based on if the custom field the image is linked to is empty... Great works fine....

BUT.... if the field is empty and the icon does not display then it leaves a gap.... hidden link for example the have Facebook (grid1) no Instagram (grid2) and then they do have Twitter (grid3)

If they have the icons in the right order then that works but how do i lose the gap if no data is found?

#1585429

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

There's no way to conditionally hide a grid column based on its contents (or lack thereof), so I don't have a great solution for this. I suppose you could display a similar but dimmed-out version of the icon without a link instead of the current linked icon. That would keep the spacing consistent, since there would always be an image there.

#1585495

That's a good idea actually as we help support businesses who need social media support and setups. Is there a way to dim or change an icon in the field based on if the field is empty ?

#1585723

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

If there were an opacity setting on the image block that would make it a lot easier, but unfortunately you'll have to use a bit of CSS to achieve this. First, you'll create a conditional that tests for an empty string. The conditional configurations will be identical to those in the previous screenshot except you will deactivate the "NOT" control in the top right corner of the screenshot here: https://toolset.com/forums/topic/social-media-links-for-directory/#post-1583113

Inside that conditional block, place an image block that contains the same icon image. In the image block settings on the right column, open the "Advanced" panel and add a CSS class tssupp-opacity-50. Be sure to press return after typing or pasting the value so it is completely added. Then in your Content Template, open the CSS editor and paste the following code:

.tssupp-opacity-50 img {
  opacity: .5;
}

That should display a slightly transparent version of the icon when the image field is empty.

The topic ‘[Closed] Social Media Links for Directory’ is closed to new replies.