Developer forum

Forum » Templates » Design og layout update. Feedback wanted

Design og layout update. Feedback wanted

E-mail notifications
Nicolai Høeg Pedersen
Reply
Posted on 06/07/2010 14:55:00

Just made a couple of changes of the layout parser based on some of the feedback i've received from all of you - thanks.

Here's a list of the changes:
Using master pages: Documentation updated with information on using master pages.

19.1.0.3: InlineStylesheet template tag no longer includes background-image from Dynamicweb stylesheet.

19.1.0.3: Stylesheets template tag no longer includes the external CSS chosen on the Dynamicweb stylesheet.

19.1.0.4/19.1.1.0: Possibility to overrule parsing of Title-tag, Content placeholders and navigation.

The documentation have been updated (not published yet) and features will be available with next service release.

I really would appreciate more feedback from those of you who have worked with layouts and templates - what issues did you run into, missing features etc. Feel free to send me an e-mail - np (at) dynamicweb.dk. Or simply leave a message on this thread. (Those of you not on vacation already...!)

Regards, Nicolai


Replies

 
Posted on 07/07/2010 09:52:51
Reply
Hey :) 

sure ill post the stuff i found. :)

first of all, it works very nice, and improves implementation alot!

1. Moving global elements
You cannot move a global element on a page when using the new design layout. See bug nr. 5092 for more info

2.better documentation

You should write a little ekstra chapter about DW tags is available. Like :

<!--@Global:Page.Content(4)-->
<!--@Include(subheader.htm)-->

Because these are really great to use :)

 
Posted on 07/07/2010 18:52:39
Reply
Hi Nicolai,

I've begun building a website using the new Template pattern. I really like the simplicity, but i stumbled in to the problem, which is also mentioned above, Global elements. I'd really love a hotfix for this ASAP, since it's a real show stopper.

I've discussed this new approach with my colleagues, and we have some concerns about the amount of duplicate html, since we no longer have a master/page template for the part of the page which is "always" the same. What are your thoughts on this?

When limiting Paragraph templates to a specific Layout, you need to have the same paragraph templates in multiple folder, if more Layouts can use the same template.

But with a pure file based system it's hard to avoid double content.

//Martin

 
Posted on 08/07/2010 09:30:14
Reply
It would be great if you could use the CSS from your layout, in the HTML editor in Dynamic Web. Right now you have to define text formats twice to get the right result.

@Martin - have you tried the <!--@Import... tag?
 
Nicolai Høeg Pedersen
Posted on 08/07/2010 10:03:00
Reply
Moving global elements: It will be fixed with an upcoming hotfix.

Reusing HTML
A couple of you mentions include - which works great and can be used. But also be aware of the possibility to use Master and detail pages as you may know it from ASP.NET. That part was missing in the original documentation, but it has been updated this week.

It is not published yet - but I've attached the draft to this forum post.

Editor fonts
I'm working on a solution for that. The editor still uses the formats from Dynamicweb stylesheet - of course it should be using the styles from the layout.

Thanks all so far - keep it coming!
 
Posted on 08/07/2010 11:30:58
Reply
Hi Nicolai,

After i "discovered" the Include tag i gave it a shot, and it works perfectly, but it's not as clean as i'd like. I'll check Masterpages out today, sound like it's what we need.

I found a tiny bug in the HTML parsing, i've made a template like this:
<!- -@Include(includes/master_header_include.html)-->
My HTML
<!- -@Include(includes/master_footer_include.html)-->

The above template wont render the first include, sinces the very first character in the template file is that start of a templatetag.
If i insert a space as the first character,before <!- -@Include tag, it renders just fine.

Since i like nice markup i dont want a space as the first thing in my rendered HTML :-)

//Martin
 
Posted on 08/07/2010 11:48:57
Reply
Just an update:

I just tested Masterpages, and it works like a charm.

It's great that you can navigate around your design to create you own folder structure.
Ie. <!- -@MasterPageFile(master/Master.html)--> works aswell :-)

How does this Design and layout handle XSLT? Is is possible to make your templates in XSLT?

Another thing i'd like implemented in the future is navigation template. We have our own navigation template which we use, and it would be great if this could be loaded from the design folder aswell.

So far i'm really impressed with Design and layout. This is what fronteders have been longing for for ages :-)

//Martin
 
Nicolai Høeg Pedersen
Posted on 08/07/2010 12:00:55
Reply
Glad to hear you like it.

