During the building of a website or a web application, usually it could be required to render different views with different layouts. Think about, for example, the lists and details of news made in this chapter.
The layout is managed by the $layout property of Controller; main is the default value for this property.
Just set this property to change the layout file where to render the content of the view.
There are some important rules to write the value of the $layout property:
- A path alias (for example,
@app/views/layouts/main). - An absolute path (for example,
/main) is where the layout value starts with a slash. The actual layout file will be looked for under the application layout path, which defaults to@app/views/layouts. - A relative path (for example,
main) is where the actual layout file will be looked for under the context module's layout path, which defaults to theviews/layoutsdirectory under the module directory. - The Boolean value false is where no layout will be applied.
In this example, we will create a new action in NewsController that will change its layout depending on a value passed in the URL.
First, add a new action in NewsController called actionResponsiveContentTest:
public function actionResponsiveContentTest()
{
$responsive = Yii::$app->request->get('responsive', 0);
if($responsive)
{
$this->layout = 'responsive';
}
else
{
$this->layout = 'main';
}
return $this->render('responsiveContentTest', ['responsive' => $responsive]);
}In this action, we get a responsive parameter from the URL and set the $responsive variable to this value or 0 if not passed.
Then, set the $layout property of Controller to responsive or not according to the $responsive value, and pass this variable to view.
Then, create a new view in views/news/responsiveContentTest.php:
<?php if($responsive) { ?>
This layout contains responsive content
<?php } else { ?>
This layout does not contain responsive content
<?php } ?>This displays a different text block according to the $responsive value.
Finally, make a clone of main layout copying views/layouts/main.php in views/layouts/responsive.php and change in a new file views/layouts/responsive.php:
<div class="container"> in <div class="container-fluid" style="padding-top:60px">
This change makes the div container fluid (responsive), in other words, its content is resized with respect to percentage available in the horizontal space (instead the fixed value).
If we point to http://hostname/basic/web/index.php?r=news/responsive-content-test, we will see content in a fixed layout. Instead, if we pass the responsive parameter with value 1, http://hostname/basic/web/index.php?r=news/responsive-content-test&responsive=1, we will see the content in a full width screen.