Bootstrapping the Support Folder

BACKGROUND
Xara, back in the day, created a thing of wonder with the concept of the Support Folder. Yet, probably, only the originator (Charles Moir?) or the original developer knew or might not have realised what its full potential could be.

Drop a large number of MP4s onto the design page and they are magically added into a Design Folder in the same location as the design file.
Only when you export or publish website does the knitting together take place and everything in the Support Folder is copied across into the index_htm_files folder.
You only have to worry about the upload time!

REAL-WORLD PROBLEMS
The confusing point to many is that even if added in, then deleted and never saved, the asset is there and remains in the Support Folder.
It then follows that with a publish, these large files get uploaded regardless! Is his why your site takes forever?
Knowing this one fact allows you to take charge of your content.

Xara has a number of importers that additionally add in additional content.
You now know where to look and see what is happening your your design.

THE OVER-COMPLICATION
Strangely, a PDF Link add just the PDF document but then goes to all the trouble of creating a Placeholder with the following code:

Code:

---

<a href="index_htm_files/P3041071.pdf"><img src="https://webdesigner.xara.com/pdficon_large.png" border="0"></a>

---

Without web access, you have a dead image and it has rubbish resolution.

Create your own form a symbol or other design. I would use an SVG and drop it into the Support folder.
Then change the placeholder to:

Code:

---

<a href="index_htm_files/P3041071.pdf"><img src="index_htm_files/pdf.svg" border="0"></a>

---

I actually just create a Link on some object and path there instead: index_htm_files/P3041071.pdf.

TAKING CONTROL
The trick is knowing that you do not have to use an large MP3/MP4, PDF, SWF or other large file to create the Support Folder, a blank file suffices.

• I select a text label LOG and in Web > Properties > Link > Link to file, link to log.txt and Accept.
• The attached design file goes into greater detail.
• Having saved the design file, log.txt is the proud occupant of a vast Support Folder.
• Drop your images, sounds and videos there and all you need do is add a link to index_htm_files/filename and you can download it.
• Wrap it in an <img> tag and you can see it.
• Better, Image Filename an object or thumbnail and this is replaced with the full strength image.
• Wrap it in an <audio> tag and you can play it.
• Wrap it in a <video> and you can view it.

Yes you need to understand some HTML but Xara's Placeholders show you how to improve its offerings.

GOING FURTHER
What I discovered is that if you put jQuery version 3.6.0 into the Support folder and name it jquery.js, this overwrites the version 1.11.1 Xara still bundles.
Some image sliders will fail but you have overcome around three jQuery security issues with such a stale version.
You can also create sub-folders and this is perfect for images, code and styling content.

ONE APPROACH
Attachment 129334 is a ZIP with a design file and its associated Support Folder.
The design file is sufficient to create its Support Folder but you can use it for link the three labels to save time.

The file does very little; it is here to show the principle.

I already posted an External Slider using these concepts...

Acorn

Very useful. Thanks.

What I also do with Item 2 (js.txt) is add the special Name UsesJQuery.
This forces jquery.js v1.11.1 to always be part of the index_htm_files folder so that when you add an up-versionedjquery.js (currently v3.6.0) into the Support Folder then the later one automatically overwrites the Xara offering.

Do note that some of the very old Xara sliders will fail.
I am working on these slowly where I think they have merit. For example, where one creates a grouped image and picture, I am refusing to ever add such into my repertoire.

Acorn

I simply wish to retain control over the names of my images and their sizes.
Xara hijacks both and has been fudging Image Filenaming for a long time.

This approach uses the Support Folder to deliver what Xara has failed to do so far.
It is quite specific in that the presentation of the image is precisely that with no border or other attributes Xara offers.
It does overcome the Image Squishy/Squashy problem Xara introduced.
Some of the File Placeholders have a hover of click action.

The resulting design file is far quicker to load and can readily cope with larger numbers of images and pages.
The heavy lifting is left until Preview, Export or Publish, making design changes and saving faster.

It is offered in good faith:Attachment 129358
Do not that the design page is showing low fidelity thumbnails for all of the images.
These are automatically replaced by the full sized and perfectly names JPEGs.
The originals can be JPGs, PNGs, WebPs and even SVGs; anything Xara can import and a browser can render.

