Eryn Wells
f5fd358922
The layout of this is all CSS with scroll-snap. (Neat!) Also implement a JavaScript scroll event listener that detects when photos scroll and updates the caption and photo data. Refactor a few parts of the photo_exif_table into partials so they can be reused for the carousel items.
37 lines
1.5 KiB
HTML
37 lines
1.5 KiB
HTML
<div class="photo-params">
|
||
<div class="container">
|
||
<table>
|
||
{{ if and .Tags.Make .Tags.Model }}
|
||
<thead>
|
||
<td class="make-model" colspan=4>{{ .Tags.Make }} {{ .Tags.Model }}</td>
|
||
</thead>
|
||
{{ end }}
|
||
<tr>
|
||
{{ if and .Lat .Long }}
|
||
<td colspan="2" class="location">
|
||
<data class="latitude">{{ partial "photos/latitude.html" . }}</data>,
|
||
<data class="longitude">{{ partial "photos/longitude.html" . }}</data>
|
||
</td>
|
||
{{ end }}
|
||
{{ if and .Tags.PixelXDimension .Tags.PixelYDimension }}
|
||
<td colspan="2" class="size">
|
||
{{ $widthpx := .Tags.PixelXDimension }}
|
||
{{ $heightpx := .Tags.PixelYDimension }}
|
||
{{ if and (gt $widthpx 0) (gt $heightpx 0) }}
|
||
<data class="megapixels">{{ partial "photos/megapixels.html" .Tags }}</data> • <data class="width">{{
|
||
$widthpx }}</data> × <data class="height">{{ $heightpx }}</data>
|
||
{{ 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">{{ with .Tags.FocalLengthIn35mmFilm }}{{ . }} mm{{ end }}</td>
|
||
<td class="f-number">{{ with .Tags.FNumber }}ƒ{{ . }}{{ end }}</td>
|
||
<td class="exposure-time">{{ with .Tags.ExposureTime }}{{ . }} s{{ end }}</td>
|
||
</tr>
|
||
{{ end }}
|
||
</table>
|
||
</div>
|
||
</div>
|