Problem with number of characters in Head and Body

[rhdpre07]

Problem with number of characters in Head and Body


Basically I need a lot more...

do you have any solution?

[Acorn]

As you talking about the limit for adding content to Placeholders or Website/Page > Head or > Body for code and styling?

If so, yes I have a solution.

Acorn

[rhdpre07]

As you talking about the limit for adding content to Placeholders or Website/Page > Head or > Body for code and styling?

If so, yes I have a solution.

Acorn

Thanks Arcon,

Yes...in Placeholders

I try to paste code and it stays halfway...it doesn't paste everything

(in the end, I try to add 1 letter and it doesn't let...

[Acorn]

This will be a sort of a masterclass.
It is on how to handle external assets.

First off, it is best to start with a saved design file.
If you don't, the location of the external assets will be different until you make your first Save.

Xara sort of describes what is happening here: file:///I:/XPro+/help-html/help-html/xara_desktop/product_support/web_features/embedding_movie_audio_animation_files.html [Ref#1]
It does not really cover what I shall be describing as my approach is a development of this feature for any file type.

For it to make sense, I am going to start with putting images into Xara as external assets.
Images are more tangible and when you get them working, you can advance onto JS & CSS embeds.
This alone is very powerful if you have large images and want to keep their filename.

THE METHOD
Selection

1. Add a small box to your design. It doesn't matter where.
2. Pick Web Properties > Placeholder > Placeholder > Replace with graphic file. In your mind replace 'graphic' with 'any'.
   
   
   1. Click the Browse button and change the Open dialog > File type from Image to All Files (*.*) to the right of the File name box.
   2. Navigate and pick one of your saved JPEG or PNG images.
   3. Click the Open button.
   4. Press the Apply button.
   
   
3. Repeat (2.) for a small number of images.
4. Delete the original box.
5. Open the folder where your design is saved.
   
   
   1. Locate the folder starting with the same filename as described in Ref#1.
   2. Open the folder and check all your images are there.

Linking to External Image Assets

1. Note the filename of one of your images, say, <filename.jpg>.
2. Create a Placeholder with the same relative dimensions.
   
   1. In the Placeholder Body, add <img src='index_htm_files/<filename.jpg>' width=100% height=100% />.
   
   
3. Preview the design and check the image is rendered.
4. Repeat (2.) for any number or repeats of the external image assets.

JavaScript Embeds

1. Same Selection approach.
2. Linkage into Website/Page/Placeholder > Body: <script src='index_html_files/<scriptname.js>'></script>.
3. In the <scriptname.js> file itself, you need to remove any <script> & </script> Tags.

</script>
CSS Embeds

1. Same Selection approach.
2. Linkage into Website/Page/Placeholder > Head: <link rel="stylesheet" href='index_html_files/<stylename.css>'/>. This usually is fine but instead you can try the Body.
3. In the <stylename.css> file itself, you need to remove any <style> & </style> Tags.

The powerful thing is you can alter these external assets contents without having to re-Publish the entire site.

I do expect questions on this.

Acorn

[rhdpre07]

This will be a sort of a masterclass.
It is on how to handle external assets.

First off, it is best to start with a saved design file.
If you don't, the location of the external assets will be different until you make your first Save.

Xara sort of describes what is happening here: file:///I:/XPro+/help-html/help-html/xara_desktop/product_support/web_features/embedding_movie_audio_animation_files.html [Ref#1]
It does not really cover what I shall be describing as my approach is a development of this feature for any file type.

For it to make sense, I am going to start with putting images into Xara as external assets.
Images are more tangible and when you get them working, you can advance onto JS & CSS embeds.
This alone is very powerful if you have large images and want to keep their filename.

THE METHOD
Selection

1. Add a small box to your design. It doesn't matter where.
2. Pick Web Properties > Placeholder > Placeholder > Replace with graphic file. In your mind replace 'graphic' with 'any'.
   
   
   1. Click the Browse button and change the Open dialog > File type from Image to All Files (*.*) to the right of the File name box.
   2. Navigate and pick one of your saved JPEG or PNG images.
   3. Click the Open button.
   4. Press the Apply button.
   
   
3. Repeat (2.) for a small number of images.
4. Delete the original box.
5. Open the folder where your design is saved.
   
   
   1. Locate the folder starting with the same filename as described in Ref#1.
   2. Open the folder and check all your images are there.

Linking to External Image Assets

1. Note the filename of one of your images, say, <filename.jpg>.
2. Create a Placeholder with the same relative dimensions.
   
   1. In the Placeholder Body, add <img src='index_htm_files/<filename.jpg>' width=100% height=100% />.
   
   
3. Preview the design and check the image is rendered.
4. Repeat (2.) for any number or repeats of the external image assets.

JavaScript Embeds

1. Same Selection approach.
2. Linkage into Website/Page/Placeholder > Body: <script src='index_html_files/<scriptname.js>'></script>.
3. In the <scriptname.js> file itself, you need to remove any <script> & </script> Tags.

</script>
CSS Embeds

1. Same Selection approach.
2. Linkage into Website/Page/Placeholder > Head: <link rel="stylesheet" href='index_html_files/<stylename.css>'/>. This usually is fine but instead you can try the Body.
3. In the <stylename.css> file itself, you need to remove any <style> & </style> Tags.

The powerful thing is you can alter these external assets contents without having to re-Publish the entire site.

I do expect questions on this.

Acorn

Google traslation

Hello:

Thank you so much for your answer.

I don't understand this ( ///I:/XPro+/help-html/help-html/xara_desktop/product_support/web_features/embedding_movie_audio_animation_files.html) : is it a url where I can see an example?

[ is this? : https://helpandsupport.xara.com/xara...ion_files.html ]

Although I haven't tried it yet, I understand the logic of what you propose...

But if it is not an image, nor css, nor js.... how do I call html?

[<HTML src='index_htm_files/<filename.html>' width=100% height=100% />.]

I try to explain my problem to you.

Here I have the HTML (https://www.neoclick.es/1/1.html) that I would like to embed in a xara document. Either in a placeholder or in the Head and Body of the Page (web properties). But the code doesn't fit.....

[Acorn]

Your link is correct, I forgot mine was a download.

If you are embedding an HTML page in yours, the Placeholder Body code is <iframe src='https://www neoclick.es/1/1.html' width=100% height=100%></iframe>.
Acorn

[Egg Bramhill]

Tried it with a static svg and it works fine Acorn. In my experiment the svg code was 77,221 characters long and displayed perfectly using 'Replace with Graphic File'. Pasting the same code straight into a placeholder only loaded part of the svg as the code was cut off after 30,000 characters. Sweet solution. I usually use embed for svg's but having an alternative is great. Shame it won't do animated svg's.

just noticed a Xara 'bug' will get back later.

[Acorn]

Tried it with a static svg and it works fine Acorn. In my experiment the svg code was 77,221 characters long and displayed perfectly using 'Replace with Graphic File'. Pasting the same code straight into a placeholder only loaded part of the svg as the code was cut off after 30,000 characters. Sweet solution. I usually use embed for svg's but having an alternative is great. Shame it won't do animated svg's.
just noticed a Xara 'bug' will get back later.

Egg, thank you for exercising my approach.

I have no problem with linking to an animated SVG.

blob.svg is small but works.

<?xml version="1.0" encoding="utf-8"?><svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
  <path fill="rgb(255,0,0)" stroke="rgb(255,0,0)" stroke-width="0" d="M 124.53 122.52 C 127.21 122.02 130.01 122.17 132.56 123.1 C 135.28 124.08 138.48 126.72 140.3 128.54 C 141.72 129.97 141.59 131.34 143.17 132.84 C 145.42 134.99 149.85 138.38 153.77 139.72 C 157.77 141.09 161.74 139.61 166.96 140.87 C 173.91 142.56 186.38 147.4 192.19 150.62 C 196.19 152.83 198.74 155.01 200.5 157.21 C 201.88 158.93 202.36 160.16 202.8 162.37 C 203.38 165.32 204.32 169.78 202.8 173.84 C 200.84 179.08 194.41 187.56 189.32 190.76 C 184.98 193.49 181.08 194.29 174.99 193.62 C 166.12 192.66 152.31 185.71 140.01 180.44 C 126.45 174.62 103.94 164.38 97.01 159.79 C 93.81 157.68 93.31 157.27 92.13 154.92 C 90.63 151.91 89.15 145.91 89.84 142.31 C 90.47 139.05 92.5 135.86 95.29 133.99 C 98.44 131.88 105.62 131.07 108.47 131.12 C 110.16 131.15 110.82 132.69 111.92 132.27 C 113.34 131.72 114.03 128.11 115.93 126.54 C 118.08 124.76 121.67 123.06 124.53 122.52 Z" style="fill: rgb(166, 209, 48); stroke: rgb(129, 151, 57); stroke-width: 2px; transform-box: fill-box; transform-origin: 50% 50%;">
    <animateTransform type="rotate" additive="sum" attributeName="transform" values="0;180" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" keyTimes="0; 1"/>
  </path>
</svg>

Acorn

[Egg Bramhill]

Yes I can get your blob.svg to work animated no problem.

Perhaps you could try with this one Acorn. I tried removing the <script> tags but it remained static.

[Egg Bramhill]

Can you also look at this xar file and try adding an image or text and preview.

I find anything added is not shown in the preview unless it's sent to back.

UPDATE. I think it's caused by the code entered into the 'replace with html' being truncated and so not closing properly.