mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-14 04:15:40 +00:00
feat: redesign Gallery to use grid layout
Postfix -f (full width), -s (small), or -m (medium) to image names for them to span different areas of the grid.
This commit is contained in:
Geo committed
1 parent
565e5a40ae
commit
1f3cbd0137
2 files changed
+99
-32
No files matched your search
@@ -94,38 +94,94 @@ svg {
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Gallery.
|
||||
* Gallery shortcode.
|
||||
**************************************************/
|
||||
|
||||
.gallery {
|
||||
margin: 0.5em -4px 1.5em -4px;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.gallery img {
|
||||
// Satisfy Lighthouse criteria even if a lazy image hasn't loaded yet.
|
||||
min-height: 48px;
|
||||
min-width: 48px;
|
||||
}
|
||||
|
||||
a[data-fancybox] {
|
||||
text-decoration: none;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.gallery a[data-fancybox] img {
|
||||
height: 250px;
|
||||
width: auto;
|
||||
max-width: inherit;
|
||||
display: inherit;
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
box-shadow: none;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
.fancybox-caption {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gallery-grid {
|
||||
display: grid;
|
||||
grid-gap: 30px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
grid-auto-rows: 150px;
|
||||
grid-auto-flow: row dense;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
grid-column-start: auto;
|
||||
grid-row-start: auto;
|
||||
background-size: cover;
|
||||
background: #000 center;
|
||||
box-shadow: -2px 2px 10px 0 rgba(#444, 0.4);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
cursor: zoom-in;
|
||||
counter-increment: item-counter;
|
||||
|
||||
a {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
a[data-fancybox] {
|
||||
text-decoration: none;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
img {
|
||||
all: initial;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: zoom-in;
|
||||
// Satisfy Lighthouse criteria even if a lazy image hasn't loaded yet.
|
||||
min-height: 48px;
|
||||
min-width: 48px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background-color: black;
|
||||
// opacity: 0.3;
|
||||
// transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
|
||||
//&:after {
|
||||
// opacity: 0;
|
||||
//}
|
||||
}
|
||||
|
||||
&--medium {
|
||||
grid-row-end: span 2;
|
||||
}
|
||||
|
||||
&--large {
|
||||
grid-row-end: span 3;
|
||||
}
|
||||
|
||||
&--full {
|
||||
grid-column-end: auto;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
grid-column: 1/-1;
|
||||
grid-row-end: span 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
{{/* Gallery Shortcode for Wowchemy. */}}
|
||||
{{/* Load gallery images from media library. */}}
|
||||
{{/* https://github.com/wowchemy/wowchemy-hugo-themes */}}
|
||||
|
||||
{{/* Get album folder or default to `media/albums/gallery/`. */}}
|
||||
{{ $album := (.Get "album") | default "gallery" }}
|
||||
@@ -7,14 +8,14 @@
|
||||
|
||||
{{/* Gallery options */}}
|
||||
{{ $sort_order := .Get "order" | default "asc" }}
|
||||
{{ $resize_options := printf "%s webp" (.Get "resize_options" | default "x190") }}
|
||||
{{ $resize_options := printf "%s webp" (.Get "resize_options" | default "750x750") }}
|
||||
|
||||
<div class="gallery">
|
||||
<div class="gallery-grid">
|
||||
|
||||
{{/* Attempt to automatically load gallery images from page bundle */}}
|
||||
{{ $images := resources.Match $album_path }}
|
||||
{{ range (sort $images "Name" $sort_order) }}
|
||||
{{ $image := .Resize $resize_options }}
|
||||
{{ $image := .Fit $resize_options }}
|
||||
{{/* Check if the user set a caption for this image */}}
|
||||
{{ $filename := path.Base .Name }}
|
||||
{{ $caption := "" }}
|
||||
@@ -23,9 +24,19 @@
|
||||
{{ $caption = .caption }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ $image_size := "gallery-item--medium" }}
|
||||
{{if in .Name "-f." }}
|
||||
{{ $image_size = "gallery-item--full" }}
|
||||
{{else if in .Name "-s." }}
|
||||
{{ $image_size = "" }}
|
||||
{{else if in .Name "-l." }}
|
||||
{{ $image_size = "gallery-item--large" }}
|
||||
{{end}}
|
||||
<div class="gallery-item {{$image_size}}">
|
||||
<a data-fancybox="gallery-{{$album}}" href="{{ .RelPermalink }}" {{ with $caption }}data-caption="{{.|markdownify|emojify|safeHTMLAttr}}"{{ end }}>
|
||||
<img src="{{ $image.RelPermalink }}" loading="lazy" alt="{{ plainify $caption | default $filename }}" width="{{ $image.Width }}" height="{{ $image.Height }}">{{/* Width & height (or low res src) required for lazy loading. */}}
|
||||
<img src="{{ $image.RelPermalink }}" loading="lazy" alt="{{ plainify $caption | default $filename }}" width="{{ $image.Width }}" height="{{ $image.Height }}">
|
||||
</a>
|
||||
</div>
|
||||
{{else}}
|
||||
{{ errorf "Unable to load gallery `%s` in `%s`." $album_path .Page.File.Filename }}
|
||||
{{end}}
|
||||
|
||||
Reference in new issue
Block a user