michael/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2025-01-22 22:45:42 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Merge pull request #450 from mirceanton/feat-428/shortcode_gallery

Browse source 
✨ shortcode gallery
This commit is contained in:
Nuno Coração 2023-01-16 23:20:23 +00:00 committed by GitHub
commit f11ef08cb5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 56 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
exampleSite/content/docs/shortcodes/index.md
View file

@ -167,6 +167,26 @@ Blowfish also supports automatic conversion of images included using standard Ma
{{< figure src="abstract.jpg" alt="Abstract purple artwork" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" >}}
## Gallery
`gallery` allows you to showcase multiple images at once, in a responsive manner with more varied and interesting layouts.
In order to add images to the gallery, proceed as you normally would with `{{< figure >}}` shortcodes, but made sure to add the extra `class="grid-item grid-wXY"` in order for the gallery to properly pick the images up. The widths available by default start at 10% and go all the way to 100% in 5% increments. For example, to set the width to 65%, set the class to `grid-w65`.
**Example:**
```md
{{</* gallery */>}}
{{</* figure src="abstract.jpg" alt="Abstract purple artwork" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" class="grid-item grid-w15"*/>}}
{{</* figure src="featured.png" class="grid-item grid-w15"*/>}}
{{</* /gallery */>}}
```
{{< gallery >}}
{{< figure src="abstract.jpg" alt="Abstract purple artwork" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" class="grid-item grid-w75">}}
{{< figure src="featured.png" class="grid-item grid-w15" >}}
{{< /gallery >}}
## Icon
`icon` outputs an SVG icon and takes the icon name as its only parameter. The icon is scaled to match the current text size.

36
layouts/shortcodes/gallery.html Normal file
View file

@ -0,0 +1,36 @@
<script src="https://unpkg.com/packery@2/dist/packery.pkgd.min.js"></script>
<div class="grid">
{{ .Inner }}
</div>
<style>
.grid-w10 { width: 10%;}
.grid-w15 { width: 15%;}
.grid-w20 { width: 20%;}
.grid-w25 { width: 25%;}
.grid-w30 { width: 30%;}
.grid-w35 { width: 35%;}
.grid-w40 { width: 40%;}
.grid-w45 { width: 45%;}
.grid-w50 { width: 50%;}
.grid-w55 { width: 55%;}
.grid-w60 { width: 60%;}
.grid-w65 { width: 65%;}
.grid-w70 { width: 70%;}
.grid-w75 { width: 75%;}
.grid-w80 { width: 80%;}
.grid-w85 { width: 85%;}
.grid-w90 { width: 90%;}
.grid-w95 { width: 95%;}
.grid-w100 { width: 100%;}
</style>
<script>
var elem = document.querySelector('.grid');
var pckry = new Packery( elem, {
// options
itemSelector: '.grid-item',
gutter: 10
});
</script>