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

improve size classes

Browse Source
This commit is contained in:
max.mehl
2020-03-09 14:59:10 +01:00
parent 2c6026f976
commit ab6edc2fdb
2 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -41,7 +41,7 @@ Specifying your image files:
Optional parameters: Optional parameters:
- All the [features/parameters](https://gohugo.io/content-management/shortcodes/#figure) of Hugo's built-in `figure` shortcode work as normal, i.e. src, link, rel, title, caption, class, attr (attribution), attrlink, alt. width and height might lead to strange results when used inside `{{< gallery >}}`. - All the [features/parameters](https://gohugo.io/content-management/shortcodes/#figure) of Hugo's built-in `figure` shortcode work as normal, i.e. src, link, rel, title, caption, class, attr (attribution), attrlink, alt. width and height might lead to strange results when used inside `{{< gallery >}}`.
- `class` allows you to set any custom classes you want on the `<figure>` tag. The values `no-border`, `small`, `medium`, `pull-left` and `pull-right` are made available by this project. - `class` allows you to set any custom classes you want on the `<figure>` tag. The values `no-border`, `sm`, `md`, `lg`, `pull-left` and `pull-right` are made available by this project.
- `lightbox` allows you to control the lightbox. The value `none` will disable the lightbox completely. - `lightbox` allows you to control the lightbox. The value `none` will disable the lightbox completely.
Optional parameters work for standalone `{{< figure >}}` shortcodes and inside of `{{< gallery >}}`. However, they cannot be applied to `{{< snap-dir >}}`. Optional parameters work for standalone `{{< figure >}}` shortcodes and inside of `{{< gallery >}}`. However, they cannot be applied to `{{< snap-dir >}}`.

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

@@ -27,12 +27,16 @@ figure img {
max-height: 100%; max-height: 100%;
} }
figure.small img { figure.sm {
max-height: 150px; max-width: 30%;
} }
figure.medium img { figure.md {
max-height: 225px; max-width: 50%;
}
figure.lg {
max-width: 70%;
} }
figure.pull-right { figure.pull-right {