The Cookbook»1.2 Collection»The Manual»Developing with CakePHP»Views»Layouts

{597} - 3.9.2 Layouts

A layout contains presentational code that wraps around a view. Anything you want to see in all of your views should be placed in a layout.

Layout files should be placed in /app/views/layouts. CakePHP's default layout can be overridden by creating a new default layout at /app/views/layouts/default.ctp. Once a new default layout has been created, controller-rendered view code is placed inside of the default layout when the page is rendered.

When you create a layout, you need to tell CakePHP where to place your the code for your views. To do so, make sure your layout includes a place for $content_for_layout (and optionally, $title_for_layout). Here's an example of what a default layout might look like: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo $title_for_layout?></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>

<!-- If you'd like some sort of menu to 
show up on all of your views, include it here -->
<div id="header">
    <div id="menu">...</div>
</div>

<!-- Here's where I want my views to be displayed -->
<?php echo $content_for_layout ?>

<!-- Add a footer to each displayed page -->
<div id="footer">...</div>

</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title><?php echo $title_for_layout?></title>
  6. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  7. </head>
  8. <body>
  9. <!-- If you'd like some sort of menu to
  10. show up on all of your views, include it here -->
  11. <div id="header">
  12. <div id="menu">...</div>
  13. </div>
  14. <!-- Here's where I want my views to be displayed -->
  15. <?php echo $content_for_layout ?>
  16.  
  17. <!-- Add a footer to each displayed page -->
  18. <div id="footer">...</div>
  19. </body>
  20. </html>

To set the title for the layout, it's easiest to do so in the controller, using the $pageTitle controller variable. 

<?php

class UsersController extends AppController {
    function viewActive() {
        $this->pageTitle = 'View Active Users';
    }
}
?>
  1. <?php
  2. class UsersController extends AppController {
  3. function viewActive() {
  4. $this->pageTitle = 'View Active Users';
  5. }
  6. }
  7. ?>

You can create as many layouts as you wish: just place them in the app/views/layouts directory, and switch between them inside of your controller actions using the controller's $layout variable, or setLayout() function.

For example, if a section of my site included a smaller ad banner space, I might create a new layout with the smaller advertising space and specify it as the layout for all controller's actions using something like:

var $layout = 'default_small_ad'; 

<?php
class UsersController extends AppController {
    function viewActive() {
        $this->pageTitle = 'View Active Users';
        $this->layout = 'default_small_ad';
    }

    function viewImage() {
        $this->layout = 'image';
        //output user image
    }
}
?>
  1. <?php
  2. class UsersController extends AppController {
  3. function viewActive() {
  4. $this->pageTitle = 'View Active Users';
  5. $this->layout = 'default_small_ad';
  6. }
  7. function viewImage() {
  8. $this->layout = 'image';
  9. //output user image
  10. }
  11. }
  12. ?>

CakePHP features two core layouts (besides CakePHP’s default layout) you can use in your own application: ‘ajax’ and ‘flash’. The Ajax layout is handy for crafting Ajax responses - it’s an empty layout (most ajax calls only require a bit of markup in return, rather than a fully-rendered interface). The flash layout is used for messages shown by the controllers flash() method.

Three other layouts–xml, js, and rss–exist in the core for a quick and easy way to serve up content that isn’t text/html.

{2953} - 3.9.2 Layouts

A layout contains presentation code that wraps around a view. Anything you want to see in all of your views should be placed in a layout.

Layout files should be placed in /app/views/layouts. CakePHP's default layout can be overridden by creating a new default layout at /app/views/layouts/default.ctp. Once a new default layout has been created, controller-rendered view code is placed inside of the default layout when the page is rendered.

When you create a layout, you need to tell CakePHP where to place the code for your views. To do so, make sure your layout includes a place for $content_for_layout (and optionally, $title_for_layout). Here's an example of what a default layout might look like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo $title_for_layout?></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- Include external files and scripts here (See HTML helper for more info.) -->
<?php echo $scripts_for_layout ?>
</head>
<body>

<!-- If you'd like some sort of menu to 
show up on all of your views, include it here -->
<div id="header">
    <div id="menu">...</div>
