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.

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

Include images from leaf bundle #54

Open
arjunsarin opened this issue Jan 22, 2020 · 1 comment
Open

Include images from leaf bundle #54

arjunsarin opened this issue Jan 22, 2020 · 1 comment

Comments

@arjunsarin
Copy link

When giving a directory to use for the gallery {{< gallery dir="/img/your-directory-of-images/" />}} the static folder is assumed as root for the given parameter. However, when using leaf bundles, images and pages live in the same folder (or in a subfolder):

├── 2018
│   ├── post-about-animals
│   │   ├── img
│   │   │   ├── elephant.jpg
│   │   │   ├── zebrajpg
│   │   │   ├── tiger.jpg
│   │   ├── index.md
└── index.md

Now, I don't see a way to use the images in the post's img folder to use as a gallery. As far as I understand the documentation, these images should be accessible as pages resources via .Resources.

I am new to Hugo and therefore not sure if this is really a missing feature or if I just don't see the solution in that case. I would appreciate some guidance here, so that I can see if I can modify shortcode for that case or if this is already supported.

@arjunsarin
Copy link
Author

arjunsarin commented Jan 22, 2020

I modified the shortcode so that it works for page bundles now. However, old function is lost by now. Please take a look.

<!--
Put this file in /layouts/shortcodes/gallery.html
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 }}
<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 .Page.Resources.ByType "image" -}}
		{{- range . -}}
			<!-- skip files that aren't images, or that inlcude the thumb suffix in their name -->
			{{- $thumbext := $.Get "thumb" | default "-thumb" }}
			{{- $isthumb := .Name | findRE ($thumbext | printf "%s\\.") }}<!-- is the current file a thumbnail image? -->
			{{- $isimg := lower .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp)" }}<!-- is the current file an image? -->
			{{- if and $isimg (not $isthumb) }}
				{{- $caption :=  .Name | path.Base | replaceRE "\\..*" "" | humanize }}<!-- humanized filename without extension -->
				{{- $linkURL := .Permalink }}	<!-- relative URL to hi-res image -->
				{{- $thumb := .Name | replaceRE "(\\.)" ($thumbext | printf "%s.") }}<!-- filename of thumbnail image -->
				{{- $thumbURL := print .Permalink | replaceRE "(\\.)" ($thumbext | printf "%s.") }}<!-- absolute URL to thumbnail image -->
				{{- $thumbexists := fileExists $thumbURL}} <!-- does a thumbnail image exist? -->
				<div class="box">
				  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
				    <div class="img" style="background-image: url('{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}');" >
				      <img itemprop="thumbnail" src="{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}" alt="{{ $caption }}" /><!-- <img> hidden if in .gallery -->
				    </div>
			      <figcaption>
		          <p>{{ $caption }}</p>
			      </figcaption>
				    <a href="{{ $linkURL }}" itemprop="contentUrl"></a><!-- put <a> last so it is stacked on top -->
				  </figure>
				</div>
			{{- end }}
		{{- end }}
	{{- else -}}
		<!-- If no directory was specified, include any figure shortcodes called within the gallery -->
	  {{ .Inner }}
	{{- end }}
</div>

I can create a suitable PR if we have an idea how to merge this one into master. However, guidance from more experienced Hugo users is needed here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant