Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/schnouki/hugo-baguettebox
A Hugo theme component that provides an image gallery and lightbox powered by baguetteBox.js.
https://github.com/schnouki/hugo-baguettebox
baguettebox gallery hugo hugo-theme-component lightbox
Last synced: 3 months ago
JSON representation
A Hugo theme component that provides an image gallery and lightbox powered by baguetteBox.js.
- Host: GitHub
- URL: https://github.com/schnouki/hugo-baguettebox
- Owner: Schnouki
- License: mit
- Created: 2018-11-08T12:53:16.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-11-29T21:59:27.000Z (about 4 years ago)
- Last Synced: 2024-04-28T15:48:37.035Z (9 months ago)
- Topics: baguettebox, gallery, hugo, hugo-theme-component, lightbox
- Language: HTML
- Size: 16.6 KB
- Stars: 11
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# hugo-baguetteBox
This is a theme component for [Hugo](https://gohugo.io/). It provides shortcodes to include an image gallery and
lightbox powered by [baguetteBox.js](https://github.com/feimosi/baguetteBox.js) in a Hugo website.
## Installation
Clone this git repository into your `themes` folder (or add it as a submodule if you're already using git):
```sh
git clone https://github.com/Schnouki/hugo-baguetteBox themes/baguettebox
```
Now add this theme component to your `config.toml`:
```toml
theme = ["baguettebox", "main-theme"]
```
## Usage
In a post or page, you can add a gallery using the `{{< gallery >}}` shortcode, and images inside the gallery using the
`{{< galimg >}}` shortcode:
```markdown
{{< gallery >}}
{{% galimg target="image01.png" title="This image has a title but no caption!" /%}}
{{% galimg target="image02.png" %}}This image has a caption!{{% /galimg %}}
{{% galimg target="image03.png" thumb="image03_thumb.png" %}}Don't generate the thumbnail for this one, use an existing file.{{% /galimg %}}
{{% galimg target="image04.png" size="400x300" %}}Use a different size for the thumbnail…{{% /galimg %}}
{{% galimg target="image05.png" size="400x300 BottomLeft q90 r90" %}}You can actually use any option supported by Hugo's image processing.{{% /galimg %}}
{{% galimg target="image06.png" mode="resize" size="100x20" %}}You can also choose the image processing method.{{% /galimg %}}
{{< /gallery >}}
```
As can be seen, the `gallery` shortcode does not accept any parameter.
The `galimg` shortcode, however, accepts several parameters:
- `target` (**required**): name for the full-size image
- `thumb` (optional): name of the thumbnail. If missing, the thumbnail will be generated by Hugo using its [image
processing](https://gohugo.io/content-management/image-processing).
- `size` (optional): size for the generated thumbnail. This can actually be any valid [image processing
option](https://gohugo.io/content-management/image-processing/#image-processing-options). Defaults to `200x150 smart`.
- `mode` (optional): method used to generate the thumbnail. Can be `fill`, `fit` or `resize`. Defaults to `fill`.
## Gallery appearance
This component does *not* include a stylesheet for the gallery, you will need to add this to your site by yourself.
The generated HTML is very simple:
```html
```
Here is a sample CSS that works well with the [Minimo](https://github.com/MunifTanjim/minimo) theme:
```css
.gallery {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
.gallery a {
border: 0;
margin-bottom: .5em;
}
.gallery img {
border: .125em solid #bdbdbd;
}
```
## Dependencies
This components includes [*baguetteBox.js*](https://github.com/feimosi/baguetteBox.js), which is *very* small (less that
10 kB of JavaScript and 4 kB of CSS). It is only included on pages that need it, and has no external dependency at all.
To customize how it is loaded, you can overload the `gallery/resources.html` partial template. This way you can for instance load it from a CDN (instead of using the bundled version), or disable [fingerprintint](https://gohugo.io/hugo-pipes/fingerprint/), or use Hugo Pipes to enable PostCSS or whatever you want.
