Finish up photostream grid and single layouts
This commit is contained in:
parent
1bf8c28f23
commit
a74703beb5
7 changed files with 355 additions and 0 deletions
162
assets/css/050_photos.css
Normal file
162
assets/css/050_photos.css
Normal file
|
|
@ -0,0 +1,162 @@
|
||||||
|
.main--single.photostream--single {
|
||||||
|
> .figure--image {
|
||||||
|
margin-block-end: var(--space-l);
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-height: 100vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-params {
|
||||||
|
--background-color: var(--gray7);
|
||||||
|
--container-background-color: var(--gray6);
|
||||||
|
--color: var(--gray2);
|
||||||
|
--border-color: var(--gray6);
|
||||||
|
--border-style: 2px solid;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
grid-column: main-start / main-end;
|
||||||
|
justify-content: center;
|
||||||
|
margin-block-start: var(--space-xl);
|
||||||
|
|
||||||
|
> table {
|
||||||
|
background-color: var(--background-color);
|
||||||
|
color: var(--color);
|
||||||
|
border: var(--border-style) var(--border-color);
|
||||||
|
border-collapse: collapse;
|
||||||
|
table-layout: fixed;
|
||||||
|
text-align: center;
|
||||||
|
width: min(calc(0.66 * var(--content-width)), 100%);
|
||||||
|
|
||||||
|
thead td {
|
||||||
|
border-bottom: var(--border-style) var(--border-color);
|
||||||
|
font-size: 80%;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr > td {
|
||||||
|
border: none;
|
||||||
|
border-bottom: var(--border-style) var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.exposure-attributes > td {
|
||||||
|
border: none;
|
||||||
|
border-top: var(--border-style) var(--border-color);
|
||||||
|
border-left: var(--border-style) var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.exposure-attributes > td:first-child {
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
font-size: var(--text-s);
|
||||||
|
line-height: 1;
|
||||||
|
padding-inline: var(--space-s);
|
||||||
|
padding-block: var(--space-xs);
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
text-align: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.make-model {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.size {
|
||||||
|
border-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.location {
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.photostream-grid {
|
||||||
|
grid-column: full-start / full-end;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-block-end: var(--space-l);
|
||||||
|
}
|
||||||
|
|
||||||
|
> .photostream-grid__date-heading {
|
||||||
|
align-items: center;
|
||||||
|
background-color: var(--gray6);
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
line-height: 1;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
> h2 {
|
||||||
|
font-size: var(--text-xxl);
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
color: var(--text-color-secondary);
|
||||||
|
content: ">";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.photostream-item {
|
||||||
|
aspect-ratio: 1;
|
||||||
|
grid-column: unset;
|
||||||
|
margin-block: 0;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
> a {
|
||||||
|
display: block;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photostream-item__title,
|
||||||
|
.photostream-item__date {
|
||||||
|
background-color: var(--background-color);
|
||||||
|
font-family: var(--font-family-monospace);
|
||||||
|
font-size: var(--text-s);
|
||||||
|
margin: 0;
|
||||||
|
padding-inline: var(--space-xxs);
|
||||||
|
visibility: hidden;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photostream-item__title {
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photostream-item__date {
|
||||||
|
bottom: 0;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.photostream-item__date,
|
||||||
|
.photostream-item__title {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (hover: none) {
|
||||||
|
.photostream-item :is(
|
||||||
|
.photostream-item__date,
|
||||||
|
.photostream-item__title)
|
||||||
|
{
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
64
layouts/partials/photostream/exif_table.html
Normal file
64
layouts/partials/photostream/exif_table.html
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
<div class="photo-params">
|
||||||
|
<table>
|
||||||
|
{{ if and .Tags.Make .Tags.Model }}
|
||||||
|
<thead>
|
||||||
|
<td class="make-model" colspan=4>
|
||||||
|
{{- $make := .Tags.Make -}}
|
||||||
|
{{- $model := .Tags.Model -}}
|
||||||
|
{{- if in $model $make -}}
|
||||||
|
{{ .Tags.Model }}
|
||||||
|
{{- else -}}
|
||||||
|
{{ .Tags.Make }} {{ .Tags.Model }}
|
||||||
|
{{- end -}}
|
||||||
|
</td>
|
||||||
|
</thead>
|
||||||
|
{{ end }}
|
||||||
|
{{ with .Tags.LensModel }}
|
||||||
|
<tr>
|
||||||
|
<td colspan=4 class="lens">{{ . }}</td>
|
||||||
|
</tr>
|
||||||
|
{{ end }}
|
||||||
|
<tr>
|
||||||
|
{{- $hasLocation := and .Lat .Long -}}
|
||||||
|
{{ if $hasLocation -}}
|
||||||
|
<td colspan=2 class="location">
|
||||||
|
{{ $lat := float .Lat }}{{ $latDir := cond (eq $lat 0) "" (cond (gt $lat 0) "N" "S") }}
|
||||||
|
<data class="latitude" value="{{ $lat }}">{{ .Lat | lang.FormatNumber (cond (ne $lat 0) 3 0) }}º{{ $latDir }}</data>,
|
||||||
|
{{ $long := float .Long }}{{ $longDir := cond (eq $long 0) "" (cond (gt $long 0) "E" "W") }}
|
||||||
|
<data class="longitude" value="{{ $long }}">{{ .Long | lang.FormatNumber (cond (ne $long 0) 3 0) }}º{{ $longDir }}</data>
|
||||||
|
</td>
|
||||||
|
{{- end -}}
|
||||||
|
{{ if and .Tags.PixelXDimension .Tags.PixelYDimension -}}
|
||||||
|
<td colspan={{ if $hasLocation }}2{{ else }}4{{ end }} class="size">
|
||||||
|
{{- $widthpx := .Tags.PixelXDimension -}}
|
||||||
|
{{- $heightpx := .Tags.PixelYDimension -}}
|
||||||
|
{{- if and (gt $widthpx 0) (gt $heightpx 0) -}}
|
||||||
|
{{- $megapixels := div (mul $widthpx $heightpx) 1e6 -}}
|
||||||
|
<data class="megapixels nobreak" value="{{ $megapixels }}">{{ $megapixels | lang.FormatNumber 0 }} MP</data>
|
||||||
|
•
|
||||||
|
<span class="nobreak"><data class="width">{{ $widthpx }}</data> × <data class="height">{{ $heightpx }}</data></span>
|
||||||
|
{{- end -}}
|
||||||
|
</td>
|
||||||
|
{{ end }}
|
||||||
|
</tr>
|
||||||
|
{{ if or .Tags.ISOSpeedRatings .Tags.FocalLengthIn35mmFilm .Tags.FNumber .Tags.ExposureTime }}
|
||||||
|
<tr class="exposure-attributes">
|
||||||
|
<td class="iso">{{ with .Tags.ISOSpeedRatings }}ISO {{ . }}{{ end }}</td>
|
||||||
|
<td class="focal-length">
|
||||||
|
{{- $focalLength := .Tags.FocalLengthIn35mmFilm | default .Tags.FocalLength -}}
|
||||||
|
{{- with $focalLength -}}{{ . }} mm{{- end -}}
|
||||||
|
</td>
|
||||||
|
<td class="f-number">{{ with .Tags.FNumber }}{{ printf "ƒ%0.1f" . }}{{ end }}</td>
|
||||||
|
<td class="exposure-time">
|
||||||
|
{{- with $exposureTime := .Tags.ExposureTime -}}
|
||||||
|
{{- if in $exposureTime "/" -}}
|
||||||
|
{{ . }} s
|
||||||
|
{{- else -}}
|
||||||
|
1/{{ printf "%.0f" (div 1.0 (float $exposureTime)) }} s
|
||||||
|
{{- end -}}
|
||||||
|
{{- end -}}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{{ end }}
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
9
layouts/partials/photostream/image-resources.html
Normal file
9
layouts/partials/photostream/image-resources.html
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
{{ $thumbnailResourcesNames := slice "thumbnail" "Thumbnail" "thumbnail.jpg" "Thumbnail.jpg" }}
|
||||||
|
{{ with index .Params "thumbnail" }}
|
||||||
|
{{ $thumbnailResourcesNames = $thumbnailResourcesNames | append . }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ $imageResources := .Resources.ByType "image" }}
|
||||||
|
{{ $photos := where $imageResources "Name" "not in" $thumbnailResourcesNames }}
|
||||||
|
|
||||||
|
{{ return $photos }}
|
||||||
50
layouts/partials/photostream/thumbnail.html
Normal file
50
layouts/partials/photostream/thumbnail.html
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
{{/*
|
||||||
|
Renders a photo thumbnail. If neither a target height or target width are
|
||||||
|
given, and the image is already in the correct orientation, no image
|
||||||
|
processing is performed.
|
||||||
|
|
||||||
|
Arguments
|
||||||
|
---------
|
||||||
|
"Page" : A reference to the current Page
|
||||||
|
"Height" : The target height of the image
|
||||||
|
"Width" : The target width of the image
|
||||||
|
|
||||||
|
Returns
|
||||||
|
-------
|
||||||
|
The processed thumbnail image resource
|
||||||
|
*/}}
|
||||||
|
|
||||||
|
{{- $thumbnailResource := .Page.Resources.GetMatch
|
||||||
|
(index .Page.Params "thumbnail" | default "[tT]humbnail*")
|
||||||
|
| default (index (.Page.Resources.ByType "image") 0) -}}
|
||||||
|
|
||||||
|
{{- if not $thumbnailResource -}}
|
||||||
|
{{- errorf "No thumbnail available for %s" .Page.Permalink }}
|
||||||
|
{{- end -}}
|
||||||
|
|
||||||
|
{{ $orientation := partial "image-utilities/orientation-angle.html" $thumbnailResource }}
|
||||||
|
|
||||||
|
{{ $targetWidth := 0 }}
|
||||||
|
{{ with .Width }}
|
||||||
|
{{ $targetWidth = . }}
|
||||||
|
{{ else }}
|
||||||
|
{{ $targetWidth = $thumbnailResource.Width }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ $targetHeight := 0 }}
|
||||||
|
{{ with .Height }}
|
||||||
|
{{ $targetHeight = . }}
|
||||||
|
{{ else }}
|
||||||
|
{{ $targetHeight = $thumbnailResource.Height }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ $thumbnail := false }}
|
||||||
|
{{ if not (and (eq $orientation 0)
|
||||||
|
(eq $targetWidth $thumbnailResource.Width)
|
||||||
|
(eq $targetHeight $thumbnailResource.Height)) }}
|
||||||
|
{{ $thumbnail = $thumbnailResource.Fit (printf "%dx%d r%d" $targetWidth $targetHeight (sub 360 $orientation)) }}
|
||||||
|
{{ else }}
|
||||||
|
{{ $thumbnail = $thumbnailResource }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ return $thumbnail }}
|
||||||
20
layouts/photos/list.html
Normal file
20
layouts/photos/list.html
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
{{ define "main" }}
|
||||||
|
<main class="main--list main--photostream">
|
||||||
|
<header class="page-header">
|
||||||
|
{{ partial "page_header.html" (dict "page" .) }}
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{{- .Content -}}
|
||||||
|
|
||||||
|
{{ range .Pages.ByDate.Reverse.GroupByDate "2006" }}
|
||||||
|
<section class="photostream-grid">
|
||||||
|
<header class="photostream-grid__date-heading">
|
||||||
|
<h2>{{ .Key }}</h2>
|
||||||
|
</header>
|
||||||
|
{{ range .Pages }}
|
||||||
|
{{ .Render "page_summary" }}
|
||||||
|
{{ end }}
|
||||||
|
</section>
|
||||||
|
{{ end }}
|
||||||
|
</main>
|
||||||
|
{{ end }}
|
||||||
19
layouts/photos/page_summary.html
Normal file
19
layouts/photos/page_summary.html
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
{{- $gridSize := $.Site.Params.photos.thumbnailSize -}}
|
||||||
|
{{- $thumbnail := partial "photostream/thumbnail.html" (dict "Page" . "Width" $gridSize "Height" $gridSize) -}}
|
||||||
|
{{- $thumbnail = $thumbnail.Crop (printf "%dx%d" $gridSize $gridSize) -}}
|
||||||
|
{{- $altText := $thumbnail.Params.alt -}}
|
||||||
|
{{- $linkTitle := .LinkTitle | markdownify -}}
|
||||||
|
{{- $showsTitle := le (len $linkTitle) 18 -}}
|
||||||
|
<article class="photostream-item">
|
||||||
|
{{ if $showsTitle }}
|
||||||
|
<h3 class="photostream-item__title">{{ $linkTitle }}</h3>
|
||||||
|
{{ end }}
|
||||||
|
<a href="{{ .RelPermalink }}"
|
||||||
|
{{- if not $showsTitle }} title="{{ .Title | markdownify }}"{{ end }}>
|
||||||
|
<img
|
||||||
|
class="photostream-item__thumbnail"
|
||||||
|
src="{{ $thumbnail.RelPermalink }}"
|
||||||
|
{{- with $altText }} alt="{{ . }}"{{ end }}>
|
||||||
|
</a>
|
||||||
|
<time class="photostream-item__date">{{ .Date | time.Format "2006-01-02" }}</time>
|
||||||
|
</article>
|
||||||
31
layouts/photos/single.html
Normal file
31
layouts/photos/single.html
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
{{ define "main" }}
|
||||||
|
<main class="main--single photostream--single">
|
||||||
|
<header class="page-header">
|
||||||
|
{{ partial "page_header.html" (dict "page" .) }}
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{{- $images := partial "photostream/image-resources.html" . -}}
|
||||||
|
{{- if eq (len $images) 0 -}}
|
||||||
|
{{ errorf "Missing photo from photos page %q" .Path }}
|
||||||
|
{{- end -}}
|
||||||
|
|
||||||
|
{{ if eq (len $images) 1 }}
|
||||||
|
{{- $img := index $images 0 -}}
|
||||||
|
<figure class="figure figure--image photostream__figure">
|
||||||
|
<img
|
||||||
|
src="{{ $img.RelPermalink }}"
|
||||||
|
{{- with $img.Params.alt }} alt="{{ . }}" {{ end -}}>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
{{ .Content -}}
|
||||||
|
|
||||||
|
{{- if .Params.photo_details | default .Params.photoDetails | default true -}}
|
||||||
|
{{- partial "photostream/exif_table.html" $img.Exif -}}
|
||||||
|
{{- end -}}
|
||||||
|
{{ end }}{{/* if eq (len $images) 1 */}}
|
||||||
|
|
||||||
|
<footer class="page-footer">
|
||||||
|
{{ partial "page/footer.html" . }}
|
||||||
|
</footer>
|
||||||
|
</main>
|
||||||
|
{{ end }}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue