horizontal_card_list.html

{% load static wagtailcore_tags wagtailuserbar wagtailimages_tags static my_tags %}


<section class="card-list">
  <div class="wrapper">
    {% comment %} TODO: Add more link toggle and config {% endcomment %}
    <div class="more">
      <a href="/articles">more essays</a>
    </div>
    <div class="container">
      {% if self.pages %}
          {% pageChooserBlockListToProperPages self.pages as pages %}
      {% endif %}

      {% for obj in pages %}
      <a href="{% pageurl obj %}">
        {% image obj.image height-600 as tmp_photo %}
        <div class="card" {% if obj.image %}style="background-image:linear-gradient(
            rgba(255, 86, 255, 0.3),
            rgba(55, 143, 255, 0.3)
          ),url({{tmp_photo.url}});"{% endif %}>
          <div class="content">
          <span>{{obj.title}}</span>
          </div>
        </div>
      </a>
      {% endfor %}
    </div>
  </div>
</section>