HUGO

Connecting fancybox gallery through hugo and use netlify cms to upload bulk images

I have a fancy box gallery in my website and i have done it using php. now i need to convert it into hugo and use netlify cms to upload bulk pictures at once around 50 at a time. On the front end in one page, 12 pictures will be displayed and pagination will be used to see other pics.

  1. What is the hugo codes which i have to use to make it happen.
  2. How to connect to netlify cms.

This is static site live now,
https://www.geotattoos.com/Tattoo_Pictures.html

The Gallery html code,

<!-- gallery-new-fancybox-->
<div class="container">
    <h1 class="text-center td mb-5">TATTOO MAKING GALLERY</h1>
    <div class="row" style="margin:0px">
        <div class="col-lg-3 col-md-4 col-xs-4 thumb">
            <a href="images/gallery/tattoo_making/GeoTattoos_Making_1.jpg" class="fancybox" aria-label="Geo Tattoos Gallery" rel="group">
                <img  src="images/gallery/tattoo_making/GeoTattoos_Making_1.jpg" class="zoom" alt="Geo Tattoos Gallery">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-4 thumb">
            <a href="images/gallery/tattoo_making/GeoTattoos_Making_2.jpg"  class="fancybox" aria-label="Geo Tattoos Gallery" rel="group">
                <img  src="images/gallery/tattoo_making/GeoTattoos_Making_2.jpg" class="zoom" alt="Geo Tattoos Gallery">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-4 thumb">
            <a href="images/gallery/tattoo_making/GeoTattoos_Making_3.jpg" class="fancybox" aria-label="Geo Tattoos Gallery" rel="group">
                <img  src="images/gallery/tattoo_making/GeoTattoos_Making_3.jpg" class="zoom" alt="Geo Tattoos Gallery">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-4 thumb">
            <a href="images/gallery/tattoo_making/GeoTattoos_Making_4.jpg" class="fancybox" aria-label="Geo Tattoos Gallery" rel="group">
                <img  src="images/gallery/tattoo_making/GeoTattoos_Making_4.jpg" class="zoom" alt="Geo Tattoos Gallery">
            </a>
        </div>
         <div class="col-lg-3 col-md-4 col-xs-4 thumb">
            <a href="images/gallery/tattoo_making/GeoTattoos_Making_5.jpg" class="fancybox" aria-label="Geo Tattoos Gallery" rel="group">
                <img  src="images/gallery/tattoo_making/GeoTattoos_Making_5.jpg" class="zoom" alt="Geo Tattoos Gallery">
            </a>
        </div>
         <div class="col-lg-3 col-md-4 col-xs-4 thumb">
            <a href="images/gallery/tattoo_making/GeoTattoos_Making_6.jpg" class="fancybox" aria-label="Geo Tattoos Gallery" rel="group">
                <img  src="images/gallery/tattoo_making/GeoTattoos_Making_6.jpg" class="zoom" alt="Geo Tattoos Gallery">
            </a>
        </div>
         <div class="col-lg-3 col-md-4 col-xs-4 thumb">
            <a href="images/gallery/tattoo_making/GeoTattoos_Making_7.jpg" class="fancybox" aria-label="Geo Tattoos Gallery" rel="group">
                <img  src="images/gallery/tattoo_making/GeoTattoos_Making_7.jpg" class="zoom" alt="Geo Tattoos Gallery">
            </a>
        </div>
         <div class="col-lg-3 col-md-4 col-xs-4 thumb">
            <a href="images/gallery/tattoo_making/GeoTattoos_Making_8.jpg" class="fancybox" aria-label="Geo Tattoos Gallery" rel="group">
                <img  src="images/gallery/tattoo_making/GeoTattoos_Making_8.jpg" class="zoom" alt="Geo Tattoos Gallery">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-4 thumb">
                <a href="images/gallery/tattoo_making/GeoTattoos_Making_9.jpg" class="fancybox" aria-label="Geo Tattoos Gallery" rel="group">
                    <img  src="images/gallery/tattoo_making/GeoTattoos_Making_9.jpg" class="zoom" alt="Geo Tattoos Gallery">
                </a>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-4 thumb">
                <a href="images/gallery/tattoo_making/GeoTattoos_Making_10.jpg"  class="fancybox" aria-label="Geo Tattoos Gallery" rel="group">
                    <img  src="images/gallery/tattoo_making/GeoTattoos_Making_10.jpg" class="zoom" alt="Geo Tattoos Gallery">
                </a>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-4 thumb">
                <a href="images/gallery/tattoo_making/GeoTattoos_Making_11.jpg" class="fancybox" aria-label="Geo Tattoos Gallery" rel="group">
                    <img  src="images/gallery/tattoo_making/GeoTattoos_Making_11.jpg" class="zoom" alt="Geo Tattoos Gallery">
                </a>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-4 thumb">
                <a href="images/gallery/tattoo_making/GeoTattoos_Making_12.jpg" class="fancybox" aria-label="Geo Tattoos Gallery" rel="group">
                    <img  src="images/gallery/tattoo_making/GeoTattoos_Making_12.jpg" class="zoom" alt="Geo Tattoos Gallery">
                </a>
            </div> 
            <div class="col-lg-12 col-md-12 col-xs-12">
                <a href="Tattoo_Pictures.html">
                    <button class="btn mtmob-2" id="submit" type="submit" name="submit" value="Submit">View more</button>
                    </a>
            </div>
    </div>