</div>

<!-- Here's where I want my views to be displayed -->
<?php echo $content_for_layout ?>

<!-- Add a footer to each displayed page -->
<div id="footer">...</div>

</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title><?php echo $title_for_layout?></title>
  6. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  7. <!-- Include external files and scripts here (See HTML helper for more info.) -->
  8. <?php echo $scripts_for_layout ?>
  9. </head>
  10. <body>
  11. <!-- If you'd like some sort of menu to
  12. show up on all of your views, include it here -->
  13. <div id="header">
  14. <div id="menu">...</div>
  15. </div>
  16. <!-- Here's where I want my views to be displayed -->
  17. <?php echo $content_for_layout ?>
  18.  
  19. <!-- Add a footer to each displayed page -->
  20. <div id="footer">...</div>
  21. </body>
  22. </html>

$scripts_for_layout contains any external files and scripts included with the built-in HTML helper. Useful for including javascript and CSS files from views.

When using $html->css() or $javascript->link() in view files, specify 'false' for the 'in-line' argument to place the html source in $scripts_for_layout. (See API for more details on usage).

$content_for_layout contains the view. This is where the view code will be placed.

$title_for_layout contains the page title.

To set the title for the layout, it's easiest to do so in the controller, using the $pageTitle controller variable.

<?php

class UsersController extends AppController {
    function viewActive() {
        $this->pageTitle = 'View Active Users';
    }
}
?>
  1. <?php
  2. class UsersController extends AppController {
  3. function viewActive() {
  4. $this->pageTitle = 'View Active Users';
  5. }
  6. }
  7. ?>

You can create as many layouts as you wish: just place them in the app/views/layouts directory, and switch between them inside of your controller actions using the controller's $layout variable, or setLayout() function.

For example, if a section of my site included a smaller ad banner space, I might create a new layout with the smaller advertising space and specify it as the layout for all controller's actions using something like:

var $layout = 'default_small_ad';

<?php
class UsersController extends AppController {
    function viewActive() {
        $this->pageTitle = 'View Active Users';
        $this->layout = 'default_small_ad';
    }

    function viewImage() {
        $this->layout = 'image';
        //output user image
    }
}
?>
  1. <?php
  2. class UsersController extends AppController {
  3. function viewActive() {
  4. $this->pageTitle = 'View Active Users';
  5. $this->layout = 'default_small_ad';
  6. }
  7. function viewImage() {
  8. $this->layout = 'image';
  9. //output user image
  10. }
  11. }
  12. ?>

CakePHP features two core layouts (besides CakePHP’s default layout) you can use in your own application: ‘ajax’ and ‘flash’. The Ajax layout is handy for crafting Ajax responses - it’s an empty layout (most ajax calls only require a bit of markup in return, rather than a fully-rendered interface). The flash layout is used for messages shown by the controllers flash() method.

Three other layouts–xml, js, and rss–exist in the core for a quick and easy way to serve up content that isn’t text/html.

Differences

Lines: 1-21Lines: 1-17
 <title>Layouts</title> <title>Layouts</title>
-<p>
A layout contains presentational code that wraps around a view. Anything you want to see in all of your views should be placed in a layout.
</p>
<p>
Layout files should be placed in /app/views/layouts. CakePHP's default layout can be overridden by creating a new default layout at /app/views/layouts/default.ctp. Once a new default layout has been created, controller-rendered view code is placed inside of the default layout when the page is rendered.
</p>
<p>
When you create a layout, you need to tell CakePHP where to place your the code for your views. To do so, make sure your layout includes a place for $content_for_layout (and optionally, $title_for_layout). Here's an example of what a default layout might look like:
</p>		 +<p>A layout contains presentation code that wraps around a view. Anything you want to see in all of your views should be placed in a layout.</p>
<p>Layout files should be placed in /app/views/layouts. CakePHP's default layout can be overridden by creating a new default layout at /app/views/layouts/default.ctp. Once a new default layout has been created, controller-rendered view code is placed inside of the default layout when the page is rendered.</p>
<p>When you create a layout, you need to tell CakePHP where to place the code for your views. To do so, make sure your layout includes a place for $content_for_layout (and optionally, $title_for_layout). Here's an example of what a default layout might look like:</p>
 <pre> <pre>
 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
 &lt;head&gt; &lt;head&gt;
 &lt;title&gt;&lt;?php echo $title_for_layout?&gt;&lt;/title&gt; &lt;title&gt;&lt;?php echo $title_for_layout?&gt;&lt;/title&gt;
 &lt;link rel="shortcut icon" href="favicon.ico" type="image/x-icon"&gt; &lt;link rel="shortcut icon" href="favicon.ico" type="image/x-icon"&gt;
 +<!-- Include external files and scripts here (See HTML helper for more info.) -->
 +<?php echo $scripts_for_layout ?>
 &lt;/head&gt; &lt;/head&gt;
 &lt;body&gt; &lt;body&gt;
 &lt;!-- If you'd like some sort of menu to  &lt;!-- If you'd like some sort of menu to
