Best Photo Gallery For Good Page Load

Working in XDP X version 19, on a windows 11 Pro.
I’m nearing completion of website.
Doing some fine tuning.
I am hung up with how to best display photos.

Current website in development:

https://draft-review.com/

Photo gallery on Residential and Commercial pages are memory intensive and slow to load.
And time intensive on the design side.
This customer regularly sends photos to add, and we drop older pictures.
Also likes photos to auto start and have description.

Is there a gallery template or widget, or software that may work better for this scenario?

As always, I sure appreciate insights from folks here.

Hi Sue. I’ve played a bit with some of the gallery offerings from Xara. “Some” of the smart grids work, others not. Standard with me is making my own smart grid, with a click on the photo to enlarge. I’ve got a terribly picture heavy site. Pardon some of the blurry pop ups. This was a Xara offering.

https://melfortmuseum.org/indigenous...ay%202022.html

Many will chime in with some other ideas. But I think a simple grid, with some pop up effects work well.

-Bill

Bill,

Thank you for sharing your thoughts and website link.
Your website is beautiful.

I dug through previous threads and found @Acorn shared this with me:

https://www.talkgraphics.com/showthr...804#post513804

This is the gallery I'm currently using, and it is great!
It was helpful to find this post by Acorn to refresh my memory on edits.

Issue of large amount of photos for customer had been addressed here before.
Since this customer asked me to overhaul website, it brought me back here to see if there was a new or better approach to large galleries.
The customer agreed to drop old pics so we can downsize gallery some.

Question: What is suggested max number of pics for gallery and/or max file size of page for best page load?

Also, it seems one of the moderators shared link to website that helps create galleries.
I looked, and haven't found in my threads here. Perhaps I'm mistaken.

I plan to continue with current gallery, unless someone points me another direction.
Thinking of variation of Acorn's wondering if grid without shadow and frame softgroup will save overall size?
If not, I do like look as is.

Sue,

These examples follow the create, format one, and clone to match the grid size you require; the key attribute is that they transition from a desktop to mobile grid. As each is shared between variants, changing in one variant changes the other:

https://initiostar.co.uk/demo/Photo_Template/

https://initiostar.co.uk/demo/simple_grid/

Any number of variations to this approach.

Number of photos is a design choice, but I would have thought that much more than 20-30 unless each is significantly different would not be viewed.

The performance with the examples seems OK.

Both, there are several issues with either solution.

Topmost, they rely on Highslide JS, which is now dead in the water.
Xara is still using Version: 4.1.13 (2011-10-06), a tad old.

Sue has some 70 images on a page, each around 60kB, so loading in the site requires the design file to be holding 10MB in images and probably far more if they are originals scaled down.
This is why Sue has a design file of around 150MB.

Sue has mentioned frequent image changes.
Republishing for one image is a sorry state of affairs and ties Sue into a never-ending support cycle.
I would only do this if I had a good maintenance contact.

Highslide JS can be manipulated to link to external assets but there would be a lot of bespoke code to achieve this.

So I consider the following are Sue's actual needs:

1. Have a Thumbnail Image Gallery capable of handling 100+ images per page.
2. All large images to be treated as external assets; not part of the design file.
3. Should retain the original image file name for better Accessibility, the Cinderella to her ugly Step-Mother, SEO.
4. Each image is to have an associated description.
5. All metadata should be external to the design file.
6. Does not rely on legacy or moribund widgets or components.
7. Should only be a Just-In-Time download when an image is expanded; the current terminology is lazy loading.
8. The Gallery can be invoked to present the large images sequentially in a carousel.
9. The carousel can be paused.
10. The carousel can be restarted at any picked thumbnail.

Personally, I would find a carousel a lazy approach and would prefer the viewing of a large image to be manual selection.

My goto for the above would have to be https://nanogallery2.nanostudio.org/builder.html. I don't believe you can achieve 8,9 or 10 but the overall impact of the design is superb.
The only thing that differs from a Xara design is that it requires a separate Thumbnail.
Now in the past, I have used Get fills in the Fill gallery and navigated to an external local folder of images and linked to that. In doing so, Xara creates a xarainfo sub-folder of 128px square Thumbnails.
If the images are already on a web server, you could set up a network share to a spare drive letter and access them that way.
Remember to delete the installed from from the Fill gallery, you were only using that to get some thumbs.
There are plenty of Thumbnail generators around.