Navigation template:
Take a look at the documentations "Navigation" chapter.

You can place navigation templates in the same way as paragraph templates:
Can be placed in
/Templates/Navigation
/Templates/Designs/Navigation
/Templates/Design/DesignName/Navigation
/Templates/Design/DesignName/LayoutName/Navigation

On the UL for the navigation you have the settings attribute where you specify the name of the template:
<ul class="dwnavigation" id="left" settings="template:MyTemplate.xslt">

Dynamicweb is looking for the template (MyTemplate.xslt) in the folders from behind.

Layouts as XSLT:
It is not supported yet. Wanted to get some more features and experience before we did that. There will be a slightly different approach. It will be available with 7.2 (hopefully).
 
Posted on 08/07/2010 12:54:22
Reply
Hi Nicolai,

Missed the navigation part. this works great aswell :-)

Do you know when the hotfix with for Global elements problem is release?

With out it, it's hard to build/setup websites that we can show to introduce to customers.

//Martin
 
Nicolai Høeg Pedersen
Posted on 08/07/2010 16:50:57
Reply
Just comitted the fix for dragging global elements for testing. When passed tests it can be released.

Ask Service Desk to have it start next week. I'm not around.
 
Posted on 09/07/2010 16:37:16
Reply
The Designs and Layouts documentation has been published in a new version and can be downloaded under the Documentation section (http://engage.dynamicweb-cms.com/Working-with-183.aspx).
 
Posted on 26/07/2010 17:21:11
Reply
Hi there,

It looks like option elements in a select list are incorrectly changed by the parser. I have this in a Layout file:

<select onchange="ChangeLanguage();" id="langList">
  <option value="nl">Nederlands</option>
  <option value="com">English</option>
</select>

When parsed, it ends up as:

<select onchange="ChangeLanguage();" id="langList">
  <option value="nl" />Nederlands
  <option value="com" />English
</select>

Notice how the option elements became self-closing. In a XHTML Transitional file, this results in the following validation error:

Line 57, Column 26: character data is not allowed here 
<option value="nl" />Nederlands
Is this a bug?


Kind regards,

Imar
 
Posted on 26/07/2010 17:49:29
Reply
And is there a way to assign an ID to a navigation element?

I tried this:

<ul title="Footer Navigation" 
  id="Footer" class="dwnavigation footer-navigation" 
  settings="startlevel:1;endlevel:1;template:LICleanFooter.xslt;expandmode:all;id:Footer"></ul>
but both IDs are removed. I can probably work around it by wrapping the ul in a div with an ID or using a class, but quite often a navigation element has a fixed ID in CSS templates as it only occurs once in a page.

Imar
 
Posted on 26/07/2010 21:48:40
Reply
And a few more questions / remarks:
 
1. Using Master Pages
Great feature, but it seems the @MasterPage file tag is not removed from the final output. How do I get rid of it?
 
2. "Using Layout" comment appears in final output
How do I get rid of that?
 
3. Embedded CSS
How do I get rid of the three .Indent classes that are added by default? I already checked "Don't use Dynamicweb generated CSS" under Stylesheet Settings | General. Normally I would work around that by not including @InlineStyleSheet but that gets added autmatically now.
 
4. Same for links to .js files (DWScripts.js and imgSS1.js)
How do I get rid of those?
 
5. Same for the copy right text (or at least the comment tags when you leave out the copyright notice in management center)
 
Other than that, I am having lots of fun with the new layout system!
 
Imar
 
Nicolai Høeg Pedersen
Posted on 27/07/2010 16:19:08
Reply

Option problem:
Yes - it is a bug. It is due to the way HTML agility pack handles this tag - same for forms tag. I've made the same workaround for option tag as for form tags though - so will be fixed with 19.1.0.5
 

Navigation ID:
I think you mean keeping the UL with attributes? If you have a look at page 25-26 in the manual there is a trick of how to accomplish just that. Simply by adding <!-- @DwNavigation(Footer) --> template tag inside you html - then it will not be removed.


Other questions:
1: I'll have it removed. Need to change the parser
2: Can't
3: Can't
4: Can't and imgSS1.js should go away by it self with newest version.
5: Can't


All the can'ts: I'll make sure it will be possible to remove all of it somehow. A lot of minor things will break though - thats why I've left it in there - to not getting 1000 helpdesk cases :-)

 
Posted on 27/07/2010 16:45:00
Reply
Re: Navigation ID: I see; that works fine. Would it in that case be a good idea to make it possible to move the required title attribute to the settings attribute? The name I enter for the title may make perfect sense for a CMS admin when editing a page, but may not always be appropriate to appear as a title attribute for an end user.
By moving it to the settings attribute, all that's then required is the dw* class which is stripped away anyway, giving you complete control over the output.

Re: the can't's: What about introducing a Design / Layout option panel in Management Center where you can determine what to turn on and off? I mean, you can't have enough checkboxes in the Management Center, can you? ;-)

Imar
 
Nicolai Høeg Pedersen
Posted on 27/07/2010 16:58:41
Reply
Dynamicweb - the checkbox cms :-).

