Curating your Photo Thumbnails

[Acorn]

In https://www.talkgraphics.com/showthr...Good-Page-Load, we have been exploring how to set up a gallery of images (& videos) that is not heavy-handed by being all crammed into a design file (XAR/WEB) as this makes editing and publishing unwieldy.

The use of the Xara built-in HighSlide JS is stale and moribund. It has a number of lacks:

• What you see in the Thumbnail is what appears in the large presentation. The plus is it is scaled and published without any needed user intervention.
• The large images can not be given any image filename.
• Everything get downloaded all at once.

nanogallery2 will accept a separate thumbnail of any size but it is easier just to consider a simple grid.

In a nutshell:

• Use Get fills to bring in your folder of nicely-named images.
• Create a grid of boxes 240x160px.
• For each box, use Apply as fill to place the image into the box.
• Switch to the Fill tool and reposition and scale the Thumbnail.
• Switch to Web Properties > Image > Web image type and decide JPEG or PNG and Apply.
• Switch to Web Properties > Image > Image and for each box, in turn:
• 
  
  • Click photo filename.
  • Click the Apply button.
  
  
• Export Website to a local folder.
  
  • Open it index_html_files folder and extract all your named Thumbnails to their new home.

Acorn

[bwood]

Excellent Acorn. I’m going to copy all that and place in my tips folder. I think most who are non coders can understand your solution. Great stuff!
-Bill

[Acorn]

Thank you Bill, for those sticking with HighSlide JS, you can still use your curated thumbnails with a little sprinkle of magic dust...

A. Create a special thumbnail layer and call it !Thumbs. Drop your large images onto this layer and scale down to a thumbnail as small as you like. You will not be using this directly, only its HighSlide code.
B. Next step is to create your usual Image > Photo pop-up and Options so you have the large image showing, possibly in a slideshow. The new thing you do is give each (Xara) Thumbnail a Name of htmlclass="tnn", where nn is a simple tally count of the thumbnails you have created, the first would be 't01', the 22nd would become 't22'.
For t00 only, give it an extra Name of UsesJQuery.
You can Preview and click on each (Xara) Thumbnail to check everything is working.

Back to your curated Thumbnails on the MouseOff layer.
C. You connect each image, shape or text to the right (Xara) Thumbnail with a special link - use javascript: void $('.tnn').parent().click(); for each required trigger, changing the '.tnn' to match the (Xara) Thumbnail.

D. For completeness, add a random shape into the !Thumbs layer and add a Link to the !Thumbs layer.
Finally, hide the !Thumbs layer. No one need see what's there.
Now if your Preview all the !Thumbs images are hidden but accessible.

...Demo: JS - Aardvark.xar

Acorn