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.

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 | |
  • 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. – CreateSean Nov 13 '16 at 18:00
  • Updated answer. – Brad Bell Nov 13 '16 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. – CreateSean Nov 13 '16 at 19:09
1

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

| improve this answer | |
  • 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. – CreateSean Nov 13 '16 at 17:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.