Loading high resolution images.

[Egg Bramhill]

I'm not sure I'm following your thoughts here Acorn. Your demo works very well. It only loads images as required (i.e. Lazy). However so does my method.

Add the Website Code (head) CSS to your site.

Not required by my method, instead it loads a .js file named functions.js on website Head once.

For each image, add a new CSS ClassName rule that invokes the image as a background.

My method does a similar thing loading individual images into a placeholder on a single pop-up layer (not numerous pop-up layers)

In a pop-up layer create a sized Box with Placeholder code (body): <div class="lazy ClassName"></div>.

Mine has a similar placeholder with the following:</div>.<img id="myImg" src="https://parkeston.com/xara/big-images/images/myImg@2x.jpg" width="1204" height="675">

Add a Thumbnail to MouseOff, basically, anything that open the image pop-up layer.

As these thumbnails require to load on page load there is no point in loading them via a placeholder.

Embellish with Web Animations, delays and speed of presentation; anything you can add to a layer.

My metod also allows this but as my aim is to reduce the requirements of pop-up layers to a single pop-up layer then only one transition can be applied.

The big image is only loaded when its pop-up layer is triggered.

Ditto, the same Lazy loading.

[Acorn]

@Egg, the difference is yours relies on JavaScript and mine is handled natively by the browser; less to go wrong across different browsers.
Yours is limited to the varying contents of the array for the image, title and description. Mine is still mainly Xara-driven and can be embellished as I tried to show: links, transparencies, delays & animations so I consider my approach an enhancement.
The Thumbs as Placeholders were pure red herrings as I said anything could be the trigger (Bullet 4); I was trying to given pause for people to consider what they could do.
Your point on having many pop-up layers is valid but the weight of them is trivial so the file size will grow slowly and there is next to no abstraction of the presentation of content. You can even drop the image into the Layer, set to Thumbnail size and Optimise. You then make it full size and the images is blurry but good enough to know what it is. When you add the Placeholder code, even that does not get published. The design file is then around 50kB larger; 100 images would add 5MB to the design file size.

For your approach, it can be refactored to:
array-1.js:

var photo = new Array();
photo[0] = ["https://parkeston.com/xara/big-images/images/myImg@2x.jpg","title-0","s0 "];
photo[1] = ["https://parkeston.com/xara/big-images/images/1001@2x.webp","title-1","s1 "];
photo[2] = ["https://parkeston.com/xara/big-images/images/1002@2x.webp","title-2","s2 "];
photo[3] = ["https://parkeston.com/xara/big-images/images/1003@2x.jpg", "title-3","s3 "];
photo[4] = ["https://parkeston.com/xara/big-images/images/1004@2x.jpg", "title-4","s4 "];
photo[5] = ["https://parkeston.com/xara/big-images/images/1005@2x.jpg", "title-5","s5 "];
photo[6] = ["https://parkeston.com/xara/big-images/images/1006@2x.jpg", "title-6","s6 "];
photo[7] = ["https://parkeston.com/xara/big-images/images/1007@2x.jpg", "title-7","s7 "];
photo[8] = ["https://parkeston.com/xara/big-images/images/1008@2x.jpg", "title-8","s8 "];
photo[9] = ["https://parkeston.com/xara/big-images/images/1009@2x.jpg", "title-9","s9 "];

Then functions.js is simply:

function Photo(n) {
  document.getElementById("photourl").innerHTML = photo[n][0];
  document.getElementById("phototitle").innerHTML = photo[n][1];
  document.getElementById("spare2").innerHTML = photo[n][2];
  document.getElementById("myImg").src = photo[n][0];
}

Your Links then become: <a href="javascript:xr_cpu(4);%20Photo(0);" onclick="return(xr_nn());"> for the first and changing the index to display each other image and associated contents.

Your use of IDs for the placeholder objects will however fail for Variant use (photourl, phototile, spare2 & myImg). You could change the IDs to ClassNames and tweak the get statements to getElementsbyClassName().
Ultimately, you are changing the DOM on the fly and this will impact ARIA as screenreaders will not follow the links readily. You have no ready means of adding Alt text.

