[xtom]

If you need to create dynamic web pages in Xara for use with the cms then the xar/web documents below will show you how to achieve this. The tweak transforms a static web page into a dynamic web page by extending the page length automatically to accommodate content served by the CMS. It automatically moves the page footer down and stretches the background where applicable.

Web Designer / Designer Pro

This file works with the latest versions of Xara and can be used with page variants.

Download tweak for Web Designer / Designer Pro

Note: Xara sometimes exports one or two wrapping divs around placeholder code so you may need to adjust the Footer Start placeholder as shown below. The first example is for two wrapping divs around the placeholder, example two is for one wrapping div.

Code: [Select]

</div></div><div class="footer"><div><div>or

Code: [Select]

</div><div class="footer"><div>
Known Issues

This tweak works with traditional website export from Xara but currently does not work well if the "Scale to fit width" website export feature is enabled in Xara. This is because both are using javascript to resize/scale page and there is a bit of a conflict trying to get them both to work well together. Therefore it is recommended to leave "Scale to fit width" disabled if you are using this tweak.

Older versions

Recommended to always use the newest version above no matter what version of Xara you are using but older versions are also available below.

Download tweak for Web Designer / Designer Pro (v10/v11/v12)

Download tweak for Xara Web Designer 9 / Designer Pro X9 and earlier

A video tutorial for this tweak can be viewed at http://youtu.be/4JUFW_nGK0Q - Note this video is for an early version of the tweak. Much of the process remains the same but follow the latest information in the XAR file over the video.

[Ike F T Busser]

Thanks for this step by step guidance. I now understand what is happening!
Great.

[TotalTech]

Ok as soon as i add the code to xara for the dynamic page, it makes the pages longer then they should be for some reason. I have tried it on several templates and it is doing it on all of them, is this by design, or am i getting some kind of error.

totaltech.biz is current problem.

[xtom]

I'm not entirely sure what you mean. The page will be made longer to accommodate the dynamic content but no more than necessary, there is an additional 20px or so added to ensure there is always some whitespace between the content and footer. You can edit this in the tweak if you want but in most situations it's best to have at least this small spacing. Margins at the bottom of dynamic content might increase this a bit more or blank paragraphs, linebreaks etc. at the bottom of your content area.

[TotalTech]

did you look at my site totaltech.biz i made some graphics to show what is happening, infact the cms is making it even more then it is from the xara preview, if i delete the two little footer boxes from the site everything goes back to proper spacing. put them back in and and the gap grows, and it grows way more then 20px. look at my site and you can see the move that is happening and see if we have any ideas on what could be causing this.

I am using newest xt, and newest xara pro.

Thanks.

Adding to this cause forum is saying i already posted and can repost same thing again. Anyway I have link an image of what is happening below, it happens on anything i try wether it be the xar file from above or another template.

http://totaltech.biz/dynamic%20page%20issue.jpg

[xtom]

I had a look at your web page but without seeing the xar file it's hard for me to understand what's going on. However I had a look at the dynamic page xar file itself and it seems that if the page with dynamic content ends up shorter than the browser window you will get a longer than expected page because it looks like the document height measurement in the tweak takes into account the browser window and it's acting kind of like a minimum height. So I think the extra length will happen when viewing very short pages (shorter than browser window) and once the content/page runs longer than the browser window the page length should be as expected. Would this explain what you are getting on your end? It might be preferable to not use the tweak for short pages and only use it for longer pages where there is going to be more dynamic content.

[TotalTech]

Yeah, I had been looking at this today and discovered the same thing, also from the xara standpoint, it looks as though you should design your footer, then hid it basically and design the page as if it is not there, cause the code put the footer basically below the page, so I think for the most part I just need to plan my designs out just a bit different when using the xt-cms system.

I am going to play around a bit and see if I can tweak this a bit more to get a more consistant result, but thanks for all your help and love the work you have done on this.

[xtom]

I've added a new page tweak which should work with the new responsive design/page variants in Web Designer 10. The v9 tweak has been updated as well which should address the issue with extra space on short pages. 

[angelize]

So to use this with the CMS  would I need to have the {page_content} tag with in a div like this:

<div class=

[xtom]

Yes, just make sure to use straight double quotes " in the html

Code: [Select]

<div class="my_d_content">
{page_content}
</div>

[xtom]

**Update**

These dynamic page tweaks for xara have been updated and now work with full width backgrounds on the pasteboard layer. In Xara just add the name htmlclass="footerBackground" to the highest footer object on your page and  to any footer objects that are not on your footer layer eg. footer backgrounds on the pasteboard layer.

The javascript is also now minified and compressed to be more efficient on your web page and the unminified source is also included should you need to modify it.

[steveL]

Does this only work with the CMS?

I've been trying to find a way to convert a Xara page to use dynamic height with a widget that I use and I thought this method might solve the problem but I can't get it to work even though I copied the placeholders and footer direct from you example complete with their HTML code.

[xtom]

Hi Steve, this works without the cms too. In the content placeholder just replace the cms tag {page_content} with whatever html or php code that you want. You can test it out by just changing the {page_content} tag to a load of test paragraphs <p>test</p>

It's intended for dynamic content served from server side using for example php so if the widget generates content client side via javascript then I'm not sure, I haven't tested that but it might not work in that scenario.

[sera49]

Hello Friends,

In the tweak is the following possibility given.

The page will extend automatically when it loads but you can also make it extend after it loads by using class="extend_page" - when any element with this class is clicked on it will extend the page. This can be useful for forms that show hidden content on the page after load. You can change this class name and the trigger event itself in the javascript code by editing the head code in the Footer Start placeholder.


But I have absolutely no idea how should i aplly it!

Can you give me some hint

Thanks

[Eisenberg188]

Is the Dynamic Web Page Tamplate working in the newest versions of Web Designer?
I am using MAGIX Web Designer Premium 15.0.0.52929  DL x64 Feb  9 2018 with XT-CMS (now Demo).
It don