ciccarello.me/posts/photos/index.html at main · aciccarello/ciccarello.me · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
---
layout: default
back_button: "/posts"
permalink: "/photos/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber | plus: 1 }}/{% endif %}"
redirect_from: /photos/page/1
noindex: true
pagination:
  data: collections.photos
  size: 32
  reverse: true
  alias: photos
eleventyComputed:
  title: "Photo Gallery{% if pagination.pages.length > 1 %} - Page {{pagination.pageNumber | plus: 1}} of {{pagination.pages.length}}{% endif %}"
---

<style type="text/css">

.photo-grid-list__tiles {
	display: flex;
    flex-flow: row wrap;
    padding: 0;
	gap: 0.25rem;
}

.photo-grid-icon {
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, .5))
}
.photo-grid-tile {
	display: block;
	width: calc(50% - 0.25rem);
	aspect-ratio: 1 / 1;
	position: relative
}
@media screen and (min-width: 45em) {
	.photo-grid-tile {
		width: calc(100% / 3 - 0.25rem);
	}
	.photo-grid-tile:first-child, .photo-grid-tile:nth-child(2) {
		width: calc(50% - 0.25rem);
	}
}
.photo-grid-tile a {
	display: block;
	color: var(--text-on-dark-background);
}
.photo-grid-tile__media {
	display: block;
	aspect-ratio: 1 / 1;
	width: 100%;
	object-fit: cover;
}
.photo-grid-tile__overlay {
	position: absolute;
	bottom: 0;
	width: 100%;
	opacity: 0;
	box-sizing: border-box;
	padding: 2rem 1rem 1rem;
	background: var(--color-dark-background);
	background: linear-gradient(
		0deg,
		rgba(0,0,0,1) calc(100% - 4rem),
		rgba(0,0,0,0.7) calc(100% - 2rem),
		rgba(0,0,0,0) 100%
	);
	color: var(--text-on-dark-background);
	transition: opacity 250ms;
}

.photo-grid-tile:hover .photo-grid-tile__overlay {
	visibility: visible;
	opacity: 1;
}
.photo-grid-tile__overlay p {
	margin: 0.25rem 0 0;
}

.photo-grid-tile__description {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

</style>
<div class="container h-feed">
	<h1 class="post-list-heading p-name">
		{{ page.list_title | default: "Photos" }}
	</h1>
	<ol class="photo-grid-list__tiles">
		{%- for post in photos -%}
		<li class="photo-grid-tile h-entry">
			<a href="{{ post.url | url }}">
				{% assign filetype = post.data.image | split: "." | last -%}
				{% if filetype == 'mp4' -%}
				<video preload="metadata" class="photo-grid-tile__media u-video" aria-label="{{ post.data.image_alt | escape }}">
					<source type="video/mp4" src="{{ post.data.image }}">
				</video>
				<svg xmlns="http://www.w3.org/2000/svg" class="photo-grid-icon" height="24px" viewBox="0 0 24 24" width="24px" role="img" fill="#FFFFFF">
				 	<title>Video</title>
					<path xmlns="http://www.w3.org/2000/svg" d="M4 4 6 8H9L7 4H9L11 8H14L12 4H14L16 8H19L17 4H20Q20.825 4 21.413 4.588Q22 5.175 22 6V18Q22 18.825 21.413 19.413Q20.825 20 20 20H4Q3.175 20 2.588 19.413Q2 18.825 2 18V6Q2 5.175 2.588 4.588Q3.175 4 4 4ZM4 10V18Q4 18 4 18Q4 18 4 18H20Q20 18 20 18Q20 18 20 18V10ZM4 10V18Q4 18 4 18Q4 18 4 18Q4 18 4 18Q4 18 4 18Z"/>
				</svg>
				{% else -%}
				<img src="{{ post.data.image }}" alt="{{ post.data.image_alt | escape }}" loading="lazy" class="photo-grid-tile__media u-photo" />
				{% endif -%}
				{% if post.templateContent contains "<figure" %}
				<svg xmlns="http://www.w3.org/2000/svg" class="photo-grid-icon" height="24px" viewBox="0 0 24 24" width="24px" role="img" fill="#FFFFFF">
					<title>Post contains multiple images</title>
					<path d="M0 0h24v24H0V0z" fill="none"/>
					<path d="M1 5h2v14H1zm4 0h2v14H5zm17 0H10c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zM11 17l2.5-3.15L15.29 16l2.5-3.22L21 17H11z"/>
				</svg>
				{% endif %}
				<div class="photo-grid-tile__overlay">
					<time datetime="{{ post.date | formatMachineDate }}">
						{{- post.date | formatHumanDate: post.data.dateFormat -}}
					</time>
					<p class="photo-grid-tile__description">
						{{ post.templateContent | joinLines | strip_html | truncatewords: 20 }}
					</p>
				</div>
			</a>
		</li>
		{%- endfor -%}
	</ol>
	<p class="blog-alternates">
        <span class="rss-subscribe"><a href="/subscribe">Subscribe for updates</a></span>
	</p>

	{% include "pagination.html" %}

</div>