Acorn

[Egg Bramhill]

Thanks for this Acorn.

For your approach, it can be refactored to:

I've thought for a long time that the 'functions.js' file could be reduced but never have enough js knowledge to achieve this. I'll get back to you later on how to impliment this, as well as your suggested 'array-1.js' file refactoring.

What I prefer about my method is that it uses a 'global' functions.js file across the whole site. Then each page loads it's unique array.js file.
I can then easily duplicate that page and have it load it's own unique array file, which alters the image to load, title and text explanation.

Having set up a website in this fashion I no longer need to open Xara to amend the content, just open that page's unique array.js file in notepad++ and change and save and upload to my server and the changes are instant (Ctrl+F5 to avoid cache). I can even keep the array info within a Google sheet, change it there and download as a csv file and easily create the array.js file from there with a bit of tweeking.

Over the next couple of days I'll try to reproduce my Demo using your CSS method which I grasp in the main. One issue I have is with the Head CSS and amending the class content from within Xara's placeholder window. It's to easy to mistype / Apply and end up with the whole thing snafu'ed. I assume you could load this style sheet as an external file and avoid doing this from within Xara?

[Acorn]

Thanks for this Acorn.

I've thought for a long time that the 'functions.js' file could be reduced but never have enough js knowledge to achieve this. I'll get back to you later on how to impliment this, as well as your suggested 'array-1.js' file refactoring.

What I prefer about my method is that it uses a 'global' functions.js file across the whole site. Then each page loads it's unique array.js file.
I can then easily duplicate that page and have it load it's own unique array file, which alters the image to load, title and text explanation.

Having set up a website in this fashion I no longer need to open Xara to amend the content, just open that page's unique array.js file in notepad++ and change and save and upload to my server and the changes are instant (Ctrl+F5 to avoid cache). I can even keep the array info within a Google sheet, change it there and download as a csv file and easily create the array.js file from there with a bit of tweeking.

Over the next couple of days I'll try to reproduce my Demo using your CSS method which I grasp in the main. One issue I have is with the Head CSS and amending the class content from within Xara's placeholder window. It's to easy to mistype / Apply and end up with the whole thing snafu'ed. I assume you could load this style sheet as an external file and avoid doing this from within Xara?

Egg, it's horses for courses. External JS or CSS files can be invoked into any page or globally. I only place everything into Website/Page Head/Body or Placeholders to make it one design file for TG demonstrations. For these, I use an AutoHotKey macro to copy out code from Xara's nasty little textbox view into Notepad++ where styling and clarity is top notch. Another macrokey puts the changed detail backing to the Xara textbox area.

A bit of refactoring on mine.
I put Placeholder code (body) detail in the Boxes displaying the large image. I need only have used special Names, htmlclass="lazy marblesSmall", etc.
I could use a convention of ClassNames to reflect the image filenames and then some JS to generate the require CSS.
Everything would then be static other than the addition of a special Name to a shape.

My red herring Thumbnails were me also automatically moving things out of the HTML file to make the download time far faster.
This decoupling allows the images for the Thumbs to be changed outside of the Xara design file; another great time saver.

Acorn

[yellowbird]

Very impressive Egg.

[gwpriester]

I should probably move this thread to Dear Xara but I am not sure anyone even looks there.

[Egg Bramhill]

I should probably move this thread to Dear Xara but I am not sure anyone even looks there.

TG members do Gary, it's just that Xara devs never do.

[letsgofishing]

Getting really tired of Xara's new "improvements" and New Features" that achieve no overall gain to the fluidity and real improvements to the software.
Would gladly swap: New & Improved Handles, New Content Type: Diagrams, Paragraph Borders & Backgrounds for the ability to handle webp files....
Most of my sites are portfolio sites and this would be perfect for clients viewing portfolio images an large desktop monitors.

[Egg Bramhill]

I agree LGF but there's nothing stopping to using them now if you have so many portfolio image websites.

See attached.

[Egg Bramhill]

Affinity Photo have announced they will be adding webp to their export filters in the next major release. Not there yet but another route to converting jpgs tp webp.
Come on Xara!

LINK