Add gallery list

This commit is contained in:
Emil Miler 2024-01-12 21:09:26 +01:00
parent 1687e698d9
commit 8bec285b94
3 changed files with 79 additions and 5 deletions

View File

@ -1,4 +1,7 @@
+++ +++
template = "gallery-list.html" template = "gallery-list.html"
page_template = "gallery.html" page_template = "gallery.html"
sort_by = "date"
+++ +++
Výběr těch nejlepších fotek k zavzpomínání.

View File

@ -2,16 +2,63 @@
h1 { h1 {
margin-bottom: 0; margin-bottom: 0;
} }
.subtitle { .subtitle {
font-weight: bold; font-weight: bold;
font-size: 1.2em; font-size: 1.2em;
margin-bottom: 1em; margin-bottom: 1em;
} }
}
.gallery.grid {
img { img {
display: block; display: block;
border-radius: .5em; border-radius: .5em;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
}
.gallery-list {
a {
display: block;
border-radius: 1rem;
overflow: hidden;
position: relative;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
img {
display: block;
width: 100%;
}
div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: .5em;
color: $col-fg-0-dark;
background: rgba(0 ,0, 0, .5);
transition: background .2s ease-out;
&:hover {
background: rgba(0, 0, 0, 0);
}
.title {
font-weight: bold;
font-size: 1.5em;
line-height: 1.5;
text-align: center;
}
.title, .year {
filter: drop-shadow(0 0 3px #000);
}
} }
} }

View File

@ -1,7 +1,31 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<section class="wrap narrow centering">
<h1>Galerie</h1>
{{ section.content | safe }}
</section>
<section class="gallery-list wrap grid grid-4 grid-mobile-2">
{% for gallery in section.pages %} {% for gallery in section.pages %}
<a href="{{ gallery.permalink }}">{{ gallery.title }}</a> <a href="{{ gallery.permalink }}">
{% if gallery.extra.thumbnail %}
{% set_global img = "." ~ gallery.path ~ gallery.extra.thumbnail %}
{% else %}
{% set_global img = "/static/img/placeholder.jpg" %}
{% for asset in gallery.assets %}
{% if asset is matching("[.](jpg|png)$") %}
{% set_global img = asset %}
{% break %}
{% endif %}
{% endfor %} {% endfor %}
{% endif %}
{% set image = resize_image(path=img, width=300, height=200, op="fill") %}
<img src="{{ image.url }}" alt="{{ gallery.title }}">
<div>
<span class="title">{{ gallery.title }}</span>
<span class="year">{{ gallery.date | date(format="%Y") }}
</div>
</a>
{% endfor %}
</section>
{% endblock %} {% endblock %}