Lines: 32-42Lines: 28-40
 &lt;/body&gt; &lt;/body&gt;
 &lt;/html&gt; &lt;/html&gt;
 </pre> </pre>
-<p>
To set the title for the layout, it's easiest to do so in the controller, using the $pageTitle controller variable.
</p>		 +<p><code>$scripts_for_layout</code> contains any external files and scripts included with the built-in HTML helper. Useful for including javascript and CSS files from views.</p>
<p class="note">When using <code>$html->css()</code> or <code>$javascript->link()</code> in view files, specify 'false' for the 'in-line' argument to place the html source in <code>$scripts_for_layout</code>. (See API for more details on usage).</p>
<p><code>$content_for_layout</code> contains the view. This is where the view code will be placed.</p>
<p><code>$title_for_layout</code> contains the page title.</p>
<p>To set the title for the layout, it's easiest to do so in the controller, using the $pageTitle controller variable.</p>
 <pre> <pre>
 &lt;?php &lt;?php
 class UsersController extends AppController { class UsersController extends AppController {
Lines: 45-61Lines: 43-53
  }  }
 } }
 ?&gt; ?&gt;
 </pre> </pre>
-<p>
You can create as many layouts as you wish: just place them in the app/views/layouts directory, and switch between them inside of your controller actions using the controller's $layout variable, or setLayout() function.
</p>
<p>
For example, if a section of my site included a smaller ad banner space, I might create a new layout with the smaller advertising space and specify it as the layout for all controller's actions using something like:
</p>
<p>
var $layout = 'default_small_ad';
</p>		 +<p>You can create as many layouts as you wish: just place them in the app/views/layouts directory, and switch between them inside of your controller actions using the controller's $layout variable, or setLayout() function.</p>
<p>For example, if a section of my site included a smaller ad banner space, I might create a new layout with the smaller advertising space and specify it as the layout for all controller's actions using something like:</p>
<p>var $layout = 'default_small_ad';</p>
 <pre> <pre>
 &lt;?php &lt;?php
 class UsersController extends AppController { class UsersController extends AppController {
  function viewActive() {  function viewActive() {
Lines: 69-78Lines: 61-66
  }  }
 } }
 ?&gt; ?&gt;
 </pre> </pre>
-<p>
CakePHP features two core layouts (besides CakePHP’s default layout) you can use in your own application: ‘ajax’ and ‘flash’. The Ajax layout is handy for crafting Ajax responses - it’s an empty layout (most ajax calls only require a bit of markup in return, rather than a fully-rendered interface). The flash layout is used for messages shown by the controllers flash() method.
</p>
<p>
Three other layouts–xml, js, and rss–exist in the core for a quick and easy way to serve up content that isn’t text/html.
</p>		 +<p>CakePHP features two core layouts (besides CakePHP’s default layout) you can use in your own application: ‘ajax’ and ‘flash’. The Ajax layout is handy for crafting Ajax responses - it’s an empty layout (most ajax calls only require a bit of markup in return, rather than a fully-rendered interface). The flash layout is used for messages shown by the controllers flash() method.</p>
<p>Three other layouts–xml, js, and rss–exist in the core for a quick and easy way to serve up content that isn’t text/html.</p>