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

TenSketch · June 1, 2019, 5:51am

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.

What is the hugo codes which i have to use to make it happen.
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 !

brunoamaral · June 1, 2019, 8:18pm

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:

ju52 · June 4, 2019, 5:48pm

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}}

TenSketch · June 7, 2019, 12:36pm

okay, will try this and see. Thank you

TenSketch · June 18, 2019, 4:26am

Hi,

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

ju52 · June 19, 2019, 5:24am

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).

TenSketch · June 20, 2019, 6:58am

okay thank you. WIll look into it

TenSketch · August 7, 2020, 5:13am

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.

ju52 · August 7, 2020, 2:11pm

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.

TenSketch · August 8, 2020, 2:19pm

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

ju52 · August 8, 2020, 2:33pm

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

TenSketch · August 9, 2020, 10:13am

@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?

ju52 · August 9, 2020, 1:34pm

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

github.com

gj52/HugoSample/blob/master/themes/photon/layouts/photo/gallery.html

{{ define "main" }}
<header>
	<h1><span class="dn di-l">{{ site.Title | markdownify }} &nbsp;</span><i class="fas fa-dragon fa-fw"></i>&nbsp;&nbsp;{{ .Page.Title | markdownify }}</h1>
	{{ partial "single-head" . }}
</header>
<article>
	{{ with .Content}}{{ . }}{{end}}
	<div class=gallery>
	{{range .Resources.Match "gallery/*" -}}{{$alt := .Name}}{{ $image := .Fit "330x220 jpg #ffffff q75" }}{{ $preview := .Fit "33x22 jpg #ffffff q50" }} {{ $title := ""}}
		<a data-fancybox=gallery href={{.RelPermalink}}><figure><img 
			loading=lazy class=foto src={{ $image.RelPermalink }} 
			max-width={{ $image.Width }} max-height={{ $image.Height }} alt="{{ $alt }}" title="{{$title}}"
			style="background: url(data:image/jpeg;base64,{{ $preview.Content | base64Encode  }}); background-size:100% 100%;" /></figure></a>
	{{- end }}
	</div>
{{ partial "prevnext" .}}	
</article>
{{ end }}

ju52 · August 9, 2020, 1:35pm

PS: I don’t use netlify - no help

TenSketch · August 9, 2020, 4:57pm

ju52:

{{range .Resources.Match "gallery/*" -}}{{$alt := .Name}}{{ $image := .Fit "330x220 jpg #ffffff q75" }}{{ $preview := .Fit "33x22 jpg #ffffff q50" }} {{ $title := ""}}
		<a data-fancybox=gallery href={{.RelPermalink}}><figure><img 
			loading=lazy class=foto src={{ $image.RelPermalink }} 
			max-width={{ $image.Width }} max-height={{ $image.Height }} alt="{{ $alt }}" title="{{$title}}"
			style="background: url(data:image/jpeg;base64,{{ $preview.Content | base64Encode  }}); background-size:100% 100%;" /></figure></a>
	{{- end }}

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/

system · August 11, 2020, 4:57pm

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

Topic		Replies	Views
Updatable Image Gallery support	0	579	July 27, 2018
How to paginate gallery support pagination	2	780	August 13, 2020
Hugo, Netlify CMS and Galleries support	1	822	May 31, 2017
How to use Hugo image processing? support	2	828	April 6, 2021
Paginated gallery possible? support pagination	4	828	August 13, 2020

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

Related topics