moanos/Notfellchen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(bulma): make thumbnail row use same width images and crop when necessary

Browse Source
This commit is contained in:
moanos [he/him]
2025-05-18 13:16:47 +02:00
parent 2e4f63b250
commit f5b89456ab
2 changed files with 55 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/fellchensammlung/static/fellchensammlung/css/bulma-styles.css
View File

@@ -63,6 +63,28 @@
IMAGES
*****/
.crop {
#my-gallery .main-photo img {
width: 100%;
height: 300px;
object-fit: cover;
border-radius: 6px;
}
.thumbnail-row {
display: flex;
gap: 10px;
margin-top: 10px;
}
.thumbnail img {
width: 100%;
height: 80px;
object-fit: cover;
border-radius: 4px;
}
/* Ensure each thumbnail takes equal width */
.thumbnail {
flex: 1;
}

60
src/fellchensammlung/templates/fellchensammlung/partials/bulma-partial-animal-card.html
View File

@@ -13,45 +13,49 @@
</div>
</div>
<div class="card-content">
<div class="content">
{% if animal.description %}
{% if animal.description %}
<div class="content">
<p>{{ animal.description | render_markdown }}</p>
{% endif %}
</div>
<div class="cell block" id="my-gallery">
<div class="grid">
<div class="cell is-col-span-3">
{% with photo=animal.get_photos.0 %}
<a href="{{ MEDIA_URL }}/{{ photo.image }}"
data-pswp-width="{{ photo.image.width }}"
data-pswp-height="{{ photo.image.height }}"
target="_blank">
<img class="image is-square" src="{{ MEDIA_URL }}/{{ photo.image }}"
alt="{{ photo.alt_text }}">
</a>
{% endwith %}
</div>
{% endif %}
<div id="my-gallery">
{% with photo=animal.get_photos.0 %}
<div class="main-photo">
<a href="{{ MEDIA_URL }}/{{ photo.image }}"
data-pswp-width="{{ photo.image.width }}"
data-pswp-height="{{ photo.image.height }}"
target="_blank">
<img src="{{ MEDIA_URL }}/{{ photo.image }}"
alt="{{ photo.alt_text }}">
</a>
</div>
{% for photo in animal.get_photos %}
<div class="cell">
{% endwith %}
<div class="thumbnail-row">
{% for photo in animal.get_photos|slice:"1:4" %}
<div class="thumbnail">
<a href="{{ MEDIA_URL }}/{{ photo.image }}"
data-pswp-width="{{ photo.image.width }}"
data-pswp-height="{{ photo.image.height }}"
target="_blank">
<img class="image is-square crop" src="{{ MEDIA_URL }}/{{ photo.image }}"
<img src="{{ MEDIA_URL }}/{{ photo.image }}"
alt="{{ photo.alt_text }}">
</a>
</div>
{% endfor %}
</div>
</div>
<!--- Assume a user does not have edit permissions on animal if they have no other edit permission --->
{% if has_edit_permission %}
<div class="card-footer">
<a class="card-footer-item button"
href="{% url 'animal-edit' animal_id=animal.pk %}">{% translate 'Bearbeiten' %}</a>
<a class="card-footer-item button"
href="{% url 'animal-add-photo-bulma' animal_id=animal.pk %}">{% translate 'Foto hinzufügen' %}</a>
</div>
{% endif %}
</div>
<!--- Assume a user does not have edit permissions on animal if they have no other edit permission --->
{% if has_edit_permission %}
<div class="card-footer">
<a class="card-footer-item button"
href="{% url 'animal-edit' animal_id=animal.pk %}">{% translate 'Bearbeiten' %}</a>
<a class="card-footer-item button"
href="{% url 'animal-add-photo-bulma' animal_id=animal.pk %}">{% translate 'Foto hinzufügen' %}</a>
</div>
{% endif %}
</div>
</div>