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 -}} {{- end -}}
<figure {{ with .Get "class" }}class="{{.}}"{{ end }}> <figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
{{ if (.Get "link") -}} <div class="snap-wrapper">
<a href="{{ .Get "link" }}" {{ if (.Get "link") -}}
{{- with .Get "target" }} target="{{ . }}"{{ end -}} <a href="{{ .Get "link" }}"
{{- with .Get "rel" }} rel="{{ . }}"{{ end -}} {{- with .Get "target" }} target="{{ . }}"{{ end -}}
> {{- with .Get "rel" }} rel="{{ . }}"{{ end -}}
{{ else -}} >
<a href="#{{ $id }}"> {{ else -}}
{{- end -}} <a href="#{{ $id }}">
<!-- THUMBNAIL --> {{- end -}}
<img src="{{ $thumb | relURL }}" class="snap-thumb" <!-- THUMBNAIL -->
{{- with .Get "alt" }} alt="{{ . }}"{{ end -}} <img src="{{ $thumb | relURL }}" class="snap-thumb"
{{- with .Get "title" }} title="{{ . }}"{{ end -}} {{- with .Get "alt" }} alt="{{ . }}"{{ end -}}
{{- with .Get "height" }} height="{{ . }}"{{ end -}} {{- with .Get "title" }} title="{{ . }}"{{ end -}}
{{- with .Get "width" }} width="{{ . }}"{{ end -}} {{- with .Get "height" }} height="{{ . }}"{{ end -}}
/> {{- with .Get "width" }} width="{{ . }}"{{ end -}}
{{- if or (.Get "caption") (.Get "attr")}} />
<figcaption> {{- if or (.Get "caption") (.Get "attr")}}
{{- .Get "caption" | markdownify -}} <figcaption>
{{- with .Get "attr" }} {{ . | markdownify}}{{ end -}} {{- .Get "caption" | markdownify -}}
</figcaption> {{- with .Get "attr" }} {{ . | markdownify}}{{ end -}}
{{- end }} </figcaption>
</a> {{- end }}
<!-- FULL IMAGE; HIDDEN --> </a>
<div class="snap-lightbox" id="{{ $id }}"> <!-- FULL IMAGE; HIDDEN -->
<a href="#_" class="snap-lightbox-close"></a> <div class="snap-lightbox" id="{{ $id }}">
<div class="snap-lightbox-inner"> <a href="#_" class="snap-lightbox-close"></a>
<img src="{{ .Get "src" }}" {{ with .Get "alt" }}alt="{{ . }}"{{ end }} /> <div class="snap-lightbox-inner">
<p> <img src="{{ .Get "src" }}" {{ with .Get "alt" }}alt="{{ . }}"{{ end }} />
{{- if or (.Get "caption") (.Get "attr") -}} <p>
{{- .Get "caption" | markdownify -}} {{- if or (.Get "caption") (.Get "attr") -}}
{{- with .Get "attrlink" }} <a href="{{ . }}">{{- end -}} {{- .Get "caption" | markdownify -}}
{{- with .Get "attr" }} {{ . | markdownify}}{{ end -}} {{- with .Get "attrlink" }} <a href="{{ . }}">{{- end -}}
{{- with .Get "attrlink" }}</a>{{- 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 }} {{- end }}
</p>
</div> </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> </div>
</figure> </figure>

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

@@ -10,7 +10,12 @@ figure {
margin: 30px auto 40px; margin: 30px auto 40px;
display: block; display: block;
text-align: center; 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); 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 { figure a:hover {
@@ -59,6 +64,11 @@ figure figcaption {
flex-wrap: wrap; flex-wrap: wrap;
} }
/* avoid sick effects of inline-block on gallery elements */
.snap-gallery .snap-wrapper {
display: block;
}
.snap-gallery figure { .snap-gallery figure {
position: relative; position: relative;
width: 30%; width: 30%;