Galleria - will not show any content

[brownphotographic]

Hello, I am also struggling to get galleria working to show images from my flickr site. When I enter the shortcode with the right flickr set ID, I get a black box, with no content.

I am wondering whether I also a similar problem as this user did who mentioned ‘should have a height’. [SOLVED] Javascript in shortcodes

This is the shortcode I am using:

{{< galleria photoset_id="72177720300279105">}}

This is the contents of my galleria.html file in /layouts/shortcodes :

<div class="galleria"></div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/galleria.min.js"></script>
<script src="plugins/flickr/galleria.flickr.min.js"></script>
<style>
    .galleria{ width: 800x; height: 600px; background: #000 }
</style>

<script type="text/javascript">
  (function() {
      Galleria.loadTheme('https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/themes/classic/galleria.classic.min.js');
      Galleria.run('.galleria', {
        flickr: 'set:{{ .Get "photoset_id" }}',
        flickrOptions: {
          sort: 'date-posted-asc'
          imageSize: big
          description
        }
      });
  });
</script>

[brownphotographic]

[jmooring]

To get it working, make these changes:

diff --git a/layouts/shortcodes/galleria.html b/layouts/shortcodes/galleria.html
index 912f8bd60..e90a23e4a 100644
--- a/layouts/shortcodes/galleria.html
+++ b/layouts/shortcodes/galleria.html
@@ -1,8 +1,8 @@
 <div class="galleria"></div>
 
-<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/galleria.min.js"></script>
-<script src="plugins/flickr/galleria.flickr.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/galleria.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/plugins/flickr/galleria.flickr.min.js"></script>
 <style>
     .galleria{ width: 800x; height: 600px; background: #000 }
 </style>
@@ -13,10 +13,10 @@
       Galleria.run('.galleria', {
         flickr: 'set:{{ .Get "photoset_id" }}',
         flickrOptions: {
-          sort: 'date-posted-asc'
-          imageSize: big
-          description
+          sort: 'date-posted-asc',
+          imageSize: 'big',
+          description: false
         }
       });
-  });
+  }());
 </script>

However, you should move the script and style elements to the head section of your base template, including them only when .HasShortcode "galleria" is true. See:
https://gohugo.io/templates/shortcode-templates/#checking-for-existence

[brownphotographic]

@jmooring

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/galleria.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/plugins/flickr/galleria.flickr.min.js"></script>

Thank you for taking the time to look at this! I will look at moving out the script and style elements. Thank you for the tips and links

[brownphotographic]

@jmooring for the head section do you mean themes/layouts/index.html ?

[jmooring]

Without seeing your project in full, I have no idea which template to modify.

See https://discourse.gohugo.io/t/requesting-help/9132.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

[brownphotographic]

Thank you, here’s my repository (public):

GitHub - brownphotographic/brownphotographic

The page with the test galleria gallery on it is here… it currently publishes via github to aws so there may be a little lag as I just pushed it

Gallery: San Francisco Bay

[jmooring]

First, you missed one the required changes to the shortcode. Look at the line just before the closing script tag and compare it to my initial response.

Second, override themes/tranquilpeak/layouts/partials/head.html by copying it to a layouts/partials directory in the root of your project.

mkdir layouts/partials
cp themes/tranquilpeak/layouts/partials/head.html layouts/partials/

Then conditionally add the script and style elements, and remove them from your shortcode.

Something like:

{{ if .HasShortcode "galleria" }}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/galleria/1.6.1/galleria.min.js" integrity="sha512-vRKUU1GOjCKOTRhNuhQelz4gmhy6NPpB8N41c7a36Cxl5QqKeB9VowP8S7x8Lf3B8vZVURBxGlPpvyiRHh+CKg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/galleria/1.6.1/plugins/flickr/galleria.flickr.min.js" integrity="sha512-RJXXLXU7ShN5wFetviNEP7+HRIyy+JUNzMyiiIFlw7RrZWrbGs6EmuoiHmn7sU912bbejzXQE240mfvT4knJ8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/galleria/1.6.1/themes/classic/galleria.classic.min.js" integrity="sha512-CXnDPXpM4UrG0VW6ZO7JxTmpYksq5lGw6bO1N7cmNnwGM6LrVvZnR1shSMov2sm8+kkMTMi+ZYqc8qK208eD2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/galleria/1.6.1/themes/classic/galleria.classic.min.css" integrity="sha512-gow3UhXUJqqIJove0INwWGYHczVoqbUfozcCToxuy2c3IRbMzImXzwkMP4mrkZDiba6VHcdWYMXkjQQSKZz2BQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <style>
    .galleria{ width: 800x; height: 600px; background: #000 }
  </style>
{{ end }}

[brownphotographic]

Thanks so much for the help!

I followed the instructions. I think I am at one last roadblock, which is down to me not installing galleria correctly in the first place. I will post separately about that.

[brownphotographic]

Installing galleria in hugo

Hi, related to my request to getting galleria working (Galleria - will not show any content) I have now realized that I have not installed galleria correctly. Per the instructions below, I need to place galleria in a spot on my web server, I guess in any place where I can get a path to it… https://galleriajs.github.io/docs/getting_started/beginners_guide.html I’m not sure with hugo where I would place galleria: can I just copy galleria into the root of my repository? Would hugo server barf …

[jmooring]

The code code in my previous responses includes a link to a CDN; it is not necessary to install anything locally. Try it:

git clone --single-branch -b hugo-forum-topic-39365 https://github.com/jmooring/hugo-testing hugo-forum-topic-39365
cd hugo-forum-topic-39365
hugo server

Files of interest:

• layouts/shortcodes/galleria.html
• layouts/_default/baseof.html (lines 16-25)

[brownphotographic]

Thank you. I have been busy with work, will try getting back to this project shortly.