Zobrazení obrázků ve stránce galerie

content/katedra/galerie/_index.md

@@ -2,7 +2,8 @@
 title = "Galerie"
 weight = 4
 
+page_template = "gallery.html"
+
 [extra]
 icon = "ri-gallery-fill"
 +++
-

sass/main.scss

@@ -366,6 +366,15 @@ main {
 		}
 	}
 
+	.gallery {
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+		column-gap: 1em;
+		row-gap: 1em;
+
+		img:hover { box-shadow: 0px 1px 9px #00000088 }
+	}
+
 	.button {
 		border: 0;
 		@include top-border($light-blue);

templates/gallery.html

@@ -0,0 +1,19 @@
+{% extends "base.html" %}
+
+{% block extra %}
+	{{ macro::breadcrumbs(page=page) }}
+{% endblock %}
+
+{% block content %}
+	<main>
+		<section class="centering">
+			<h1>{% if page.extra.heading %}
+				{{ page.extra.heading }}
+			{% else %}
+				{{ page.title }}
+			{% endif %}</h1>
+			{{ page.content | safe }}
+			{{ macro::gallery(page=page) }}
+		</section>
+	</main>
+{% endblock content %}

templates/macros.html

@@ -206,3 +206,13 @@
 		</div>
 	{% endif %}
 {% endmacro %}
+
+{% macro gallery(page) %}
+	<div class="gallery">
+		{% for asset in page.assets %}
+			{% if asset is matching("[.](jpg|png)$") %}
+				<img src="{{ resize_image(path=asset, width=240, height=240, op="fill") }}" alt="{{ asset }}">
+			{% endif %}
+		{% endfor %}
+	</div>
+{% endmacro %}