Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use page resources #46

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Use page resources #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c4f6e3f
Use Hugo page resources to create thumbnails and gallery
EmielH Oct 14, 2018
2953bfd
Make thumbnail size configurable
EmielH Apr 13, 2019
6afb231
Update README
EmielH Apr 13, 2019
0043b7d
Restore original functions
EmielH Apr 27, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ Automagical css image gallery in [Hugo](https://gohugo.io/) using shortcodes, wi
- Put multiple `{{< figure >}}` shortcodes inside a `{{< gallery >}}` to create a pretty image gallery
- **Point `{{< gallery >}}` at a directory to generate a gallery of all images in that directory**
- Gallery is responsive, images are scaled/cropped to fill square (or other evenly-sized) tiles
- Pretty captions appear/slide/fade upon hovering over the image
- Pretty captions appear/slide/fade upon hovering over the image
- Optionally make gallery images zoom, grow, shrink, slide up, or slide down upon hover
- Only requires 3.6kB of CSS (unminified; you can minify it if you want)
- CSS is automatically loaded the first time you use the `{{< figure >}}` shortcode on each page
Expand Down Expand Up @@ -92,10 +92,10 @@ Optional parameters:
- `size` (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):
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`](https://www.w3schools.com/cssref/pr_dim_max-width.asp) 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.
- `caption-position` and `caption-effect` work the same as for the `{{< gallery >}}` shortcode (see below).
- `width` defines the [`max-width`](https://www.w3schools.com/cssref/pr_dim_max-width.asp) 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.
- `class="no-photoswipe"` prevents a `<figure>` from being loaded into PhotoSwipe. If you click on the figure you'll instead a good ol' fashioned hyperlink to a bigger image (or - if you haven't specified a bigger image - the same one).

## `{{< gallery >}}` shortcode usage
Expand Down Expand Up @@ -141,6 +141,8 @@ Optional parameters:
- `hover-transition` - determines if/how images change upon hover. Options:
- not set - smooth transition (default)
- `none` - hard transition
- `thumbnail-size` sets the size of the thumbnails for the gallery. Default is "300x300". First number is width, second number is height.
- example: `{{< gallery dir="/img/your-directory-of-images/" thumbnail-size="150x150" />}}`

## PhotoSwipe usage

Expand Down
36 changes: 29 additions & 7 deletions layouts/shortcodes/gallery.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
-->
<!-- count how many times we've called this shortcode; load the css if it's the first time -->
{{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href="/css/hugo-easy-gallery.css" />{{ end }}
{{- $.Page.Scratch.Add "figurecount" 1 }}
{{ $baseURL := .Site.BaseURL }}
{{- if not ($.Page.Scratch.Get "figurecount") -}}<link rel="stylesheet" href="/css/hugo-easy-gallery.css" />{{- end -}}
{{- $.Page.Scratch.Add "figurecount" 1 -}}
{{- $baseURL := .Site.BaseURL -}}
{{- $thumbnailSize := .Get "thumbnail-size" | default "300x300" -}}
<div class="gallery caption-position-{{ with .Get "caption-position" | default "bottom" }}{{.}}{{end}} caption-effect-{{ with .Get "caption-effect" | default "slide" }}{{.}}{{end}} hover-effect-{{ with .Get "hover-effect" | default "zoom" }}{{.}}{{end}} {{ if ne (.Get "hover-transition") "none" }}hover-transition{{end}}" itemscope itemtype="http://schema.org/ImageGallery">
{{- with (.Get "dir") -}}
<!-- If a directory was specified, generate figures for all of the images in the directory -->
Expand All @@ -19,7 +20,7 @@
{{- $caption := .Name | replaceRE "\\..*" "" | humanize }}<!-- humanized filename without extension -->
{{- $linkURL := print $baseURL ($.Get "dir") "/" .Name | absURL }}<!-- absolute URL to hi-res image -->
{{- $thumb := .Name | replaceRE "(\\.)" ($thumbext | printf "%s.") }}<!-- filename of thumbnail image -->
{{- $thumbexists := where $files "Name" $thumb }}<!-- does a thumbnail image exist? -->
{{- $thumbexists := where $files "Name" $thumb }}<!-- does a thumbnail image exist? -->
{{- $thumbURL := print $baseURL ($.Get "dir") "/" $thumb | absURL }}<!-- absolute URL to thumbnail image -->
<div class="box">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
Expand All @@ -34,8 +35,29 @@
</div>
{{- end }}
{{- end }}
{{- else -}}
<!-- If no directory was specified, include any figure shortcodes called within the gallery -->
{{ .Inner }}
{{- else }}
{{ with .Inner -}}
<!-- If no directory was specified, include any figure shortcodes called within the gallery -->
{{ . }}
{{- else }}
<!-- Generate figures for all page resources of type image. -->
{{- range $.Page.Resources.ByType "image" -}}

Copy link

@guites guites Jan 22, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In order to more closely reproduce the default behaviour, I've added

{{- $caption :=  .Title | replaceRE "\\..*" "" | humanize }}<!-- humanized filename without extension -->

here, so that I could use it in both line 50 (changing alt="{{.Title}}" to alt="{{ $caption }}"

and in line 54, using <p>{{ $caption }}</p> instead of <p>{{ . }}</p>.

Other than that, its working fine. Thanks!!

{{- $thumbnail := .Fill $thumbnailSize -}}
<div class="box">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<div class="img" style="background-image: url('{{ $thumbnail.RelPermalink }}');" >
<img itemprop="thumbnail" src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}" height="{{ $thumbnail.Height }}" alt="{{ .Title }}" /><!-- <img> hidden if in .gallery -->
</div>
{{- with .Title -}}
<figcaption>
<p>{{ . }}</p>
</figcaption>
{{- end -}}
<a href="{{ .RelPermalink }}" itemprop="contentUrl"></a><!-- put <a> last so it is stacked on top -->
</figure>
</div>
{{- end }}
{{- end }}
{{- end }}
</div>