In symfony 1 it is possible to have different layouts for an application. But they all have to be put into the directory ‘myproject/apps/frontend/templates/’. But what if you want to use a layout from another location?

Assume you make a plugin with a specific layout, it would be nice to load the layout from the plugin directory, and not to have to copy the file to the global directory.

Here is how you can achieve this:

$template = $this->getContext()->getConfiguration()->getTemplateDir('MODULE', 'LAYOUT_FILE.php');
$this->setLayout($template . '/LAYOUT_FILE');

Let’s say you have the following:

my_project/
  plugins/
    my_plugin/
      modules/
        MyUser/
          actions/
            actions.php
          templates/
            indexSuccess.php
            MyUserLayout.php

The actions.php class could be something like this:

class MyUserAction extends sfActions {

  public function preExecute() {
    $template = $this->getContext()->getConfiguration()->getTemplateDir('MyUser', 'MyUserLayout.php');

    $this->setLayout($template . '/MyUserLayout');
  }

  public function executeIndex() {

  }
}

Have fun!

A lot of programmers seem to hate the layout part of the job. Well if you work in a big company you probably won’t do the two jobs, but in some cases, or when you work in a small company (ex 1-5 employees) you have to do them both (layout and programming). And for those guys, it isn’t always easy to have inspiration right away, well there is a solution.

Here are a few sites that have a huge portfolio with nice layout sites. You can grab the css in some cases, and that’s the interesting part of it.

Take a look at them.
cssmania
cssremix/
cssimport
designsnack
Anyone got a better idea to get inspiration? Feel free to add your way of working in the comments.

A lot of people don’t really know when to use what kind of elements to build up an HTML page therefore I would like to take the time to explain tables and div elements.
Tables are created to display data, they are built for it and that’s the only thing they are good for. To explain this we can take a look at the elements that a table can contain. Thead (again in tags <thead></thead>) contains the header row information of a table, tfoot contains the footer or bottom row of a table and tbody contains the body or data of a table. The easy thing about tables is that you can change them very easily without breaking out of the design, the height is fit automatically and data is displayed correctly the first time you show it. Off course with a little bit of CSS you get the layout just like you want it to. For more information on this you can take a look at my earlier post (http://www.devexp.eu/?p=50)

Now what are div tags actually and why are they better to create a layout?

Div tags are nothing but logical divisions within the content of a page, they are built up with the <div> tag and make it easy to manage and style your HTML page just as you like. The cool thing about div tags is that you can name them individually, so you can affect them with CSS. As you can see the div will react a lot better with layout and give you all the possibilities you need.

The problem with tables is how unreadable and unusable they make your code. When you use a table as base to start from and create different rows and columns you will probably create other tables inside that table to display some content. And maybe you’ll end up with 3, 4 or even more tables within each other. When you have a page like that, please do take the time to look at the code and you’ll notice right away that it became very unreadable. When trying to change 1 column or 1 row you’ll see how complicated it gets. This method was very often used 3-4 years ago in web development but div tags are now getting the bigger hand in this now.

Let’s create a little example to illustrate this issue. This example will create data displayed like this:

<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td colspan="2">This is a Title</td>
</tr>
<tr>
<td width="50%">aaa</td>
<td width="50%">bbb</td>
</tr>
<tr>
<td colspan="2">cccc</td>
</tr>
</tbody></table>

When we try to create this same view built up with div tags you will get:

<div style="width: 100%;">This is a Title</div>
<div style="width: 50%; float: left;">aaa</div>
<div style="width: 50%; float: right;">bbb</div>
<div style="width: 100%;">ccc</div>

I guess the example makes it pretty clear, you write less code and you are very flexible while using the div tags and it makes it very readable.

When creating pages, be sure to think about your design before starting and think of tables as data displayers, not as design tools. It will ask a lot of exercising when you’re not used to work with div tags, but after a while, you’ll see all their advantages. These tags and tables are built with a cause, tag for creating divisions in your page, tables for displaying data. Don’t mix them up.