<ul class="listing-grid personas {{ columns }} c">
{% for page in pages %}
  {% set first_page = loop.first %}
  <section>
    {% for addon in page %}
      <li>
        <div class="persona hovercard">
          <a href="{{ addon.get_url_path() }}">
            <div class="persona-preview">
              <img {{ 'src' if first_page else 'data-defer-src' }}="{{ addon.persona.thumb_url }}"
                   data-browsertheme="{{ addon.persona.json_data }}" alt="">
            </div>
            <div class="persona-install">
              <button class="add">
                <span>{{ _('Add') }}</span>
              </button>
            </div>
            <h3>{{ addon.name }}</h3>
          </a>
        </div>
      </li>
    {% endfor %}
  </section>
{% endfor %}
</ul>

<ul class="listing-grid personas {{ columns }} c">
{% for page in pages %}
  {% set first_page = loop.first %}
  <section>
    {% for addon in page %}
      <li>
        {{ persona_preview(addon.persona, size='small') }}
      </li>
    {% endfor %}
  </section>
{% endfor %}
</ul>

Use persona preview instead of custom HTML
Use persona preview instead of custom HTML

* Fix #2637
* Fix #2636
