Skip to main content
added 784 characters in body
Source Link
CreateSean
  • 2k
  • 17
  • 34
<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="#"href="{{ socialMedia.flickr }}" target="_blank"><i class="fa fa-flickr" aria-hidden="true"></i></a></li>
  {% endif %}

  {% if socialMedia.instagram | length %}
  <li><a href="#"href="{{ socialMedia.instagram }}" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
  {% endif %}

  {% if socialMedia.email | length %}
  <li><a href="#"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="#"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="#"href="{{ socialMedia.youtube }}" target="_blank"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
  {% endif %}

  {% if socialMedia.linkedin | length %}
  <li><a href="#"href="{{ socialMedia.linked }}" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
  {% endif %}

  {% if socialMedia.tumblr | length %}
  <li><a href="#"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="#"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="#"href="{{ socialMedia.dribble }}" target="_blank"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
  {% endif %}
</ul>
<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 %}

  <li><a href="#" target="_blank"><i class="fa fa-flickr" aria-hidden="true"></i></a></li>

  <li><a href="#" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>

  <li><a href="#" target="_blank"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li>

  <li><a href="#" target="_blank"><i class="fa fa-vimeo-square" aria-hidden="true"></i></a></li>

  <li><a href="#" target="_blank"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>

  <li><a href="#" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>

  <li><a href="#" target="_blank"><i class="fa fa-tumblr-square" aria-hidden="true"></i></a></li>

  <li><a href="#" target="_blank"><i class="fa fa-google-plus-official" aria-hidden="true"></i></a></li>

  <li><a href="#" target="_blank"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>

</ul>
<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>
Source Link
CreateSean
  • 2k
  • 17
  • 34

Create an Array in Twig and loop through fields in global set

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 %}

  <li><a href="#" target="_blank"><i class="fa fa-flickr" aria-hidden="true"></i></a></li>

  <li><a href="#" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>

  <li><a href="#" target="_blank"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li>

  <li><a href="#" target="_blank"><i class="fa fa-vimeo-square" aria-hidden="true"></i></a></li>

  <li><a href="#" target="_blank"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>

  <li><a href="#" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>

  <li><a href="#" target="_blank"><i class="fa fa-tumblr-square" aria-hidden="true"></i></a></li>

  <li><a href="#" target="_blank"><i class="fa fa-google-plus-official" aria-hidden="true"></i></a></li>

  <li><a href="#" target="_blank"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>

</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.