Add gallery list
This commit is contained in:
parent
1687e698d9
commit
8bec285b94
@ -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í.
|
||||||
|
@ -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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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 %}
|
||||||
|
Loading…
Reference in New Issue
Block a user