Share » Forums » General » Spaces in the code generated by...

Spaces in the code generated by eZpublish

Spaces in the code generated by eZpublish

Thursday 27 October 2005 1:15:51 am - 8 replies

Modified on Wednesday 09 November 2005 2:53:04 am by John Smith

Author Message

Nathan Kelly

Thursday 10 November 2005 12:05:08 am

Hi John, I know what you mean by "a lot of spaces and superfluous markup" but if you take some time to clean up the templates you can get very clean results.

When I'm editing my templates I spend quite a lot of time making sure the source is clean and legable, a few examples are:

When looping objects in a fetch, say for output to an unordered list I would like my source to look like this -

<div class="my-list">
	<ul>
		<li>text</li>
		<li>text</li>
		<li>text</li>
		<li>text</li>
	</ul>
</div>

To get the output to look this way I would construct my fetch like this -

{def fetch('content', 'list', hash('node_id', $module_result.node_id)
			'sort_by'.....) }

<div class="my-list">
	<ul>

{foreach...}
		<li>text</li>

{/foreach}

	</ul>
</div>

{undef}

I also make sure to remove extra tabs following each piece of eZ code to avoid my markup being tabed in too far, so following the {def} if I break down one line I make sure the empty line contains no tabs or spaces.

An example of my output for the site I'm currently working on following this practice is this -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>                                                        
<title>Company title</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-language" content="eng-AU" />
<meta name="author" content="" />
<meta name="copyright" content="" />
<meta name="description" content="" />

<meta name="keywords" content="" />
<meta name="contact" content="" />

<style type="text/css">
	@import url("/design/ccts/stylesheets/stylecss");
</style>

<!--[if IE]> 
<style type="text/css">
#container {
width:expression(document.documentElement.clientWidth < 760? "760px": "auto" );
}
#content-area {
width:expression(document.documentElement.clientWidth > 984? "984px": "auto" );
height:expression(this.scrollHeight < 300? "300px": "auto" );
}
</style>
<![endif]-->

</head>

<body>

	<div id="container">
	
		<div id="header">		


			<h1><a href="#"><img src="/design/ccts/images/logo.png" alt="company logo" /></a></h1>


			<h2>Company Slogan</h2>
			
			<hr />
			
			<div id="site-tools">
				<ul>
					<li class="user">Welcome User</li>
					<li><a href="#">Logout</a></li>
					<li>text</li>
					<li>text</li>
					<li>text</li>
				</ul>


			</div>
			
		</div>

		<div id="main-nav">

			<div class="wrapper">
		
				<p class="skip-nav"><a href="#content" title="Main navigation - skip to content.">Main navigation - skip to content</a></p>		

				<ul>		
  					<li>text</li>
  					<li>text</li>
  					<li>text</li>

  					<li>text</li>
  					<li>text</li>
				</ul>	

			</div>
			
			<div class="nav-end"></div>
				
			<hr />
			
		</div>

		<div id="location">

			<h2>text</h2>
									
			<div class="collage"></div>

			<hr />
								
		</div>
			
		<div id="content-area">

			<div id="sub-nav">
						
				<p class="skip-nav"><a href="#content" title="Sub navigation - skip to content.">Sub navigation - skip to content</a></p>

				
				<ul>		 
					<li>text</li>
					<li>text</li>
					<li>
					<ul>
					<li>text</li>
					<li>text</li>

					<li>text</li>
					<li>text</li>
					</ul>
					</li>
					<li>text</li>
					<li>text</li>

					<li>text</li>
					<li>text</li>
					<li>text</li>
				</ul>

				<ul class="service">
					<li><h4>Service</h4></li>

					<li>text</li>
					<li>text</li>
					<li>text</li>
				</ul>
				
				<hr />

			</div>
			
			<div id="content">
			
				<div class="wrapper">				

					
					<h3>Heading</h3>

					<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</p>

					<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</p>
					
					<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</p>
					
				</div>
				
				<hr />
				
			</div>
			
		</div>
			
		<div id="footer">
		
			<p class="top-link"><a href="#container">Top</a></p>

		
			<div id="footer-contact">
			
				<ul>
					<li><h5>Company text</h5></li>
					<li>Phone: text</li>
					<li>Fax: text</li>
					<li>Email: text</li>
				</ul>

				
				<hr />
				
				<ul>
					<li><h5>Company text</h5></li>
					<li>Phone: text</li>
					<li>Fax: text</li>
					<li>Email: text</li>					
				</ul>

				
				<hr />
				
			</div>
		
			<div id="footer-copyright">
			
				<h5>Copyright &copy; 2005 text.</h5>
				
				<ul>
					<li>text</li>
					<li>text</li>

					<li><a href="http://validator.w3.org/check?uri=referer" title="This is Valid XHTML 1.0">XHTML 1.0</a></li>
					<li><a href="http://jigsaw.w3.org/css-validator/check/referer" title="This is Valid CSS.">CSS</a></li>
					<li>text</li>
				</ul>
				
			</div>
			
		</div>		
	</div>
	

