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