You would publish and update the nanogallery pages separate from Xara.
To see changes all you need is a refresh of the published website pages holding a Placeholder IFRAME to the nanogallery HTML page.

What you do not want to do is embed the nanogallery code directly into a Placeholder.
This is for demonstration only: Attachment 133962.
Instead your Placeholder must be a link to a web page otherwise you lose the decoupling of the gallery and the Xara design.

Note, it is only three images but I have created a simple gallery across two variants, all in 25kB. Beats 150MB.

Acorn

Gary, thank you for sharing the links solutions that you thought of.
I did take some time to check it out. Perhaps that may work in another project.

Acorn, thank you for the detailed information.
Your goto nano slider is the webpage I was thinking of that was shared somewhere here before.

It looks like there will be a little bit of a learning curve for me to digest what you’re sharing.
Ultimately, though it looks like it would be a much better solution once I learn it.
Since my current gallery has been real labor intensive to edit, I'm ready/willing to learn.
I may pop in with a question as I work on it.

Interesting when you talk about your preference to viewing of large image to be manual selection. I think that looks better.
The customer likes auto start. I’ll run the idea by him to see if he might change his mind.
It’s hard sometimes when people have preferences that I don’t think flow or look nice, or send me bad quality pictures.

Many thanks to everyone that shares insights.

Quote:

---

Originally Posted by hotrodsue

Gary, thank you for sharing the links solutions that you thought of.
I did take some time to check it out. Perhaps that may work in another project.

Acorn, thank you for the detailed information.
Your goto nano slider is the webpage I was thinking of that was shared somewhere here before.

It looks like there will be a little bit of a learning curve for me to digest what you’re sharing.
Ultimately, though it looks like it would be a much better solution once I learn it.
Since my current gallery has been real labor intensive to edit, I'm ready/willing to learn.
I may pop in with a question as I work on it.

Interesting when you talk about your preference to viewing of large image to be manual selection. I think that looks better.
The customer likes auto start. I’ll run the idea by him to see if he might change his mind.
It’s hard sometimes when people have preferences that I don’t think flow or look nice, or send me bad quality pictures.

Many thanks to everyone that shares insights.

---

Sue, it should not be too hard.

Follow these steps:

1. Create an on-line folder for your images: .../Images/Commercial - note the full path, your Base URL.
2. Do the same for your Thumbnails - try the Fill gallery approach as a first go. This is your Thumbnail URL. If it is a sub-folder, you can use relative addressing.
3. Open https://nanogallery2.nanostudio.org/builder.html
   
   1. Input your Base URL
   2. Give the Gallery its name - the variant can be tweaked separately
   3. Click add image
      
      1. Create a Title
      2. Create a Description
      3. Input your Thumb Path to the thumbnail file like xarainfo/<name>.png
      4. Input the <name>.png for the main image
      
      
   4. Click apply settings and build gallery
   5. Copy to clipboard
   6. paste into atext editor and save out as gallery.htm
   7. Upload gallery.htm
   8. Test
   9. Rinse and repeat
   10. Tweak the setting to suit

Only when happy worry about accessing it from your design.

Acorn

Gary,

Thank you for step-by-step directions.

Earlier, I did look at their user guide.
Also, looked on YouTube to see if anyone had done a video.

Tomorrow morning I will be back at it and will give your steps a try.

Many thanks,

Sue

Hi Sue, one issue with your portfolio pages is they are hugely image intensive as stated by others and also of concern to yourself.

For example your commercial page has 13 x 5 thumbnail images = 65 images.
It also has 13 x 5 fullscale images = another 65 images.
As well, each image has a background image with a drop shadow. It's not a named image and therefore whilst very small, the image whilst exactly the same is loaded as a seperate image 65 times.
A lot of call's for images on the server.
65 x 3 = 195 calls.

As Acorn states Highslide is now old hat and probably not the best way forward.