Title attribute is only needed for content containers and are stripped when parsed. But added the option to choose either one - settings="title:some;" or title attribute. But not untill 7.2 - needs testing.

- Fixed the master page
- "Using layout" comment removed
- InlineStylesheet tag is no longer added to parsed file - you have to add it your self if needed.
- imgss files etc. are removed. Not out yet as i stated, but with 0.5
- Copyright text not printet if none present in management center

dwscript will be an option in management center.
 
Posted on 27/07/2010 17:08:08
Reply
Dynamicweb - The super speedy customer requests implementing CMS :-)

Thanks!

Re: Title attribute. Yes, true, but the same concept of overruling works for 

@DwContent as well, no?




Imar
 
Nicolai Høeg Pedersen
Posted on 28/07/2010 10:21:03
Reply
Yes - same concept of overruling. Page 24/25
 
Posted on 24/08/2010 09:56:05
Reply
Feature request:

I have an idea for 2 usefull feature that would make Designs and layouts even more awesome.

1) I'd like to arrange the contentareas in the backend, so I, in my template, can set a value that controls which areas is the first, 2nd 3rd.. and so on.
ATM. that rearrange depending on content, which isn't intuitive.

2) When i have a content area and i add paragraphs to i, it would be awesome having the <! --@LoopModx- -> tags available in the paragraph templates.
I/We often need to style fx. the N-th paragraph diffent, to accomodate Box floating. So far you had to use News v2 or javascript to do it.
This ofc. would also be valuable with "kolonneskift" designs in the "old" design system.


Regards
 Martin
 
Posted on 27/08/2010 15:10:20
Reply
It seems that conditional comments are not parsed correctly. I have this in a layout file:

<link rel="stylesheet" type="text/css" href="Styles/Default.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="Styles/ie.css"/>
<![endif]-->

When parsed, I end up with this:

<link rel="stylesheet" type="text/css" href="/Files/Templates/Designs/LightCorner/Styles/Default.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="Styles/ie.css"/>
<![endif]-->

The first style sheet is correctly relocated to the /Files folder, while the one in the conditional comment is not touched at all.

Imar




 
Nicolai Høeg Pedersen
Posted on 30/08/2010 10:04:18
Reply
Oh - that is because the html template is loaded in a html document object that loads the DOM and uses that to navigate the changes. Since this if sentence is basically a comment it is not part of the DOM and is therefore not discovered.

So that would require some good old regex to fix...

It has now been bugged.
 
Posted on 30/08/2010 12:52:43
Reply
I believe I've found a bug.

We normally use several classes for the elements in the DOM and this also for the navigation. But my classes (and id) are removed on parsing:

BEFORE PARSING
----------
<ul id="menu" class="dwnavigation grid_12 alpha">

AFTER PARSING
----------
<ul>

This actually creates a lot of trouble. I know, I could start wrapping my elements in order to keep ids and classes, but this other way would be cleaner.

Suggestions?

Cheers
Bo Dudek
Webdeveloper
Mediegruppen Reklamebureau as



 
Nicolai Høeg Pedersen
Posted on 30/08/2010 13:18:25
Reply
Hi Bo

That is not a bug, but as intended. See the explanation in chapter "8.1.2 Navigation" in manual, and how to overrule this parsing rule in chapter 8.2 (new in 19.1.0.4).

Manual: http://engage.dynamicweb-cms.com/Admin/Public/DWSDownload.aspx?File=Files%2fFiler%2fDocumentation%2fRelease%2fDynamicweb+7.1%2fTechnical+documentation%2f(en-US)+Designs+and+Layouts.pdf
 
Posted on 30/08/2010 13:33:27
Reply
Hi

