simple-s3-gallery/templates/card.html

41 lines
1.1 KiB
HTML
Raw Normal View History

2023-12-29 03:14:10 +00:00
<div class="col">
<div class="card shadow-sm">
2023-12-29 04:40:33 +00:00
<div class="card-header">
2023-12-29 05:25:35 +00:00
<span class="flex">{{ gallery.title }}</span>
2023-12-29 03:14:10 +00:00
<a
href="#"
2023-12-29 04:40:33 +00:00
class="btn btn-link float-end"
2023-12-29 03:14:10 +00:00
data-bs-toggle="tooltip"
data-bs-placement="top"
data-bs-title="Add a reaction"
>
2023-12-29 04:40:33 +00:00
<i class="bi-heart-fill text-end" style="font-size: 1rem; color: pink;"></i>
2023-12-29 03:14:10 +00:00
</a>
</div>
<img
class="card-image-top"
2023-12-29 05:25:35 +00:00
width="{{ gallery.width | default('100%') }}"
height="{{ gallery.height | default('225') }}"
src="{{ gallery.src }}"
alt="{{ gallery.alt_text if gallery.alt_text else gallery.title }}"
2023-12-29 03:14:10 +00:00
/>
<div class="card-body">
2023-12-29 05:25:35 +00:00
<p class="card-text">{{ gallery.description | default('') }}</p>
2023-12-29 03:14:10 +00:00
</div>
<div class="card-footer text-body-secondary text-end">
2023-12-29 05:25:35 +00:00
{% if gallery.reactions %}
{% for reaction in gallery.reactions %}
2023-12-29 03:14:10 +00:00
{# TODO: limit total number of reactions shown #}
<span class="badge rounded-pill">
2023-12-29 04:40:33 +00:00
<i class="bi-{{ reaction }}" style="color: black;"></i>
2023-12-29 03:14:10 +00:00
</span>
{% endfor %}
{% endif %}
</div>
</div>
</div>