{% comment %} Ghetto conversion to JSON {% endcomment %}
{% capture groups %}["{{ item.groups | join: '","' }}"]{% endcapture %}
{% if item.extras | size: > 0 %}
  {% capture extras %} picture-item--{{ item.extras | join: " picture-item--" }}{% endcapture %}
{% else %}
  {% assign extras = "" %}
{% endif %}
{% assign description = item.description %}
<figure class="col-{{ item.cols[0] }}@xs col-{{ item.cols[1] }}@sm col-{{ item.cols[2] }}@md picture-item{{ extras }}" data-groups='{{ groups }}' data-date-created="{{ item.date }}" data-title="{{ item.title }}">
  <div class="picture-item__inner">
    <div class="aspect aspect--16x9">
      <div class="aspect__inner">
        <img src="{{ site.baseurl }}/img/{{ item.img }}" alt="" height="145" width="230" />
        <img class="picture-item__blur" src="{{ site.baseurl }}/img/{{ item.img }}" alt="" height="145" width="230" />
      </div>
    </div>
    <div class="picture-item__details clearfix">
      <figcaption class="picture-item__title pull-left"><a href="{{ site.baseurl }}/img/originals/{{ item.original }}" target="_blank">{{ item.title }}</a></figcaption>
      <p class="picture-item__tags pull-right hidden@xs">{{ item.groups | join: ', ' }}</p>
    </div>
    {% if description %}{% if description == 'longDescription' %}{% assign description = site.longDescription %}{% endif %}<p class="picture-item__description">{{ description }}</p>{% endif %}
  </div>
</figure>
