Possible to link gallery image to a youtube URL instead?

support
1

In my front matter, I have this code:

[[gallery_item]]
album = "gallery"
image = "https://youtu.be/B1go9DPd_xg"
caption = "Dark theme"

and it is activated by:

{{< gallery album="gallery" >}}

I’m wondering if we can get a video capture still as the image on the gallery, and upon clicking into the image, it will show a youtube video instead?

image
image.jpg1920×1080 499 KB

However, the issue I am facing is that there seems to be no image in the gallery when the image is linked to a youtube url.

image
image.png1231×698 101 KB

Could someone share some tips? Thank you!

2

The gallery shortcode doesn’t come with Hugo, but is some custom one from the Academic theme you have chosen to use with it.
It does not support youtube urls, but you can probably modify it to work with them. Find theme/academic/layouts/shortcodes/gallery.html and see how it is implemented.
There’s something like this:

  {{ range (where $.Page.Params.gallery_item "album" $album) }}
  {{/* Set image path. */}}
  {{ $.Scratch.Set "src" .image }}
...
  <a data-fancybox="gallery{{ with .album }}-{{.}}{{ end }}" {{ with .caption }}data-caption="{{.}}"{{ end }} href="{{$.Scratch.Get "src"}}">
    <img src="{{$.Scratch.Get "src"}}" alt="">
  </a>

You can modify it to check if instead of “image” there’s a “youtube_video” parameter and display an iframe:

<img src="{{$.Scratch.Get "src"}}" alt="">
{{ with .youtube_video }}
   <iframe src="{{ . }}" />
{{ end }}

… and use youtube_video = "https://link-to-your-EMBED-youtube-url" instead of image in front-matter.
Otherwise you need to contact the developer or choose / find another theme that supports it.

3

thanks for helping! Unfortunately it does not work though :confused: I’ll check in with the developer (: Have a great day ahead!