Custom Navigation in Pimcore

Pimcore looks to be a great CMS! I haven’t played around with it much but if you are a fan of Zend Framework 1 then you’ll be right at home using it!

Right now, I’m designing the front end for a small promotional site that requires a CMS admin panel etc, and I’m rendering a customised Navigation view, in order to get the Bootstrap classes that I want.

Pimcore allows you to run multiple sites from the one system. So first we put a check in our layout.phtml :

$navStartNode = $this->document->getProperty("navigationRoot");
    if(!$navStartNode instanceof Document_Page) 
    {
        if(Site::isSiteRequest()) 
        {
            $site = Site::getCurrentSite();
            $navStartNode = $site->getRootDocument();
        } 
        else 
        {
            $navStartNode = Document::getById(1);
        }
    }

The root site always has Document ID 1. In the Pimcore admin panel, you right click and add a new page, then right click and you can tell it to use that page as an actual site, so you can add as many as you like!

In the layout.phtml (or view partial like header.phtml), I have the following:

<div class="navbar-collapse collapse">
<?php
        $navigation = $this->pimcoreNavigation()->getNavigation($this->document, $navStartNode);;
        echo $this->navigation()->menu()->renderPartial($navigation, 'elements/theme-nav.phtml', array(
                "maxDepth" => 1,
                "ulClass" => "nav navbar-nav"
          ));
 ?>
</div>

Pimcore checks in the views folder for the partial (elements/theme-nav.phtml in my example). In my project the views folder is located in /website/views/scripts, so create an elements folder, and create theme-nav.phtml:

<ul class="nav navbar-nav"  data-0="margin-top:20px;" data-300="margin-top:5px;">
    <?php
    foreach ($this->container as $page) 
    {
        echo '<li>'.$this->navigation()->menu()->htmlify($page).'</li>';
    }
    ?>
</ul>

And that’s it! Your Navigation is now rendered in the way we want!

Consistent HTML Emails for Outlook compatibility

If you’ve ever had to send out emails to a marketing list or what have you, no doubt you’ve lost hair, pulling it out, and lost enamel grinding your teeth thanks to the worlds worst browser provider – Microsoft.

You should always remember the following:

  • Use old fashioned tables, not divs, for laying stuff out
  • dont include css, always use style=”whatever”
  • set cellspacing and cellpadding to 0
  • border=”0″ on your images with links
  • Use tables within tables, make your main table have one <td> in a row
  • if you are using colspan read the previous point
  • style your <a> tags or they’ll be that stinking default blue
  • following worldwide recognised and established coding standards will break outlook
  • Padding will screw up Outlook

The last point is the main reason IE etc is the worst, I have no idea why 13 or more years down the line they still cant get this right!
Padding for some stupid reason gets added to the outside of our box model rather than the inside. The best way to get round this? Shove a div inside whichever <td> you are in. Padding that will still screw up, so use margin instead.

If anyone else has any tips to spare the innocent developers from the Wrath of Gates, feel free to drop a comment!

And now for a short rant:

MICROSOFT SORT YOUR SH*T OUT! WE’VE PUT UP WITH THIS LONG ENOUGH!
If you work for Microsoft, I hate you. Unless you convince whoever THE F*CK programs IE and Outlook to follow this link:

http://www.w3.org/TR/1999/REC-html401-19991224/

WRITTEN IN 1999 !!!!!!!!!!!!!!!!!