Best Photo Gallery For Good Page Load

[hotrodsue]

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.

[bwood]

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

[hotrodsue]

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.

[Initiostar]

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.

[Acorn]

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: NanoGallery - Demo.xar.
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

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

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

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

[hotrodsue]

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

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

[Acorn]

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