With image intensive pages I think LazyLoading is the way to go. Acorn & Siran have covered this alternative very well in the past. What this entails is that images 'below the fold' ( The viewable area of the page) aren't loaded on page load, but delayed until you scroll down the page, loading each image as it comes into view. Far better than loading all images into the page whether they're viewed or not.

All that said, I'm not the person to implement it or show you how to do it. I can achieve it after many attempts on my own but I'd leave to the likes of Acorn & Siran to give precise examples.

DEMO This only loads the images as you scroll the page.

Quote:

---

Originally Posted by Egg Bramhill

Hi Sue, one issue with your portfolio pages is they are hugely image intensive as stated by others and also of concern to yourself.

For example your commercial page has 13 x 5 thumbnail images = 65 images.
It also has 13 x 5 fullscale images = another 65 images.
As well, each image has a background image with a drop shadow. It's not a named image and therefore whilst very small, the image whilst exactly the same is loaded as a seperate image 65 times.
A lot of call's for images on the server.
65 x 3 = 195 calls.

As Acorn states Highslide is now old hat and probably not the best way forward.

With image intensive pages I think LazyLoading is the way to go. Acorn & Siran have covered this alternative very well in the past. What this entails is that images 'below the fold' ( The viewable area of the page) aren't loaded on page load, but delayed until you scroll down the page, loading each image as it comes into view. Far better than loading all images into the page whether they're viewed or not.

All that said, I'm not the person to implement it or show you how to do it. I can achieve it after many attempts on my own but I'd leave to the likes of Acorn & Siran to give precise examples.

DEMO This only loads the images as you scroll the page.

---

Egg, you forgot variants will times this number of accesses.

nanogalley has Lazy loading built in but lazy loading addresses only half the problem.

The other half is the design file size will cripple even simple editing. I have been there and it is not pleasant. This belies Xara's claims of DTP as well as typing hand having a lag of seconds is horrendous.

Back on Sue's case. She faces these constraints just to add or delete an image. Think of the effort to re-arrange the images.

I chose nanogalley to address my original point #5: "All metadata should be external to the design file."
By editing an HTML file separate from the published site, you achieve this, adding, deleting and re-arranging, very quickly without pain.
The design file is untouched.
Control could be passed back to the client...

The use of nanogallery Builder is still a halfway house but it is within the capabilities of most.
My own preference would be to take a further step and make the metadata a JavaScript file that delivers an array of objects that are very easy to manipulate within the design.
This is the makings of a Content Management System (CMS).
A CMS that Xara could build in without recourse to server applications.

Acorn

Egg, thank you for taking time to share your observations and a demo.

Acorn, you just confirmed some questions I had.
Glad to know nanogallery approach will resolve the issues I’m currently fighting with when adding, deleting and rearranging pictures.

Getting ready to start my first gallery, and will start with just a few images to make sure I get the hang of it.

Will jump back on here with any questions. Will also report back when I’ve got it.

Many thanks,

Sue

Quote:

---

Originally Posted by hotrodsue

Egg, thank you for taking time to share your observations and a demo.
Acorn, you just confirmed some questions I had.
Glad to know nanogallery approach will resolve the issues I’m currently fighting with when adding, deleting and rearranging pictures.
Getting ready to start my first gallery, and will start with just a few images to make sure I get the hang of it.
Will jump back on here with any questions. Will also report back when I’ve got it.
Many thanks, Sue

---

Sue, in case you did not notice, the Builder does not retain any information so when you come to using it in anger the modification will be with a text editor on the HTML file directly. The developer did seemingly start on this but he must have veered off the idea.

Acorn

Quote:

---

Originally Posted by Acorn

Sue, in case you did not notice, the Builder does not retain any information so when you come to using it in anger the modification will be with a text editor on the HTML file directly. The developer did seemingly start on this but he must have veered off the idea.

Acorn

---

Acorn,

I just popped on here to ask questions and see that the Builder does not retain any information.
I did not notice. Thank you for bringing to my attention.
My guess is you still think this Builder is the best solution for my project?

If I'm understanding; the Builder creates code, using the files I point to saved on my URL.
Then I use a text editor on the HTML file directly. Correct?

Now on to where I'm at....

I’m stuck on using Get fills.
Is the purpose of this process to generate thumbnails? Or link to the thumbnails?

