zhao/hugo-theme-moments
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

FEATURE: pic set can support more than 9 pictures

Browse source
This commit is contained in:
FarseaSH 2024-09-05 21:55:44 +08:00
parent ccad80501a
commit ad503162f2
3 changed files with 45 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
assets/more-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB

23
assets/style-refractored.scss
View file

@ -360,6 +360,29 @@ $gray: #919EB1;
padding-bottom: 50%; padding-bottom: 50%;
position: relative; position: relative;
height: 0px; height: 0px;
&.img-black-filter::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
opacity: 0.8;
}
.more-icon {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: 100% 100%;
z-index: 1;
}
} }
img{ img{

32
layouts/partials/pic_set.html
View file

@ -11,18 +11,30 @@
<div class="pic-grid" style="width: {{ $max_width }}%"> <div class="pic-grid" style="width: {{ $max_width }}%">
<div class="pure-g"> <div class="pure-g">
{{ range $num, $a := $pic_set }} {{ range $num, $a := $pic_set }}
{{ if resources.Get $a }} {{ if resources.Get $a }}
{{ $a = (resources.Get $a).Permalink }} {{ $a = (resources.Get $a).Permalink }}
{{ end }} {{ end }}
<div class="pure-u-1-{{ $num_per_row }}">
<div class="add-padding"> {{ $display := "block"}}
<div class="img-container"> {{ if gt $num 8 }} {{ $display = "none"}} {{ end }}
<a data-src="{{ $a }}" data-fancybox="gallery" data-caption="{{ $caption }}"> <div class="pure-u-1-{{ $num_per_row }}" style="display: {{$display}};">
<img src="{{ $a }}" alt="pictures"/> <div class="add-padding">
</a> {{ if and (eq $num 8) (gt (len $pic_set) 9) }}
<div class="img-container img-black-filter">
<a data-src="{{ $a }}" data-fancybox="gallery" data-caption="{{ $caption }}">
<div class="more-icon" style="background-image: url('{{ (resources.Get "more-icon.png").Permalink }}');"></div>
<img src="{{ $a }}" alt="pictures"/>
</a>
</div>
{{ else }}
<div class="img-container">
<a data-src="{{ $a }}" data-fancybox="gallery" data-caption="{{ $caption }}">
<img src="{{ $a }}" alt="pictures"/>
</a>
</div>
{{ end }}
</div> </div>
</div> </div>
</div>
{{ end }} {{ end }}
</div> </div>
</div> </div>