Actually I can't see the logic here :) If I am supposed to use e.g.

<! -- @ DwNavigation(xxx) -- >

.. what is then xxx?

Another thing: When I apply a design to a page, I would expect the subpages to inherit this design unless I overrule it on specific pages.. but they don't! Is that also intended?

Cheers
Bo Dudek
Webdeveloper
Mediegruppen Reklameburau as
 
Nicolai Høeg Pedersen
Posted on 30/08/2010 13:58:47
Reply

xxx is the id of your navigation tag - so in your example:

<ul id="menu" class="dwnavigation grid_12 alpha">
<!-- @DwNavigation(menu) -->
</ul>

The logic is, that when it comes to navigation the UL usually comes from the XSLT so you have complete control over it - i.e. not render it if there are no menu items. So you basically needs to add your classes/id's to your xslt or use the approach above (be aware of double ul's then)

You could just wrap your navigation like this:
<div id="menu" class="dwnavigation grid_12 alpha">
<ul class="dwnavigation"></ul>
</div>

Then you might have to change some css selectors. Then you can reuse the same simpel navigation xslt for most purposes.

 
Posted on 31/08/2010 13:46:53
Reply
Hi again

Great - the menu-part now works.

Another thing: When I apply a design to a page, I would expect the subpages to inherit this design unless I overrule it on specific pages.. but they don't! Is that also intended?

Cheers
Bo Dudek
Webdeveloper
Mediegruppen Reklamebureau as
 
Posted on 03/09/2010 09:52:11
Reply
Sorry for repeating - need an answer ;)

When I apply a design to a page, I would expect the subpages to inherit this design unless I overrule it on specific pages.. but they don't! Is that also intended?

Cheers
Bo Dudek
Webdeveloper
Mediegruppen Reklamebureau as
 
Nicolai Høeg Pedersen
Posted on 06/09/2010 15:05:46
Reply

Yes - that is intended. And here is why:

If layout is inherited you allways have to set a specific layout further down in navigation structure. When the website is up and running this is where you will create most of the new pages and content

On a website you set the "Default" layout - the layout that is needed for most of the pages. Then you need specific templates for frontpage and section frontpage - you set them directly on those pages - they do not get created that often and now you do not have to set layouts for pages further down in the tree where new content i usually created using the same template.

If you save pages as templates (In paragraph list using "Tools" tab, "Save as template" - http://manual.net.dynamicweb.dk/Default.aspx?ID=6738) you can have pages using a specific layout template and setup based on its intended usage.

When creating new pages the user will be asked what kind of page, and then a predefined page with setup (i.e. layout and default content) is created.

 
Posted on 14/09/2010 11:57:42
Reply
Couple of observations regarding using master page(s).

1) When using a master page all the templates inherits the title from the master giving all the templates in the backend the same name leaving the user to destinguish between them only on file name.

2) Previously it was possible to apply a master page for each website/language area this doesn't seem to be the case any more. Will this be supported in the future? Or on the new language control system? Would be nice for google analytics area specific css etc.
 
Nicolai Høeg Pedersen
Posted on 14/09/2010 12:35:33
Reply
Hi Hans

Thanks for giving feedback.

@1 - Good point. Will make some way to handle this for 7.2

@2 - "old school master templates" are not in anyway the same as the new "master pages". The layouts decides what master page to use, and not the website/language. But I get the point, though. Will give it a thought on how this could be solved.
 
Posted on 29/09/2010 15:06:11
Reply
Is it possible to create eCom navigation using the new layout method. I haven't been able to find documentation about this?
 
Nicolai Høeg Pedersen
Posted on 29/09/2010 15:58:36
Reply
It works the same as allways...

See a detailed description with templates in this thread:
http://engage.dynamicweb-cms.com/Forum-5.aspx?action=ShowThread&ThreadID=2141
 
Posted on 17/11/2010 18:37:21
Reply
Will 7.2 be able to import CSS from Designs and Layouts into the editors in Dynamicweb?
 
Nicolai Høeg Pedersen
Posted on 18/11/2010 10:13:50
Reply
Yes.
 
Posted on 25/11/2010 14:43:47
Reply
I´m using a master page and when I look at the page source, I get the following in the <HEAD> section:

< Link rel="canonical" href="/Nyhedsvisning-91.aspx?PID=50&M=NewsV2&Action=1&NewsID=9" >
< base href="something.something" >