In Fill gallery, I clicked Get fills and it displays folders with Xara fills to download.
I clicked Disc fills and navigated to a folder that had images.
Attached is screen cap. Am I going in the right direction?
Attachment 133967

Also, you suggest using original image file name for better accessibility.
Do you mean image file name like IMG-8273.jpg -OR-
do you suggest naming each image, something descriptive, like commercial1.jpg?

Currently, on my computer I have multiple image folders within commercial folder.
I create a new folder inside commercial folder for each new set of pictures representing each paving job.
Open to suggestions if this is making it more complicated.

I’m very excited to move along with this project today.
I can see once I get it. It is going to be so much better. And a real timesaver.

Thanks,

Sue

Quote:

---

Originally Posted by hotrodsue

Acorn,

I just popped on here to ask questions and see that the Builder does not retain any information.
I did not notice. Thank you for bringing to my attention.
My guess is you still think this Builder is the best solution for my project?

If I'm understanding; the Builder creates code, using the files I point to saved on my URL.
Then I use a text editor on the HTML file directly. Correct?

Now on to where I'm at....

I’m stuck on using Get fills.
Is the purpose of this process to generate thumbnails? Or link to the thumbnails?

In Fill gallery, I clicked Get fills and it displays folders with Xara fills to download.
I clicked Disc fills and navigated to a folder that had images.
Attached is screen cap. Am I going in the right direction?
Attachment 133967

Also, you suggest using original image file name for better accessibility.
Do you mean image file name like IMG-8273.jpg -OR-
do you suggest naming each image, something descriptive, like commercial1.jpg?

Currently, on my computer I have multiple image folders within commercial folder.
I create a new folder inside commercial folder for each new set of pictures representing each paving job.
Open to suggestions if this is making it more complicated.

I’m very excited to move along with this project today.
I can see once I get it. It is going to be so much better. And a real timesaver.

Thanks,

Sue

---

Sue, nanogallery is still the best. Builder goes a long way to getting you started. The ng documentation would be the next step-up as i have been discovering.

Here is a demo file for 154 images all on one page.
Yes they are repeats of the same three images but I was establishing boundaries.

Attachment 133968 - note the file size.
Now to run this you need the external control file: Attachment 133969
To re-assemble, you need this text file in an adjacent folder that is called nanogallery - Gallery Slideshow_xar_files.
Now this may get a bit tricky if your design files are .WEB.
So to achieve proper linkage:

1. Open and immediately save my XAR file. It should now be a WEB file.
2. Click on the Content text, top left and in Web Properties > Link > Link to file, locate and select my Content.txt file.
3. You content file should now appear in nanogallery - Gallery Slideshow_web_files > Content.txt, beside nanogallery - Gallery Slideshow.web.
4. Save your WEB file and Preview.

You will now see a 5x4 grid with controls. There are 154 Thumbnails accessed by the bottom bars or the navifation arrows.
Click any one and you see the full image.
After 5.5 seconds it moves to the next one - I found the Slider controls and settings. Finally! Top left is the player control.

ng requires jQuery so the Black Placeholder has a Name of UseJQuery.
The Black Placeholder is a <div> tag with an ID to allow the gallery to be placed anywhere. far easier than an IFRAME.
You also have Title labels in this demo.
I did not set up for Descriptions yet.

---

I would rename to describe the image - always better.

The Get fills action to to set Xara to use your images. In doing so, a side-effect is Xara creates Thumbnails, for free.
Now, technically, the Thumbnail could just be left as the large image but boy will you get really crisp thumbs.
As the designer you need to either accept Xara's offering, ng's cover approach or bespoke each one by hand to maximise presentation impact.
If you have your images across a number of folders, you need to sit down and work out where each image and its thumb actually are.
I use a folder & file tool called Everything that allows pathing to be quickly copied. Copy and paste, by eye, is just as good.

Acorn

Acorn, thank you for confirming nanogallery is still the best. Will check the NG documentation.

I checked the demo file you created.
Created the adjacent folder and saved the text file there.
Able to view the 5 X 4 grid with controls.

I download your Xara file and open it, I get this warning.
When I go to save, the only option is .XAR, so I did not save it as WEB.
Perhaps it’s because the version XDP Pro is different from yours.
Attachment 133970

