![]() |
il y a 1 mois | |
---|---|---|
LICENSES | il y a 1 mois | |
layouts/shortcodes | il y a 1 mois | |
static/css | il y a 1 mois | |
README.md | il y a 1 mois | |
theme.yaml | il y a 1 mois |
Automagical css image gallery in Hugo using shortcodes.
This is a fork of easy gallery. It is supposed to come without any JavaScript and therefore has limited features, but new JS-less stuff is planned.
{{< figure >}}
shortcode that enables new features but is backwards-compatible with Hugo’s built-in {{< figure >}}
shortcode{{< figure >}}
shortcode by itself to enable pretty captions{{< figure >}}
shortcodes inside a {{< gallery >}}
to create a pretty image gallery{{< gallery >}}
at a directory to generate a gallery of all images in that directory{{< figure >}}
shortcode on each page{{< load-photoswipe >}}
shortcode anywhere in your post<figure>
elements in your post, regardless of where in your post they appear, into a lightbox/carousel style image gallery<figure>
elements/shortcodes in your postsUse this like an additional Hugo theme.
{{< figure >}}
shortcode usageSpecifying your image files:
{{< figure src="thumb.jpg" link="image.jpg" >}}
will use thumb.jpg
for thumbnail and image.jpg
for lightbox{{< figure src="image.jpg" >}}
or {{< figure link="image.jpg" >}}
will use image.jpg
for both thumbnail and lightbox{{< figure link="image.jpg" thumb="-small" >}}
will use image-small.jpg
for thumbnail and image.jpg
for lightboxOptional parameters:
figure
shortcode work as normal, i.e. src, link, title, caption, class, attr (attribution), attrlink, altsize
(e.g. size="1024x768"
) pre-defines the image size for PhotoSwipe. Use this option if you don’t want to pre-load the linked image to determine its size.class
allows you to set any custom classes you want on the <figure>
tag.Optional parameters for standalone {{< figure >}}
shortcodes only (i.e. don’t use on {{< figure >}}
inside {{< gallery >}}
- strange things may happen if you do):
caption-position
and caption-effect
work the same as for the {{< gallery >}}
shortcode (see below).width
defines the max-width
of the image displayed on the page. If using a thumbnail for a standalone figure, set this equal to your thumbnail’s native width to make the captions behave properly (or feel free to come up with a better solution and submit a pull request :-)). Also use this option if you don’t have a thumbnail and you don’t want the hi-res image to take up the entire width of the screen/container.{{< gallery >}}
shortcode usageTo specify a directory of image files:
{{< gallery dir="/img/your-directory-of-images/" />}}`
[image].jpg
is used for the hi-res image, and [image]-thumb.jpg
is used for the thumbnails.[image]-thumb.jpg
doesn’t exist, then [image].jpg
will be used for both hi-res and thumbnail images.-thumb
, but you can specify a different one e.g. thumb="-small"
or thumb="_150x150"
.To specify individual image files:
{{< gallery >}}
{{< figure src="image1.jpg" >}}
{{< figure src="image2.jpg" >}}
{{< figure src="image3.jpg" >}}
{{< /gallery >}}
Optional parameters:
caption-position
- determines the captions’ position over the image. Options:
bottom
(default)center
none
hides captions on the page (they will only show in PhotoSwipe)caption-effect
- determines if/how captions appear upon hover. Options:
slide
(default)fade
none
(captions always visible)hover-transition
- determines if/how images change upon hover. Options:
none
- hard transitionsnap-gallery.css
is designed to provide square tiles in a container with max-width: 768px
.
Here are some pointers if you want to adapt the CSS:
.gallery {max-width: 768px;}
if you want a gallery wider than 768px.min-width
in the @media
styles to change the screen widths at which the layout changesmin-width: 9999px
in the last @media
style to something sensible if you want to use a 4-tile layoutwidth
= 100% / number of tiles per rowpadding-bottom
= width
gives square tiles. Change padding-bottom if you want some other aspect ratio, e.g. width: 33.3%; padding-bottom: 25%
gives a 4:3 aspect ratio.MIT