It´s a problem when using News, as in my example. W3C return errors due to the fact that the &-sign are not transformed. Any fix for this?

/Casper
 
Nicolai Høeg Pedersen
Posted on 25/11/2010 14:49:17
Reply
No ways with xhtml. 

Change to html 5 header, which works great:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
</head>

W3 got their sense back with regards to &'s in html 5...

And as long as you only use valid xhtml tags and attributes, everything works just fine in all browsers.
 
Posted on 25/11/2010 16:02:45
Reply
 
Talking of HTML5, you might want to make a little change in the parser.

The parser assumes that our search forms have an input of type text. In HTML5 you can also use type search...

<input name ="q" type="search" />

...or no type at all (implicit type=text)...

<input name ="q" />



/Morten
 
Posted on 09/12/2010 10:42:04
Reply
When making ecom-solutions, I use the design&layout navigation to show subgroups of the group I am inside.

To do this, I create a navigation in my layout, that I later use in my ecom-templates with the <!--@DwNavigation(nav)--> tag. I then wrap it in a div set to display:none, but I really don't like to hack that way.

Is it possible to create a navigation, that I can call using the above tag, without having to make it show up in my layout?
 
Nicolai Høeg Pedersen
Posted on 09/12/2010 11:09:31
Reply
No - that is not possible...
 
Posted on 10/12/2010 21:01:06
Reply

(never mind this post)

 
Posted on 10/12/2010 21:56:09
Reply
 I'm not sure this is the right thread, but in some cases it would be nice to have the ability to use translate-tags in Paragraph-templates. I know it's not possible to use the translation tags on paragraphs, cause there's no icon/button for it (should be located in the area for choosing the p-template) ;-)
In a lot of our sites we use an empty cart (0 items) and even login-fields coded directly in a paragraphtemplate's html, cause the cart-module (v1) is only shown/defined when an item is in it. 
In these cases we have to have a paragraph for each country, its a workaround, but still it would be nice to just have one paragraphtemplate for this.
 
Posted on 07/01/2011 10:29:17
Reply
  I have a feature request:

In the settings when adding a content area it would be nice to be able to force a specific paragraph template.

Also @np you mentioned it might be possible to use different master templates pr. website/area/language with the 7.2 release, do you have an info on this?
 
 
Posted on 26/01/2011 14:46:29
Reply
 I have a feature request too.

When building complex layout, I tend to make many different paragraph templates to use in different content placeholders (eg. content sliders etc.)

Could it be an idea to make setting variable in the content placeholders, to define which paragraph templates is allowed in the chosen placeholder?

Eg.


The templates would then have to be in a "Paragraph" subfolder to the layout-folder.
 
Posted on 08/02/2011 14:18:40
Reply
Hi,
I've got a problem, and I believe it might be a bug (or not yet implemented feature).

We're trying to speed up the site with some parallelism (loading JS, CSS from external sources). It concerns a webshop, where we are planning to use HTTPS.

Some examples of an external files: 
https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js

When I try to use a HTTPS link in a Design template it gets parsed to something like /Files/Templates/Designs/[XXX]/https://externalurl/bla.js.

When using http:// it remains an external & absolute path. I think that "https://" is not handled separately as "http://" is.

For now, I've had to put the link in a language tag (XML) so that the https link stays intact.

regards,
Gabrijel
 
Posted on 10/02/2011 11:55:28
Reply
19.2.0.4 works with https, but you could also try this:

src="//ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"

BR.
Morten
 
Posted on 11/02/2011 15:02:57
Reply
Thnx, updated to latest version, working properly now!
 
Posted on 21/02/2011 08:35:10
Reply
I just tried to add a favicon to a design, using this syntax


But the path didn't change when the design was parsed by Dynamicweb.

 
Posted on 21/02/2011 12:26:50
Reply

Is there a reason why the parser does not parse ALL src and href attributes?

Why not let it parse all by default and make it possible to add something like settings="parse:false" to avoid parsing if you would ever need that?

/Morten
 
Posted on 21/02/2011 13:36:11
Reply
Yes, let it parse all paths by default (except the ones starting with http://, ftp:// etc.), and make a setting to override this.
 
Posted on 21/02/2011 14:42:31
Reply
It should just ignore any url starting with a scheme (http, https, ftp etc.) and any url starting with double forward slash ("//"), which you can use to load resources from either http or https depending on the scheme used for the current page.

 

You must be logged in to post in the forum