Cacher is the code snippet organizer for pro developers

\!h ----- image

{{ article.image | img_url: 'master' }}

\!h ----- excerpt

{% if article.excerpt.size > 0 %}{{ article.excerpt }}{% else %}{{ article.content | strip_html | truncate: 50 }}{% endif %}

\!h ----- prev next count

<div class="article-navigation-hold">
    
    <a href="{{ blog.url }}" class="btn btn--secondary btn--has-icon-before return-link">Back to all posts</a>

    <div class="article-prev-next-hold">
        {% if blog.previous_article %}<a href="{{ blog.previous_article }}" class="btn article-prev">Prev</a>{% endif %}
        {% if blog.next_article %}<a href="{{ blog.next_article }}" class="btn article-next">Next</a>{% endif %}
    </div>

    {% assign count = 0 %}
    {% for post in blog.articles %}
        {% assign counter = counter | plus: 1 %}
        {% if post.id == article.id %}
            {% break %}
        {% endif %}
    {% endfor %}

    <div class="article-counter">
        {{ counter }}/{{ blog.articles_count }}
    </div>

</div>

\!h ----- related articles

{
  "type": "checkbox",
  "id": "show_related_articles",
  "label": "Related articles",
  "default": true
},
{
  "type": "text",
  "id": "related_articles_count",
  "label": "Related articles count",
  "default": "3"
}
    
{% if section.settings.show_related_articles %}

  <div class="see-also">
      <div class="title-row text-center"><h4>See also</h4></div>
      <ul class="grid-three-columns">

          {% assign current = article.id %}
          {% assign count = 0 %}
          {% assign articlesCount = section.settings.related_articles_count %}
          
          <script>

              function fisherYates ( myArray ) {
                  var i = myArray.length,j,temp;
                  if (i === 0) return false;
                  while (--i) {
                      j = Math.floor(Math.random()*(i+1));
                      temp = myArray[i];
                      myArray[i] = myArray[j]; 
                      myArray[j] = temp;
                  }
              }

              var articles = new Array();
              var articlesCount = {{ articlesCount }};

              {% for article in blogs[blog.handle].articles %}
                  {% unless article.id == current %}
                      articles[{{ count }}] = "<li><div class=\"item-blog\"><a class=\"visual\" href=\"{{ article.url }}\" style=\"background-image: url({{ article.image | img_url: 'master' }})\"></a><div class=\"body-item-blog\"><h4 class=\"title-item\"><a href=\"{{ article.url }}\">{{ article.title }}</a></h4><p><i>{% if article.excerpt.size > 0 %}{{ article.excerpt }}{% else %}{{ article.content | strip_html | truncate: 50 }}{% endif %}</i></p></div></div></li>";
                      {% assign count = count | plus:1 %}
                  {% endunless %}
              {% endfor %}
              
              fisherYates(articles);
              for(var i=0;i<articlesCount;i++) {
                  if( articles[i] != 'undefined' ){
                      document.write(articles[i]);    
                  }
              }
          </script>

      </ul>
  </div>
{% endif %}