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.
    – CreateSean
    Commented Nov 13, 2016 at 18:00
  • Updated answer.
    – Brad Bell ♦
    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.
    – CreateSean
    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.
    – CreateSean
    Commented Nov 13, 2016 at 17:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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