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

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

okay thank you. WIll look into it