fix: gallery

This commit is contained in:
Tobias Reisinger 2020-02-03 01:39:26 +01:00
parent d6cd4628d8
commit 0596f600a5
3 changed files with 27 additions and 12 deletions

View file

@ -21,6 +21,7 @@ body, #wrapper
.card-columns
{
column-gap: 1em;
column-count: 2;
}
.card-columns.card
@ -28,14 +29,6 @@ body, #wrapper
margin-bottom: 1em;
}
@media (min-width: 576px)
{
.card-columns
{
column-count: 2;
}
}
@media (min-width: 768px)
{
.card-columns

View file

@ -15,12 +15,34 @@
{% else %}
<hr class="my-4">
{% endif %}
<a href="{{ child.url }}">
<a class="text-decoration-none" href="{{ child.url }}">
<h4 class="text-body">
{{ child.title }}
</h4>
<span class="text-body">
{{ child.content }}
</span>
<div class="card-columns">
{% for media_item in child.media.images[:10] %}
{% for media_item in child.media.images[:5] %}
<div class="card">
{{ media_item.quality(25).html }}
{% if loop.last %}
{{ debug(media_item) }}
{{ debug(media_item.height) }}
{% set height_ratio = media_item.height / media_item.width %}
<p class="p-2" style="
text-align: center;
background-color: #343a40;
border-radius:10%;
color: white;
opacity: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);">
Mehr anzeigen
</p>
{% endif %}
</div>
{% endfor %}
</div>