</div>

Fancybox link,
https://fancyapps.com/fancybox/

Kindly anyone help me with this. Thanks !

In short, you can place all your photos in a folder, add it as a resource to the page and range through the files.

There is a thread with a similar implementation here:

I use page bundles an have the pictures in sub-dir gallery
In frontmatter I set

categories  = ["Photo"]
layout      = "gallery"

The template photo/gallery.html is

{{ define "main" }}
<titel>
<h1><span class="dn di-l">{{ site.Title  | markdownify }} &nbsp;</span><i class="fas fa-dragon fa-fw"></i>&nbsp;&nbsp;{{ .Page.Title }}</h1>
{{ partial "single-head" . }}
</titel>
<article class="bt bb bw2 b--blue">{{ .Content }}<br/>
{{range .Resources.Match "gallery/*" }}{{ $original := . }}
	{{ $.Scratch.Set "image" ($original.Fit "370x246") }}{{ $image := $.Scratch.Get "image" }}
	<a data-fancybox=gallery href={{$original.RelPermalink }}><img class="ma1 shadow-3" src={{ $image.RelPermalink | relURL}} width={{ $image.Width }} height={{ $image.Height }} alt="{{.Name}}" /></a>
{{ end }}
</article>
{{ end }}

my meta-partial contains

{{if (eq .Type "photo") -}}
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
	<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
{{- end}}
2 Likes

okay, will try this and see. Thank you

1 Like

Hi,

Can u send me the github repo of the website where u hv used this code?.

Sorry to let you waiting

My repo & site is private. I uploaded a condensed part for you and all other interested.

The theme was based on “strata”, but nearly all is changed.
Now it is a responsive design based on an atomic CSS (like Hugo’s site).

1 Like

okay thank you. WIll look into it

Hi Brunoamaral,
Thanks for the post. I want to use a different gallery code like fancybox, because I felt it was simple and I’m used to it.

So I searched and got this link:
fancybox gallery with hugo
and tried the same, but I’m not able to achieve it. In my site, there will be more than 1 page using the same shortcode. How do I do it?

I tried contacting that developer but haven’t got a response. Please let me know how to achieve this. Thank you.

HI,

you find all of this on my HugoSample site above. There is a gallery.html template for it. Look in the /photo folder for markdown and image files and in the /themes/photon/layouts/photo for the template.

It works well when the layout matches the folder name.

I have this,


this works well baseurl/test/tm/

but I have these 3 pages below for which I’m not able to achieve the folder images upload methos. Right now its done using this code and have just kept 16 .md files for each pic. There are more than 300 pics and will increase.

<div class="container my-5">
    <div class="masonry">
        {{range $index, $val := .Site.Taxonomies.tags.picstm}}
        <div class="masonry-item">
            <a data-fancybox="gallery" href="{{.Page.Params.image}}" aria-label="{{.Name}}">
                <img src="{{.Page.Params.image}}" class="masonry-content lazyload" alt="{{.Name}}">
            </a>
        </div>
        {{end}}
    </div>
</div>


I tried changing the layout name matching the folder name of pictures but didn’t work,

and also the layout: “gallerytm”
What mistake i have done?
And the above 3 pages under the gallery should be the same and should call the same gallery code as is used in test/tm page,

<div class="container my-5">
    <div class="masonry">
        {{range .Resources.Match "gallery/*" -}}
        {{ $image := . }}
        <div class="masonry-item">
            <a data-fancybox="gallery" href="{{.RelPermalink}}" aria-label="{{.Name}}">
                <img src="{{ $image.RelPermalink }}" class="masonry-content lazyload" src="{{ $image.RelPermalink }}"  alt="{{.Name}}">
            </a>
        </div>
        {{- end }}
    </div>
</div>

And I should just change the folder name right?

Kindly let me know what should I do
Thanks

for my samples

1st ./gallery is coded
{{range .Resources.Match "gallery/*" -}}

2nd layout = gallery references to layouts/phonon/photo/gallery.html

3rd this works with page bundles
for every gallery you need a directory under content/photo with subdir gallery and markdown in index.md

— if you download my sample and put hugo in the top directory, all shoud work fine

1 Like

@ju52
I got it. Thank you. This is what I did
content
And I removed the subfolder under themes/layout and I put only layout/gallery/single.html

which rendered all the three pages,
/gallery/tattoo-making/
/gallery/tattoo-removal/
/gallery/tattoo-training/
it works even without layout: in front matter

But can I add thumbnails in the same code? How to do it?
And and can we upload images through netlify admin in this code?

check out my template, it generates thumbnails, change the sizes for use use case

1 Like

PS: I don’t use netlify - no help

Since I use masonry layout, this didn’t suit me. I have already tried. So I increased the column count to 6, and reduced the width to 200px in CSS. It helped. Thank you spending time to solve. Regarding netlify, I’ll try in that forum.

Regards,
Balachandiran
https://www.tensketch.com/

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.