Shopify + Galleria to create photo gallery

New Member
8 0 0

Sorry, don't know how to do the youtube videos. I've only figured out what I posted above by watching Ryan's video, searching google, and trial and error. I should clarify how I added the figcaption tag, this is what the link looks like for each image you want to add an image caption:

<figure>
      <img src="//cdn.shopify.com/s/files/1/1135/1136/files/721LvGo6YaL.jpg?%0D%0A%0D%0A00004XX8908" alt="" />
      <figcaption>YOUR CAPTION TEXT HERE</figcaption>
</figure> 

Obviously you replace my image link with yours. But like I said it did not display on my site because the gallery container is not the right size and the caption is likely concealed behind the gallery thumbnails. I know it was working because I could see the caption in the Shopify visual editor on the image I added it to. Just a matter of playing around with the gallery container, either make it bigger or make your images smaller so there is room for the caption.

EDIT: fixed copy paste error I made in the code

0 Likes
New Member
6 0 0

Hi Ted,

This is your exmple:

<figure>

src="//cdn.shopify.com/s/files/1/1135/1136/files/72JmX_s9FBL.jpg?63999XX95494708908" alt="" /><img

<figcaption>YOUR CAPTION TEXT HERE</figcaption>

</figure>

 

bu this is from w3school:

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

 

Whic one is correct please in terms of <img..>

 

Or yours is kind of copy paste mistake..

0 Likes
New Member
6 0 0

<div class="galleria" style="text-align: left;">
<figure>
<img src="//cdn.shopify.com/s/files/1/1150/7288/files/collector_1024x1024.jpg?17788004331681630207" alt="District Collector Visiting our Display in the Show" />
<figcaption>YOUR CAPTION TEXT HERE</figcaption>
</figure>

</div>
<script>// <![CDATA[
Galleria.loadTheme('https://cdn.shopify.com/s/files/1/1150/7288/t/3/assets/galleria.classic.min.js');
  Galleria.configure ({
       transition: 'flash',
       autoplay: true,
       showinfo: true,
       lightbox: true});
    Galleria.run('.galleria',
       {responsive:true,height:0.5625},
       {autoplay: 5000});
// ]]></script>

 

 

This is my html code. Do you see any problems with this please? I can see the caption in editor. But not published in the view of the page.

0 Likes
New Member
8 0 0

Sorry my bad, I messed up the copy / paste. Should look more like this:

<figure>
      <img src="//cdn.shopify.com/s/files/1/1135/1136/files/721LvGo6YaL.jpg?%0D%0A%0D%0A00004XX8908" alt="" />
      <figcaption>YOUR CAPTION TEXT HERE</figcaption>
</figure> 

I'll edit the post where I made the mistake.

0 Likes
New Member
8 0 0

I don't see anything wrong with your code but in the end I don't think what I'm suggesting will work. I've spent the last hour trying various changes to the code to get the caption to display to no avail. I've tried making the images smaller, making the gallery container larger using a fixed size, and turning off the thumbnails but no matter what the caption is not displayed on the website. I did some googling around and it seems this may be a challenge with Galleria as other developers have struggled as well and not just on Shopify.

If having captions is really important to you there are photo gallery plugins available in the Shopify App store that have all the functionality but they charge fees if you want to use their plugin without advertisements, (POWr Photo Gallery for example).

Sorry, thought I was on to a solution. Hopefully a developer out there will read this thread and figure out how to do it then post the correct answer here.

-Ted

0 Likes
New Member
6 0 0

Thank you, Ted. I keep watching this space. 

0 Likes
New Member
1 0 0

Hi I installed the galleria as per the instructions here. I get it to show up correctly in the chrome browser but not in safari where the image gets cut off. Also although I put the responsive line in there, the image gallery doesn't resize so it doesn't show properly on mobile devices.

Any idea what the issue could be?

You can check a test page here: https://swisssportstyle.ch/pages/gallery-test

Thanks,

Patrice

0 Likes
Shopify Partner
11 0 3

Looks like Galleria made an update that broke everyone's gallery.   

Fatal error: Galleria had problems loading theme at https://cdn.shopify.com/s/files/1/0944/0390/t/54/assets/galleria.classic.min.js. Please check theme path or load manually.

1 Like
Shopify Partner
3 0 0

This is an emarrassing question to ask, but how do you add photos to the gallery?

I'm trying to add a gallery page for Press mention/as seen on type photos for my hair extension site, www.girlgetglamorousHAIR.com

Thank you for the video, it was incredibly helpful going through the coding!!  It has installed correctly, but when I try to add photos to the Page I created for the gallery, it says "more photos here" and no photos show up.

Molly

0 Likes
Highlighted
Shopify Partner
24 0 2

Hi Molly - you can add photos to the page by clicking the image icon in the page editor. After you've added them, you should then be able to copy the image code into the correct spot "More Photos Here"

Actually , I just realized my video shows you how to do this around 3:35.

Shopify Partner, Helping 200 Small Businesses Get Affordable Websites
0 Likes