mxmehl/hugo-snap-gallery
1
0
Fork 0
Code Issues 2 Pull Requests Releases 2 Wiki Activity

improve dealing with small images

Browse Source
This commit is contained in:
max.mehl
2020-03-09 13:53:41 +01:00
parent 81ece5842c
commit 824e062cfd
2 changed files with 56 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
layouts/shortcodes/figure.html
View File

@@ -33,51 +33,53 @@
{{- end -}}
<figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
{{ if (.Get "link") -}}
<a href="{{ .Get "link" }}"
{{- with .Get "target" }} target="{{ . }}"{{ end -}}
{{- with .Get "rel" }} rel="{{ . }}"{{ end -}}
>
{{ else -}}
<a href="#{{ $id }}">
{{- end -}}
<!-- THUMBNAIL -->
<img src="{{ $thumb | relURL }}" class="snap-thumb"
{{- with .Get "alt" }} alt="{{ . }}"{{ end -}}
{{- with .Get "title" }} title="{{ . }}"{{ end -}}
{{- with .Get "height" }} height="{{ . }}"{{ end -}}
{{- with .Get "width" }} width="{{ . }}"{{ end -}}
/>
{{- if or (.Get "caption") (.Get "attr")}}
<figcaption>
{{- .Get "caption" | markdownify -}}
{{- with .Get "attr" }} {{ . | markdownify}}{{ end -}}
</figcaption>
{{- end }}
</a>
<!-- FULL IMAGE; HIDDEN -->
<div class="snap-lightbox" id="{{ $id }}">
<a href="#_" class="snap-lightbox-close"></a>
<div class="snap-lightbox-inner">
<img src="{{ .Get "src" }}" {{ with .Get "alt" }}alt="{{ . }}"{{ end }} />
<p>
{{- if or (.Get "caption") (.Get "attr") -}}
{{- .Get "caption" | markdownify -}}
{{- with .Get "attrlink" }} <a href="{{ . }}">{{- end -}}
{{- with .Get "attr" }} {{ . | markdownify}}{{ end -}}
{{- with .Get "attrlink" }}</a>{{- end -}}
<div class="snap-wrapper">
{{ if (.Get "link") -}}
<a href="{{ .Get "link" }}"
{{- with .Get "target" }} target="{{ . }}"{{ end -}}
{{- with .Get "rel" }} rel="{{ . }}"{{ end -}}
>
{{ else -}}
<a href="#{{ $id }}">
{{- end -}}
<!-- THUMBNAIL -->
<img src="{{ $thumb | relURL }}" class="snap-thumb"
{{- with .Get "alt" }} alt="{{ . }}"{{ end -}}
{{- with .Get "title" }} title="{{ . }}"{{ end -}}
{{- with .Get "height" }} height="{{ . }}"{{ end -}}
{{- with .Get "width" }} width="{{ . }}"{{ end -}}
/>
{{- if or (.Get "caption") (.Get "attr")}}
<figcaption>
{{- .Get "caption" | markdownify -}}
{{- with .Get "attr" }} {{ . | markdownify}}{{ end -}}
</figcaption>
{{- end }}
</a>
<!-- FULL IMAGE; HIDDEN -->
<div class="snap-lightbox" id="{{ $id }}">
<a href="#_" class="snap-lightbox-close"></a>
<div class="snap-lightbox-inner">
<img src="{{ .Get "src" }}" {{ with .Get "alt" }}alt="{{ . }}"{{ end }} />
<p>
{{- if or (.Get "caption") (.Get "attr") -}}
{{- .Get "caption" | markdownify -}}
{{- with .Get "attrlink" }} <a href="{{ . }}">{{- end -}}
{{- with .Get "attr" }} {{ . | markdownify}}{{ end -}}
{{- with .Get "attrlink" }}</a>{{- end -}}
{{- end }}
</p>
</div>
<a href="#_" class="snap-lightbox-close-button"><i class="snap-lightbox-x"></i></a>
{{- if .Parent -}}
{{- if not (eq $figid 1) -}}
<a href="#{{ $previd }}" class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></a>
{{- else -}}
<span class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></span>
{{- end -}}
<!-- TODO: Somehow try to identify whether this is the last element in the gallery -->
<a href="#{{ $nextid }}" class="snap-lightbox-next"><i class="snap-lightbox-arrow"></i></a>
{{- end }}
</p>
</div>
<a href="#_" class="snap-lightbox-close-button"><i class="snap-lightbox-x"></i></a>
{{- if .Parent -}}
{{- if not (eq $figid 1) -}}
<a href="#{{ $previd }}" class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></a>
{{- else -}}
<span class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></span>
{{- end -}}
<!-- TODO: Somehow try to identify whether this is the last element in the gallery -->
<a href="#{{ $nextid }}" class="snap-lightbox-next"><i class="snap-lightbox-arrow"></i></a>
{{- end }}
</div>
</figure>

10
static/css/snap-gallery.css
View File

@@ -10,7 +10,12 @@ figure {
margin: 30px auto 40px;
display: block;
text-align: center;
}
/* make box with box-shadow only as large as image */
.snap-wrapper {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
display: inline-block;
}
figure a:hover {
@@ -59,6 +64,11 @@ figure figcaption {
flex-wrap: wrap;
}
/* avoid sick effects of inline-block on gallery elements */
.snap-gallery .snap-wrapper {
display: block;
}
.snap-gallery figure {
position: relative;
width: 30%;