</body>

</html>

I know this still has a lot of spaces but this is the way I would code a page normaly, you could reduce the space far more without too many problems it just depends on how you like your output.

Though my template code can sometimes become more confusing the finnished product to me is more impotant, it just depends on how much time you are willing to spend.

Hope that gives you a little insight.

Cheers!

Pardon me while I burst into flames...

John Smith

Thursday 10 November 2005 1:57:09 am

hi Kelly,

Thanks for your time and very kind reply. Reply appreciated.

I am actually doing the same way you told me in your reply. Have a look.

The code is (in the page_head.tpl):

{default enable_help=true() enable_link=true()}
	{let name=Path path=$module_result.path reverse_path=array()}
		{section show=is_set($module_result.title_path)}
			{set path=$module_result.title_path}
		{/section}
		{section loop=$:path}
			{set reverse_path=$:reverse_path|array_prepend($:item)}
		{/section}
		{set-block scope=root variable=site_title}
			{section loop=$Path:reverse_path}{$:item.text|wash}{delimiter} / {/delimiter}{/section} - {$site.title|wash}
		{/set-block}
	{/let}
	<title>{$site_title}</title>
	{section show=and(is_set($#Header:extra_data),is_array($#Header:extra_data))}
		{section name=ExtraData loop=$#Header:extra_data}
			{$:item}
		{/section}
	{/section}
	{* check if we need a http-equiv refresh *}
	{section show=$site.redirect}
		<meta http-equiv="Refresh" content="{$site.redirect.timer}; URL={$site.redirect.location}" />
	{/section}
	{section name=HTTP loop=$site.http_equiv}
		<meta http-equiv="{$HTTP:key|wash}" content="{$HTTP:item|wash}" />
	{/section}
	{section name=meta loop=$site.meta}
		<meta name="{$meta:key|wash}" content="{$meta:item|wash}" />
	{/section}
	<meta name="MSSmartTagsPreventParsing" content="TRUE" />
	<meta name="generator" content="eZ publish" />
	{section show=$enable_link}
		{include uri="design:link.tpl" enable_help=$enable_help enable_link=$enable_link}
	{/section}
{/default}

The output generated by ezpublish is something like:

																			<title>			Welcome to eZ publish
		</title>
		
				<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
			<meta http-equiv="Content-language" content="eng-GB" />
				<meta name="author" content="eZ systems" />
			<meta name="copyright" content="eZ systems" />
			<meta name="description" content="Content Management System" />
			<meta name="keywords" content="cms, publish, e-commerce, content management, development framework" />
		<meta name="MSSmartTagsPreventParsing" content="TRUE" />
	<meta name="generator" content="eZ publish" />
			

<link rel="Home" href="/in" title="eZ publish front page" />
<link rel="Index" href="/in" />
<link rel="Top"  href="/in" title="			Welcome to ez Publish
		" />
<link rel="Search" href="/in/content/advancedsearch" title="Search eZ publish" />
<link rel="Shortcut icon" href="/design/standard/images/favicon.ico" type="image/x-icon" />
<link rel="Copyright" href="/in/ezinfo/copyright" />
<link rel="Author" href="/in/ezinfo/about" />

I don't know from where all the spaces coming.

Please have a look and suggest.

Thanks once again for your time.

cheers.

Nathan Kelly

Thursday 10 November 2005 5:00:33 pm

Hi John, one thing as I mentioned earlier is that your template code may become harder to read if you are determined to have clean XHTML. So if you are prepared to sacrifice some legibility of your template code you will have clean output.

Looking at your file there are a couple of things I do differently to get the output looking the way I want it.

I don't indent any of the template code, for example I don't indent {section}, {if}, {let}, {def} etc.

So this:

{default}
	{section}
	{section}
		<li></li>
	{/section}
	{/section}
{/default}

would look like this:

{default}
{section}
{section}
		<li></li>
{/section}
{/section}
{/default}

I break (between) and (inside) sections, when you do a loop this is important as each item looped will start on a new line rather than starting at the end of the last item.

So if you don't want this to happen:

<ul>
	<li></li>	<li></li>	<li></li>
</ul>

You need to break either above or below your list item within your {section} tags, then preceding or following the section break again. eg.

<ul>

{section loop=...}
        <li></li>

{/section}

</ul>

<ul>

{section loop=...}

        <li></li>
{/section}

</ul>

Both of these should produce:

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

Also another thing to lookout for is extra tabs or spaces:

{section}[tab][tab]
[tab][tab]<li></li>
[tab][tab]
{/section}

Should be:

{section}
[tab][tab]<li></li>

{/section}

Another thing I often do is add a break at the end of a template, like an include template or line view template. This avoids the code below starting at the end of the previous line, it should start on a new line.

So thats mostly what I do, however sometimes I don't get the expected result first time, this is where you need a little patience.

Here is the code I would use for the page_head.tpl, this may not produce exactly the right output, I haven't tested it but it will come close, you just need to play with the spacing as I suggested above.

{default enable_help=true() enable_link=true()}
{let name=Path path=$module_result.path reverse_path=array()}
{section show=is_set($module_result.title_path)}
{set path=$module_result.title_path}
{/section}
{section loop=$:path}
{set reverse_path=$:reverse_path|array_prepend($:item)}
{/section}
{set-block scope=root variable=site_title}
{section loop=$Path:reverse_path}{$:item.text|wash}{delimiter} / {/delimiter}{/section} - {$site.title|wash}
{/set-block}
{/let}

<title>{$site_title}</title>
{section show=and(is_set($#Header:extra_data),is_array($#Header:extra_data))}
{section name=ExtraData loop=$#Header:extra_data}

{$:item}
{/section}

{/section}
{* check if we need a http-equiv refresh *}
{section show=$site.redirect}

<meta http-equiv="Refresh" content="{$site.redirect.timer}; URL={$site.redirect.location}" />
{/section}

{section name=HTTP loop=$site.http_equiv}

<meta http-equiv="{$HTTP:key|wash}" content="{$HTTP:item|wash}" />
{/section}

{section name=meta loop=$site.meta}

<meta name="{$meta:key|wash}" content="{$meta:item|wash}" />
{/section}

<meta name="MSSmartTagsPreventParsing" content="TRUE" />
<meta name="generator" content="eZ publish" />

{section show=$enable_link}

{include uri="design:link.tpl" enable_help=$enable_help enable_link=$enable_link}
{/section}
{/default}

This should produce this:

<title>Welcome to eZ publish</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-language" content="eng-GB" />
<meta name="author" content="eZ systems" />
<meta name="copyright" content="eZ systems" />
<meta name="description" content="Content Management System" />
<meta name="keywords" content="cms, publish, e-commerce, content management, development framework" />
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
<meta name="generator" content="eZ publish" />

Hope this helps, let me know if you have any trouble.

Cheers!

Pardon me while I burst into flames...

Nathan Kelly

Thursday 10 November 2005 5:30:12 pm

Just another quick note. I noticed your title tag has a heap of tabs inside it, the reason for this I think is this part of the code:

	{let name=Path path=$module_result.path reverse_path=array()}
		{section show=is_set($module_result.title_path)}
			{set path=$module_result.title_path}
		{/section}
		{section loop=$:path}
			{set reverse_path=$:reverse_path|array_prepend($:item)}
		{/section}
		{set-block scope=root variable=site_title}
			{section loop=$Path:reverse_path}{$:item.text|wash}{delimiter} / {/delimiter}{/section} - {$site.title|wash}
		{/set-block}
	{/let}

All of the tabs in this code are rendered in your <title>{$site_title}</title> tags, by removing all of those tabs {$site_title} should not render any extra whitespace. I counted about 23 tabs in this code snipet and the same number of extra tabs are rendered in your title tags.

Hope that helps too ;).

Cheers!

Pardon me while I burst into flames...

John Smith

Friday 18 November 2005 4:32:13 am

hi Kelly,

Thanks mate, you are absolutely right, Everything is working according to what you said in your last reply. Thanks for your kind help. Really appreciated. Thankyou very much. I will try to sort all the tpl files, it is huge work.

One or two things, I wonder if you can help me again please.

Please correct me if I am wrong.

After a designing a site on a local pc, I am exporting the site style and then importing that site style onto the live one. I was going throught the code and it is showing me the code given below:

<style type="text/css">
@import url("/design/base/stylesheets/core.css");

@import url("/design/base/stylesheets/site.css");

@import url("/var/news/storage/packages/cd2/files/default/file/main.css");
@import url("/design/base/stylesheets/classes.css");

@import url("/var/news/storage/packages/cd2/files/default/file/float.css");
@import url("/design/standard/stylesheets/debug.css");</style>

In the code above cd2 is my site style.

I noticed however a distratcting 'juddering' affect when moving from one page to another on the live site, each page is momentarily rendered in text and then the frontend snaps into position a split second later.

Please suggest if it is the right way, I am doing. or I have to design the site in another way. Are that many stylesheets responsible for distratcting 'juddering' affect.

Please help...

Cheers.

Nathan Kelly

Sunday 20 November 2005 3:33:45 pm

Hi John, you won't need to sort all of the .tpl files, only the ones in your siteaccess design directory, you are better off not editing templates in the standard and base directories, instead create you own, this way you won't affect the fallback system.

Looking at the paths to you css I notice your style sheets are located in "/var/news/storage/packages/", is there any reason for this?

If you have a siteaccess file i.e. "design/cd2" then you should place your style sheets in "design/cd2/stylesheets/".

I'm not sure if thats what is causing the jitter you're experiencing (it could be). Also make sure all of the styles you are importing are being used, I have only one style sheet on my current site (though I will be adding a print css), you may find you are importing styles for no reason?

The styles you are importing from the base design, core.css, site.css and classes.css, are these in use? Do you need them? If not I would say don't import them.

Try that for now, if that doesn't help check your style sheets for errors, http://jigsaw.w3.org/css-validator/ and fix them if there are any.

Let me know how you go!

Cheers!

Pardon me while I burst into flames...

John Smith

Monday 21 November 2005 2:40:09 am

hi kelly,

Thanks for your kind reply and help. Answering your question regarding the path of the stylesheets. Mate this is the path which I get, when I import any site style.

Moreover If I copy my stylesheets to the directory design/cd2/stylesheets/, then Is switching from one site style to another possible by going into Design>>Look and Feel - SiteStyles from the admin site?

Mate, Please clear this point.

Cheers.

Nathan Kelly

Monday 21 November 2005 2:33:01 pm

Hi John, I'm not really sure how the design "admin area" works to be honest, I personally don't use it, all of my layout and design is done manually.

That said, I'd assume that the path to the style sheets is correct (if eZ made the path then it must be right) so you might be better off leaving this as it is?

On the problem of the "jitter" you are experiencing I'm assuming you are using Internet Explorer? Try this, in your page layout (or where ever you have your <style type="text/css">) change one of the import statements to a link instead, so you have something like the following:

<head>

<style type="text/css">
@import url("/design/base/stylesheets/core.css");
@import url("/design/base/stylesheets/site.css");
@import url("/var/news/storage/packages/cd2/files/default/file/main.css");
@import url("/design/base/stylesheets/classes.css");
@import url("/var/news/storage/packages/cd2/files/default/file/float.css");
</style>

<link rel="stylesheet" type="text/css" media="screen" href="/design/standard/stylesheets/debug.css">

</head>

See if that helps, let me know how you go!

Cheers!

Pardon me while I burst into flames...

You must be logged in to post messages in this topic!

36 542 Users on board!

Forums menu