The ZIP file is a 75kB design file and a Support Folder with the larger image files, totalling 2MB.

Acorn

Just a quicky Acorn, just looked breifly at Cities and the Shanghi pop-up is not displaying correctly. The other two are fine.

Quote:

---

Originally Posted by Egg Bramhill

Just a quicky Acorn, just looked breifly at Cities and the Shanghi pop-up is not displaying correctly. The other two are fine.

---

I did that on purpose to check if Stretch worked.

Thanks for checking Egg.

Acorn

Yes, that's clear and easy to remove the streetchy to get it to work. However having big problems getting my head around the application Acorn. My senior moments, not to do with your instructions. I'll battle on tomorrow..... ;)

Here is a reworked Nivo Slider.
It allows the full functionality of the slider to be configured.

Yes, you have to have some basic HTML, JS & CSS knowledge compared with the Xara approach but the benefits are major.

Images can be tall or thin.
You can even apply Stretch.
Captions and images can have links.
Each slide can have its own effect.

Attachment 129365
Unzip and run the design file.

Acorn

Quote:

---

Bootstrapping the Support Folder

---

Ah! I seen the light. This is an excellent method to load animated svg's whose text often exceeds the Xara default placeholder limit. Thanks Acorn.

Quote:

---

Originally Posted by Egg Bramhill

Ah! I seen the light. This is an excellent method to load animated svg's whose text often exceeds the Xara default placeholder limit. Thanks Acorn.

---

Once you get the concept, it opens up so many avenues.

Acorn

Here is a worthy successor to the Sliding Slideshow widget: Attachment 129369
Unzip as usual and run the design file.

I am interested in how far back this runs in earlier XDA versions.

To add new images:

1. Place the images in the Support Folder > Images folder.
2. Update or add the Image HTML item(s) in the HTML code (body) of the Slider Placeholder.

Acorn

Hi Acorn, d/l'ed your zip file and extracted but the xar file doesn't open ???

Quote:

---

Originally Posted by Egg Bramhill

Hi Acorn, d/l'ed your zip file and extracted but the xar file doesn't open ???

---

Egg, I tried the extracted XAR and it is OK.

Here is a separate version: Attachment 129371

Acorn

Okay Acorn, haven't have time to look at in detail. I needed to shut down XDP+ to get it to load(?)
On preview all oks well except for this slider in which the text background retains the keyboard image.

Quote:

---

Originally Posted by Egg Bramhill

Okay Acorn, haven't have time to look at in detail. I needed to shut down XDP+ to get it to load(?)
On preview all oks well except for this slider in which the text background retains the keyboard image.

---

Egg, that is my Easter Egg to show that it could be done.

Xara's approach destroys design expression.

Acorn

Another offering.

This handles large Table datasets that can be CSV, HTML, screen captures, Markdown using https://www.tablesgenerator.com/html_tables, which is my preference.

Once set up as an HTML Table with some added code and put in a Placeholder, you get sorting, filtering and paging on a page.

Something Xara should have addressed in its SmartTables.
It is a worthy successor to the original Table Widget that only handles CSV data (badly).

I went for HTML as each table cell can have its own styling including images, links and formatting.

Attachment 129378
Unzip as normal and run the design file.

Acorn

That's pretty nifty, Acorn. Thanks for sharing. Set up a table, export it as .htm and there you go. I haven't even looked at all the possibilities to customize the table.

Here is a simple Image Accordion that I find pleasing: Attachment 129445
Unzip and run the design file.

Here is one without embedded images: Attachment 129446
It used Ipsum Image to generate placeholder images; this comes with an overhead of the site adding Cookies!

Acorn

That's a very novel way of showing images, Acorn, I like it. Makes me a bit dizzy though going from photo to photo.

Quote:

---

Originally Posted by Boy

That's a very novel way of showing images, Acorn, I like it. Makes me a bit dizzy though going from photo to photo.

---

Chers Boy, you can slow the speed by changing it from 0.8s to whatever in the CSS.

Acorn

That's great! Thanks.