MODx-Feature: Having full control over the HTML output

11.03.2008

MODx-Feature:
Having full control over the HTML output

Tags: HTML, MODx | last edited: 11.08.2009

In contrast to many other Content Management Systems, MODx is constructed in a way to give the web designer the control over the HTML output without having to put in much effort. Web designers who, like me, set a high value on clean and semantic HTML know how horrific it can be to be helplessly forced to watch $CMS creating vast masses of tables or Div brews that then have to be “prettyfied” with CSS.

Let’s have a look at a simple MODx template.

MODx template

<html>
   <head>      
      <title>[(site_name)] - [*pagetitle*]</title>
   </head>

   <body>

      <div class="head">
         <h1>[(site_name)]</h1>
         <h2>[*pagetitle*]</h2>
      </div>

      <div class="navigation">         
         [[Wayfinder? &startId=`0`]]
      </div>      

      <div class="content">
         <h3>[*longtitle*]</h3>
         [*content*]
      </div>

      <div class="sidebar">
         [[Ditto? &tpl=`sidebarTpl`]]
      </div>

   </body>
</html>

The specifications [(site_name)], [*pagetitle*], [*longtitle*] and [*content*] are placeholders for the contents of a site that were previously entered in the manager. So far so good and everything is under control. The call for the snippets [[Wayfinder? &startId=`0`]] and [[Ditto? &tpl=`sidebarTpl` &startID=`5`]] could at first give the impression that unwanted HTML code is being introduced which can then only be adjusted by taking a circuitous route. In our case, Wayfinder delivers the navigation of the site and Ditto the entries in the sidebar. Thanks to the templates that are defined for the snippets this can be done very easily.

Let’s have a look at the Ditto snippet template sidebarTpl.

Ditto snippet template

<div class="sidebar_entry">
   <h4>[+title+]</h4>
   [+content+]
</div>

By using the placeholders [+title+] and [+content+] you determine the position where the dynamic content is going to be displayed. The rest is freely selectable HTML for an appropriate set-up, in our case the sidebar.

If Wayfinder does not receive a template as a parameter, it creates a UL- / LI- / A-list. In case you would like to configure the output differently, you assign Wayfinder the respective template parameter, just like Ditto, and define the HTML yourself.

Consequently, the HTML output of the entire site could look like this.

HTML output

<html>
   <head>      
      <title>My MODx site - snippets and templates</title>
   </head>

   <body>

      <div class="head">
         <h1>My MODx site</h1>
         <h2>Snippets and templates</h2>
      </div>

      <div class="navigation">         
         <ul>
            <li><a href="eintrag-1">Entry 1</a></li>
            <li><a href="eintrag-2">Entry 2</a></li>
            <li><a href="eintrag-3">Entry 3</a></li>
         </ul>
      </div>      

      <div class="content">
         <h3>Snippets and templates - this is how it works!</h3>
         <p>This is just an example, I'll keep things short.</p>
      </div>

      <div class="sidebar">
         <div class="sidebar_entry">
            <h4>Links</h4>
            <ul>
               <li><a href="http://modxcms.com">MODx</a></li>
               <li><a href="http://medianotions.de">Medianotions</a></li>
            <ul>
         </div>
      </div>

   </body>
</html>

Of course this is a very manageable example, but by following the same principle you can realise complex web projects with MODx just as well.

What is nice about this combination of snippet and template is that this principle is being consistently maintained by the important snippets (and of course many other the less important ones). Thereby, it is down to the web designer to use exactly the HTML set-up he/she wants to and remain true to his/her style.

Links

back to overview jump to top

—

Bookmark or send this page

—

Write a comment

—

2 Comments

Tracey

04.09.2009 03:36:20

So true Bogdan!

Previously I went down the Drupal path which was great until I saw the XHTML it spat out. I was converting an existing plain XHTML/CSS site and when it came time to style (‘theme’) it I pulled my hair out trying to find the right div or class to hook onto.

MODx’s approach seems so much more natural for designers.