Thank you for detailed information about the naming of the black placeholder requires jQuery.
The div tag on the image placeholder, definitely far easier than an IFRAME.
The title labels are great.
I will look at setting up for descriptions.

__________________________________________________ __________________________________________________ ___________________________

Thanks for your feedback to rename to describe the image.
Thanks for the Get fills action details.
Will better organize my image and thumbs.
I will check out the folder and files tool called Everything.

Your demo and details have given me a big head start.

For now I will plan to organize, and in the coming days I will implement nano gallery.
I may pop back on here for more direction.

Thank you,

Sue

@Sue, the 'Warning' is really an 'Information' indicator.
If I had used something really fancy, it might not work on earlier versions. I haven't.

I'm pleased you're going down the JavaScript file route, it is much cleaner

Two things:

1. When you click on the Content file, it opens in a text editor so all you do is make changes and save that file.
   You do not touch the Save in the main design file as you have changed nothing.
   A fresh Preview or even browser Ctrl+F5 will show back the changes immediately.
2. The Content.txt file is still only on your local machine so Preview works.
   To get it into your published site, you need to upload the changed Content.txt, the one that is in nanogallery - Gallery Slideshow_xar_files > Content.txt.

---

Format of Content.txt:


$("#my_nanogallery2").nanogallery2({
<!-- ### gallery settings ### -->
thumbnailHeight: 128,
thumbnailWidth: 128,
itemsBaseURL: 'http://nanogallery2.nanostudio.org/samples/',
thumbnailLabel: { position: 'overImageOnBottom' },
thumbnailAlignment: 'center',
thumbnailOpenImage: true,
slideshowAutoStart: true,
slideshowDelay: 5500,
galleryDisplayMode: 'pagination',
galleryMaxRows: 4,
gallerySorting: 'random',


<!-- ### gallery content ### -->
items: [
{
src: 'berlin1.jpg', // URL to big image or video
srct: 'berlin1t.jpg', // URL to thumbnail image
tag: 'building', // Tags or keywords used for filtering
title: 'Title Image1', // Title of the media item
description: 'Description1', // Media description
},
{ src: 'berlinX.jpg', srct: 'berlinXt.jpg', tag: 'buildingX', title: 'Title ImageX', description: 'DescriptionX', },
]
});

Instructions for Gallery Settings:

1. You disable any setting by preceding it with //
2. Numbers, true & false are not quoted
3. Strings are
4. Refer to the ng user Guide for other parameters and their values
5. Note, each name-value pair always ends with a comma, even when it is the last item as you will be less likely to forget one

Instructions for Gallery Content:

1. I've included a tag - if keeping, use tag: '', for blank ones
2. You set up itemsBaseURL to point to the top folder of your images
3. Say, you have Paving 1 under that then src: 'Paving 1/slab of beauty.jpg', scrt: 'Paving 1. xarainfo/slab of beauty.png', and so on - letter case is important

ng is very flexible in its presentation at the expense of being precise with your data.
Get it working for a few images and build up.

I believe ng fully meets your needs, on which I have ticked off all ten features.

The nice thing is once you have your data in place, anyone can play around with my simple demo file and exercise ng to the full, provided you tell us the URL path and sub folders.

Acorn

Quote:

---

Originally Posted by Acorn

@Sue, the 'Warning' is really an 'Information' indicator.
If I had used something really fancy, it might not work on earlier versions. I haven't.

I'm pleased you're going down the JavaScript file route, it is much cleaner

Two things:

1. When you click on the Content file, it opens in a text editor so all you do is make changes and save that file.
   You do not touch the Save in the main design file as you have changed nothing.
   A fresh Preview or even browser Ctrl+F5 will show back the changes immediately.
2. The Content.txt file is still only on your local machine so Preview works.
   To get it into your published site, you need to upload the changed Content.txt, the one that is in nanogallery - Gallery Slideshow_xar_files > Content.txt.

---

Format of Content.txt:


$("#my_nanogallery2").nanogallery2({
<!-- ### gallery settings ### -->
thumbnailHeight: 128,
thumbnailWidth: 128,
itemsBaseURL: 'http://nanogallery2.nanostudio.org/samples/',
thumbnailLabel: { position: 'overImageOnBottom' },
thumbnailAlignment: 'center',
thumbnailOpenImage: true,
slideshowAutoStart: true,
slideshowDelay: 5500,
galleryDisplayMode: 'pagination',
galleryMaxRows: 4,
gallerySorting: 'random',


<!-- ### gallery content ### -->
items: [
{
src: 'berlin1.jpg', // URL to big image or video
srct: 'berlin1t.jpg', // URL to thumbnail image
tag: 'building', // Tags or keywords used for filtering
title: 'Title Image1', // Title of the media item
description: 'Description1', // Media description
},
{ src: 'berlinX.jpg', srct: 'berlinXt.jpg', tag: 'buildingX', title: 'Title ImageX', description: 'DescriptionX', },
]
});

Instructions for Gallery Settings:

1. You disable any setting by preceding it with //
2. Numbers, true & false are not quoted
3. Strings are
4. Refer to the ng user Guide for other parameters and their values
5. Note, each name-value pair always ends with a comma, even when it is the last item as you will be less likely to forget one

Instructions for Gallery Content:

1. I've included a tag - if keeping, use tag: '', for blank ones
2. You set up itemsBaseURL to point to the top folder of your images
3. Say, you have Paving 1 under that then src: 'Paving 1/slab of beauty.jpg', scrt: 'Paving 1. xarainfo/slab of beauty.png', and so on - letter case is important

ng is very flexible in its presentation at the expense of being precise with your data.
Get it working for a few images and build up.

I believe ng fully meets your needs, on which I have ticked off all ten features.

The nice thing is once you have your data in place, anyone can play around with my simple demo file and exercise ng to the full, provided you tell us the URL path and sub folders.

Acorn

---

Acorn,

I appreciate you answering my questions.
Your insights and detailed instructions, along with the code is much appreciated.

Looking forward to making the move to JavaScript.
It is evident that it will be much cleaner and easier

It’s great that you ticked off all 10 features to know it will fully meet my project needs.

Really nice to know once I have my data in place, anyone can play around with this of the demo file, provided I share the URL path and sub folders.

I'm sure I will be back with progress reports & questions.

Have a great evening and a wonderful weekend.

Sue

@Sue, I have bundled a ZIP with all the necessary items to run 128 random images, so no need to provide you images: Attachment 133971.

This is a simple testbed to tweak presentation.

Construction

A. Website Code head:

Quote:

---

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<link href="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/jquery.nanogallery2.min.js"></script>

---

The meta is probably not needed.

B. Website Code body:

Quote:

---

<script src="index_htm_files/Content.txt"></script>

---

This ensure the external data is brought into the website.

C. Placeholder Body code:

Quote:

---

<div id="my_nanogallery2" data-nanogallery2 width=100% height=100%></div>

---

The Placeholder also has a Name UsesJQuery.

D. Content.txt:
Sits in the external assets folder of the design file.
Linked from text line 'Content' with Link to file.
When changing, select this 'Content' and pick Link to file: Content.txt in the pop-up.

Acorn

UPDATE
In considering Variants, I have changed the filename of the former Content.txt to metadata.txt.
At the same time, metadata.txt is now just a big JavaScript variable with gallery & content data.
The nanogalleries are called from within the design for Main and Variant(s) as each gallery needs to run with a separate ID, even through they can use the same data, that metadata.txt is providing (here).

Website Head:

Quote:

---

<link href="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/jquery.nanogallery2.min.js"></script>

---

Page Body:

Quote:

---

<script src="index_htm_files/metadata.txt"></script>


<script>
$('#main').nanogallery2(metadata);
$('#variant').nanogallery2(metadata);
</script>

---

Main Placeholder:
<div id="main" data-nanogallery2 width=100% height=100%></div>
Variant Placeholder:
<div id="variant" data-nanogallery2 width=100% height=100%></div>

Don't forget UsesJQuery.

I have expanded the features of the lightbox so you now have Title & Description on hover as well as the ability to Share, Download and see the fuller Label information as a pop-up.

The new demonstrator is here: Attachment 133973.
I should also mention that you really do need separate Thumbnails as using the main images as pseudo-thumbs destroys and smart lazy loading.

Acorn