Creating Designs using eZ Publish

{def $current_month=currentdate()|datetime(custom, '%F')}
{if $node.name|eq($current_month) }
<span class="this-month">
{else}
<span class="default-month">
{/if}
{undef $current_month}

In the first line, we define a $current_month variable that has a value of the name of the month (for example, October), retrieved by the datetime() operator. Then we use the IF conditional control to choose the correct class.

In the last line, we delete the variable previously created, by releasing it from system memory.

Loop control

) from an array of items.

<ul>
{foreach $items as $item}
<li>{node_view_gui content_node=$item view=line}</li>
{/foreach}
</ul>

This will be rendered as:

<ul>
<li>1st item</li>
<li>2nd item</li>
<li>3rd item</li>
</ul>

As you can see, the FOREACH structure is similar to the PHP structure. In this example, the most interesting line is the definition of the list object. This we can literally read as: render the content node (node_view_gui) from a specific node (content_node=$issue) using the line view template (view=line).

Fetch functions

With the fetch functions, we can retrieve all of the information about a content object for a module. The fetch functions can also be used to create custom queries to retrieve only the information we need, and not everything.

eZ Publish exposes many fetch functions, which can be read about on the documentation site at[http://ez.no/doc/ez_publish/technical_manual/4_0/ http://ez.no/doc/ez_publish/technical_manual/4_0/] reference/template_fetch_functions

The most important, and most used, fetch functions are those regarding the content, sections, and user modules. For example, we can fetch the root content object by using the following code in our template:

{$object = fetch('content', 'object', hash('id', '1'))}

We can then use the $object variable to display the object inside the HTML code.

[edit] Generic template functions and operators

The CMS gives us a lot of functions and operators, all of them described in the reference manual of the eZ System documentation site.

As a thumb rule, we should remember that to execute a particular function, we have to use the following syntax:

{function_name parameter1=value1 parameterN=valueN }

All parameters are separated by spaces and can be specified in no particular order.

If we want to manage the operators, we have to remember that they accept the parameters passed in a specific order, separated by a comma. Moreover, an operator should handle a parameter passed to it with a pipe (|).

{$piped_parameter|my_operator( parameter1, , parameterN ) }

Every time we see a pipe after a variable, we have to remember that we are passing a value to an operator.

We used the datetime() operator in the previous example for the conditional control functionality.

As a reference to API functions and operators, you can use the official variable documentation that is constantly updated on the eZ System site: http://ez.no/doc/ez_publish/technical_manual/ 4_0/reference/template_operators http://ez.no/doc/ez_publish/technical_manual/ 4_0/reference/template_functions

Layout variables

By default, the page layout template can access some of the variables passed by the CMS. These variables, named Layout variables, can be used to render system and user information, or to change the output. These variables are automatically configured by eZ Publish when it analyzes and executes the code related to a view.

One of the most important variables is $module_result, which contains the results generated by the module and the view that is being executed.

A module is an HTTP interface that interacts with eZ Publish. A module consists of a set of views that contain the code to be executed. For example, if we call the following URL, the system executes the login view code of the user module: http://www.example.com/index.php/user/login.

As an API reference, you can use the official variable documentation that is constantly updated on the eZ System site: http://ez.no/ doc/ez_publish/technical_manual/4_0/templates/the_ pagelayout/variables_in_pagelayout


Overriding a template

eZ Publish offers a set of standard templates that are useful, but they cannot cover all the possible design needs.To solve this issue, the CMF provides a fallback system that allows us to load different templates based on specific rules. This system is usually referred to as overriding, and allows us to change the template for each module's view by overriding the default template when the user is in a particular context.

Embedding HTML inside the WYSIWYG XML editor, pt.2

As we saw in Tutorial 4, we had to override a standard behavior of eZ Publish to create a generic HTML block inside the WYSIWYG XML editor.We previously created a content style named html for the online editor, but we didn't do anything for the frontend to render it correctly. Now, we will finish that work.

First, we have to create a file named literal.tpl and place it in the design folder of our extension. The following code will do exactly what we need:

# mkdir -p /var/www/packtmediaproject/extension/packtmedia/design/
magazine/templates/datatype/view/ezxmltags/
# cd /var/www/packtmediaproject/extension/packtmedia/design/magazine/
templates/datatype/view/ezxmltags/
# touch literal.tpl

Next, we will open the literal.tpl file in our preferred IDE. Now we will add the code that will, by default, render everything surrounded by a

 tag and the raw HTML code, if the class is html:
<pre>
{if ne( $classification, 'html' )}
<pre {if ne( $classification|trim, '' )}
class="{$classification|wash}"{/if}>{$content|wash( xhtml )}

{else} {$content} {/if} </pre>

This code will check to see if the $classification variable is different from the "html" string in order to add the

 tag and then, again, it will add a class attribute to the <pre> tag if the $classification variable is not null.

To use it, we only need to reset the cache from the shell prompt by using the following command:
<pre>
cd /var/www/packmediaproject/
php bin/php/ezcache.php --clear-all --purge

The ezcache.php file is a PHP shell script that can be used to clear and manage the eZ Publish cache. This file has many parameters, which can be viewed by using the --help parameter.

[edit] Creating a new design

Before starting work on the eZ Webin template code, we need to create a wireframe in order to decide on the layout structure. We will use this structure to override the standard layout files.

A wireframe is a basic visual guide that is used in web design to suggest the structure of a website and the relationships between its pages.

Wireframe editors

There are a lot of commercial and free wireframe editors. To create our site's wireframes, we will use the Firefox plugin called Pencil (http://www.evolus.vn/Pencil/). We have chosen Pencil because it is open source and works on every platform that runs the Firefox browser. If you need something more complete, you should take a look at Balsamiq (http://www.balsamiq.com/) or at OmniGraffle (http://www.omnigroup.com/applications/OmniGraffle/) if you have an Apple computer.


Our site will have at least six different page layouts:

• The homepage
• The issue page, where we will display the cover and the articles list
• The issue archive page, by month and by years
• The staff profile page, where we will display the latest articles that the editor has written, along with his profile
• The article and the forum pages, with the default layout based on the eZ Webin design

Now we will illustrate the first four layouts because we will work on them, overriding their standard eZ Webin layout. In Tutorial 8, we will work on the forum and customize it to fulfill our future nee

[edit] The homepage

Starting from the homepage, we can see that the site will have, in the top-left corner, a logo for the magazine and a place-holder for a banner. Under these, we will have the main navigation menu and the main content area.







We have chosen a three-column layout in order to easily manage the content that we want to show. In the homepage, the first column will show the latest news and the middle column will show the information and cover of the latest issue. The last column will have two boxes one with the most important article from the latest issue and the other with the forum thread.

[edit] Issue page

The issue page will show some information of a specific magazine issue.




In this page, the middle box of the homepage will shift towards the left, and in the right column there will be the highlighted article for the issue. At the bottom of the page, we will find all of the other articles.

[edit] The issue archive

We have to remember that our magazine is released monthly, so we need an archive page where we can collect all of the past issues.




The issue archive page, which can be reached by clicking on the main navigation menu, will again show some information from the latest issue. (We need to sell our articles!)

The rightmost column of the template will show all of the covers for the current or selected year.

At the bottom of the page, we will create a box with links to the past issues grouped by years and months.

[edit] The staff profile page

The staff profile page will display information from a staff profile, such as his avatar, biography, and the latest articles that he has written.




The staff profile page will have three columns. The first column will show information regarding the editor's profile, the middle column will show all of the articles the editor has written (paged five by five) and the third will be used for banners or other images.

[edit] eZ Webin

In Tutorial 1, we installed the eZ Webin package as a sample frontend for our site. This package is very flexible and is usually used as a starting point for developing a new site. By default, it includes:

• A flexible layout
• Some useful custom content classes (blog, event, forum, article, and so on)
• Web 2.0 features, such as a tag cloud and comment functions
• Custom template operators

In our project, we will extend and override the eZ Webin template in order to create the Packtmedia Magazine site and add some features needed for the project. We will see this step-by-step as we understand better how eZ Publish works.

[edit] Overriding the standard page layout

The page layout is the main template and defines the style of the entire site. To create a page layout template, we need to create a file named pagelayout.tpl and place it inside the templates folder of our design extension.

As we said, we will work with eZ Webin. This extension doesn't use the standard page layout but overrides the standard page layout with its own custom behavior. We need to do the same overriding from the eZ Webin pagelayout.tpl.

To override the template, we have to copy it in our design's extension folder placed in extension/packtmedia/design/magazine/templates/. Now open a shell and execute this:

# cd /var/www/packtmediaproject/extension
# cp /ezwebin/design/ezwebin/templates/pagelayout.tpl 
/packtmedia/design/magazine/templates/


We will use this new pagelayout.tpl file to implement the wireframe that we developed in the previous sections.

[edit] Section for our project

eZ Publish includes features for creating a particular view in order to add content objects inside specified sections. For example, if we take a look at our wireframe, we need to assign a different layout for rendering the Issue archive folder and its subfolders.

To do this, we have to create a new section in the administration panel and associate it to the entire Issue archive subtree. After that, we can use the fetch functions to select the correct view for that section.

[edit] Creating a new section

To create a new section, we have to open our browser and from the site's backend, select the Setup tab from the top menu. We then need to navigate to the Sections link in the left-hand menu, and then click on the New section button.




Next, we will create a new section called Archive and select the default Content structure value in the select menu.




Now, a new Archive link will appear in the Sections list. We have to click on the + button to the left of the Archive link, and then select the Issue archive node, by selecting the relevant checkbox.




After we have saved, click on the Select button. All of the Issue archive subfolders will be placed inside the Archive section. We have to remember the ID of this section, which we'll use to create the override rules. In this case, the section ID number is 6, as seen in the first screenshot in the Creating a new section section.

[edit] Setting up the section permission access

By default, eZ Publish creates private sections that only an administrator can access. To make a section public, we need to give read permission to anonymous users.

To set up the rules, we have to go back to Setup tab on the top menu, and then click on the Role and policies link on the left-hand menu.




Here, we have to click on the Edit button on the right-hand side of the Anonymous link, and then click on the New policy button.




Next, select the content option in the Module field, and then click on the Grant access to one function button.




Select the read option in the Function field, and then click on the Grant limited access button.




Next, select the Archive option for the Section field. Click on the OK button, and then click on the OK button on the Edit <Anonymous> Role page.




Now, the anonymous user can access the Archive section.

In the next paragraph, we will use this section to create custom override rules.

[edit] Customizing the page layout

After we copy the pagelayout.tpl template into the new path, we have to work on it in order to create the three columns inside the content layout of the eZ Webin template.

To do this, first of all, we have to remove the leftmost sidebar, along with the secondary navigation menu, inside the Archive section that we have created.

Open the pagelayout.tpl file that you have copied into your favorite IDE, and take a look at the code.

At line 62 we will find the following code:

{if and( is_set( $content_info.class_identifier ), 
eini('MenuSettings', 'HideLeftMenuClasses', 'menu.ini' )
|contains($content_info.class_identifier ) )}
{set $pagestyle = 'nosidemenu noextrainfo'}

Here, eZ Webin hides the side menu if the content class belongs to the array returned by the ezini operator. We now need to extend the IF sentence and add a control to the ection ID, by using the following code:

{if or(and( is_set( $content_info.class_identifier ), 
ezini('MenuSettings', 'HideLeftMenuClasses', 'menu.ini' )
|contains($content_info.class_identifier ) ), 
$module_result.section_id|eq(6))}
{set $pagestyle = 'nosidemenu noextrainfo'}

As we can see, this code will now check to see if the browsed section has an ID equal to 6 (that is, the achive section ID that we previously created) and if it has, will hide the unnecessary sidebar.

[edit] CSS editing

Luckily, the entire template code of eZ Webin is strongly semantic and all of the elements have their own IDs and classes. Thanks to this, we can change a lot of things by simply working on the CSS.

By default, the CMS uses six CSSes. These are:

• core.css: this is the global stylesheet where all of the standard tag styles for eZ Publish are defined; usually, this file is overridden by all of the others
• webstyletoolbar.css: this stylesheet is imported for the frontend web toolbar that is used for editing the content
• pagelayout.css: this is where all of the default styles of the global pagelayout are defined
• content.css: this is where all the default styles of the content classes are defined
• site-colors.css: this file is used to override the pagelayout.css to skin a site differently
• classes-colors.css: this file is used to override the default styles defined by the content.css file

To edit the CSS, we have to copy the original eZ Webin stylesheet from the /var/ www/packtmediaproject/extension/ezwebin/design/ezwebin/stylesheets folder to our design directory and then to execute the following commands:

# cd /var/www/packtmediaproject/extension/
# cp -rf ezwebin/design/ezwebin
/stylesheets/* packtmedia/design/magazine/stylesheets/

Now, every time that we want to change the stylesheet, we have to remember to edit the CSS files in the design/magazine/stylesheets/ directory of our extension.

[edit] Creating a new style package

In eZ Publish, as we did for extension, it's possible to create a portable style package, so we can share and reuse our custom style in other sites. We can do this by navigating to the backend admin site and uploading the new stylesheet that we want to use.

First, we have to create our CSS files by using our favorite CSS editor; we have to remember that they will override the default styles, so we only need to add the lines that we want to change.




After we create the new stylesheet files, we have to open the browser, click on the Setup tab, and then click on the Package link in the left-hand sidebar. The system will ask us where we want to create our new package. We will select the local repository and click on the Create new package button. eZ Publish will then ask us which kind of package we want to create. We have to select the Site style wizard, and then click on the Create new package button.




We can now choose a thumbnail for the style that we are uploading, or continue without it. After selecting the thumbnail, the wizard will ask us to choose the CSS file that we previously created. Select it, and then click on the Next button.




With the wizard, we will also upload one or more images, for example a new logo file, or other images related to the CSS. To not upload files, we simply have to click on the Next button without selecting a file in the form.




We have to remember that all of the images that we upload will be saved in a subfolder named images, which will be placed in the same directory as the stylesheet. This will be useful when we need to set the relative path of the images used inside the CSS.


We can now add the package information, just as we did in Tutorial 5, and export it to our PC (if required).




The new style package will automatically be installed in the eZ Publish package folder. It will be accessible from the Design tab, via the sidebar's Look and Feel link.

If we select the package and clear the cache automatically, it will be applied to the frontend.




[edit] Additional References

• For instructions on advanced techniques for Debugging eZ Publish, click [1]
• For instructions on Installing eZ publish 4, click [2]
• For instructions on Troubleshooting eZ publish, click here
• For instructions on Installing eZ publish, click here

[edit] Source

The source of this content is Appendix B:Debugging eZ Publish of eZ Publish 4: Enterprise Web Sites Step-by-Step by Francesco Fullone, Francesco Trucchia(Packt Publishing, 2009).logo design by Kevin Josh 2010

Executive Editor Sean Lopez own  : SEO Company and provider of Link Building Services and SEO Services

And Like Costumes and Halloween Costumes and criar sites

And Like The Global Information Network and Global Information Network

Categories: Open Source | Content Management