{% extends 'base.html' %}

{% load pagination_tags %}

{% block content%}
<div style="display: flex; width: 101%; flex-wrap: wrap; justify-content: space-between; ">
{% for image in all %}
  <div class="block" style="margin-bottom: 1em; width: 20em; height: 20em; padding: 0.5em; float: left; position:relative; flex-wrap: wrap; ">  
  <a href="{% url 'image_detail' pk=image.pk %}"><img style="position: absolute; bottom: 1em; right: 1em; "  src="/media/images{{ image.thumb_name }}" padding=3%></a>
  <span style="display:inline-block; position:absolute;top:30px; left:0px; background-color:rgba(230, 230, 230,.4); padding:10px 30px;" >
  <a href="{% url 'image_detail' pk=image.pk %}">{{ image.name }}</a></span>
  </div>
{% endfor %}
</div>

{% endblock content %}