0

So I've created a globals set (socialMedia) with 10 input fields, but this could grow in the future, for clients to add links to various social media accounts. This works fine except that the code for this seems overly long and reptitive since I need to put a conditional to check if each field has been output. Like this:

<ul class="social list-inline"> {% if socialMedia.facebook | length %} <li><a href="{{ socialMedia.facebook }}" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> {% endif %} {% if socialMedia.twitter | length %} <li><a href="{{ socialMedia.facebook }}" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> {% endif %} {% if socialMedia.flickr | length %} <li><a href="{{ socialMedia.flickr }}" target="_blank"><i class="fa fa-flickr" aria-hidden="true"></i></a></li> {% endif %} {% if socialMedia.instagram | length %} <li><a href="{{ socialMedia.instagram }}" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a></li> {% endif %} {% if socialMedia.email | length %} <li><a href="{{ socialMedia.email }}" target="_blank"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li> {% endif %} {% if socialMedia.vimeo | length %} <li><a href="{{ socialMedia.vimeo }}" target="_blank"><i class="fa fa-vimeo-square" aria-hidden="true"></i></a></li> {% endif %} {% if socialMedia.youtube | length %} <li><a href="{{ socialMedia.youtube }}" target="_blank"><i class="fa fa-youtube" aria-hidden="true"></i></a></li> {% endif %} {% if socialMedia.linkedin | length %} <li><a href="{{ socialMedia.linked }}" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li> {% endif %} {% if socialMedia.tumblr | length %} <li><a href="{{ socialMedia.tumblr }}" target="_blank"><i class="fa fa-tumblr-square" aria-hidden="true"></i></a></li> {% endif %} {% if socialMedia.googlePlus | length %} <li><a href="{{ socialMedia.googlePlus }}" target="_blank"><i class="fa fa-google-plus-official" aria-hidden="true"></i></a></li> {% endif %} {% if socialMedia.dribble | length %} <li><a href="{{ socialMedia.dribble }}" target="_blank"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li> {% endif %} </ul>

Ideally I could set an array and then do a for loop and output everything as needed in a couple of lines. However I'm not sure how to proceed with that or if it is even possible.

Improve this question

2 Answers 2

Reset to default
2

Seems like a great use case for a Twig macro. Completely untested, but something like this:

{% macro social(object, type) %} {% set value = attribute(object, type) %} {% if value | length %} <li><a href="{{ value }}" target="_blank"><i class="fa fa-{{ type }}" aria-hidden="true"></i></a></li> {% endif %} {% endmacro %} {% import "myMacros.html" as myMacros %} {% set socialArray = ['facebook', 'twitter', 'instagram', 'vimeo', 'youtube'] %} {% for socialType in socialArray %} {{ myMacros.social(socialMedia, socialType) }} {% endfor %}
Improve this answer
3
  • Brad, that looks like what I'm trying to do. I'm probably being dense here, but I'm not sure how I grab from each of the fields in the socialMedia global. I'm still very much a noob with Craft and twig. Commented Nov 13, 2016 at 18:00
  • Updated answer. Commented Nov 13, 2016 at 18:18
  • Brad, this works perfectly thank you. Did notice that some of the font-awesome classes have dashes in the name for example vimeo-square which won't work since handles in Craft can't have dashes. I've switched to classes without dashes, but would like to know if there is a work around for that. Commented Nov 13, 2016 at 19:09
1

Why not just use a single table field or SuperTable (plugin) field and iterate over its rows?

Improve this answer
1
  • Trying to avoid 3rd party plugins so no supertable. And regular table doesn't have a dropdown option to have clients select social media for that row. Commented Nov 13, 2016 at 17:48

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.