You can find all files used and modified in this step on GitHub.
In this step you'll prepare and configure your front page, together with= its layout and templates.
Create Lan= ding Page layout
If at this point you view the website from the front end, you will see t= hat the home page looks quite unfinished. (You can, however, still use the = menu and look around the existing content in the website.)
At any point in the tutorial if you don't see the results of your last a= ctions when viewing the page, try clearing the cache and regenerating asset= s:
php app/con=
sole cache:clear
php app/console assets:install
Log in to the app's back end. Through the Platform U= I, go to the Home Content item, which is the first page that is shown to th= e visitor. There you can check what Content Type it belongs to: it is a Lan= ding Page.
The page contains only one simple Tag Block and is displayed without any= template. Now, switch to the Studio UI by going to the Page mode and click= Edit. You can see here that the Home Landing Page has = only one zone wit the block.
This will not do for our plans, because as you can see in the proposed s= creenshot, we need a layout with two zones: a main column and a narrower si= debar. As only one default one-zone layout is provided for starters with eZ= Enterprise, we will need to create a new layout.
It is not possible to change the layout of a Landing Page o= nce it has been published. This means that after preparing our new l= ayout we will have to create a completely new Landing Page, replace the cur= rent Home with it and scrap the old one.
Preparing a new layout requires three things:
- entry in configuration
- thumbnail
- template =
Let's first create a new file that will house our layout co= nfiguration (and the configs for any other layouts you may want to create i= n future):
ez_systems_landing_page_field_type:
layouts:
sidebar:
identifier: sidebar
name: Right sidebar
description: Main section with sidebar on the right
thumbnail: assets/images/layouts/sidebar.png
template: layouts/sidebar.html.twig
zones:
first:
name: First zone
second:
name: Second zone=20
Creating the file is not enough, you also need to tell the app to read a=
nd use it. Add the following line to the config.yml file =
located in app/config, at the end of the&nbs=
p;imports block:
- { resource: layouts.yml }=20
You could alternatively place the whole layouts config=
uration block directly inside ezplatform.yml. However, for cla=
rity we'll keep the configs in separate files in this tutorial=
.
Let's take a look at the most important things that this configuration d= efines (for a detailed description of creating a Landing Page = layout, see Cre= ating Landing Page layouts (Enterprise)):
sidebar is the key of the layout, but it is the =
name that is displayed in the interface when the user is selecting a=
layout. The thumbnail links to an image file with an ico=
n of the layout. It will also be shown when creating a new Landing Page, as=
a visual hint next to the name. Use the web/asse=
ts/images/layouts/ folder.
The template points to the twig file where in the next=
step we will create the template for this layout. This is the most importa=
nt part of the configuration, as the templates are what distinguishes all l=
ayouts from one another.
Create = Landing Page templates
Our configuration points to sidebar.html.twig as the templa=
te for the layout. Let's create it and fill it in. Go to app/Resource=
s/views. You can already see here some templates that define the loo=
ks of the existing parts of the website. Create a layouts=
folder and the following file inside it:
<div data-studio-zones-container>
<main class=3D"landing-page__zone landing-page__zone--{{ zones[0].id=
}} landing-page__zone--left col-xs-8" data-studio-zone=3D"{{ zones[0].id }=
}">
{% if zones[0].blocks %}
{% for block in zones[0].blocks %}
<div class=3D"landing-page__block block_{{ block.type }}=
">
{{ render_esi(controller('ez_block:renderBlockAction', =
{
'contentId': contentInfo.id,
'blockId': block.id,
'versionNo': versionInfo.versionNo
})) }}
</div>
{% endfor %}
{% endif %}
</main>
<aside class=3D"landing-page__zone landing-page__zone--{{ zones[1].i=
d }} landing-page__zone--left col-xs-4" data-studio-zone=3D"{{ zones[1].id =
}}">
{% if zones[1].blocks %}
{% for block in zones[1].blocks %}
<div class=3D"landing-page__block block_{{ block.type }}=
">
{{ render_esi(controller('ez_block:renderBlockAction', =
{
'contentId': contentInfo.id,
'blockId': block.id,
'versionNo': versionInfo.versionNo
})) }}
</div>
{% endfor %}
{% endif %}
</aside>
</div>=20
The template above creates two columns and defines their widths. Each co= lumn is at the same time a zone, and each zone renders the blocks that it c= ontains.
In more complex setups with multiple different layouts you might want to=
consider separating the rendering of zones into a separate zone.html=
.twig template to avoid repeating the same code in every layout.
Layout templates can be configured and adapted in any way you like, like=
all other templates in eZ Platform. However, for a layout to work together=
with a Landing Page, the zone must have the d=
ata-studio-zone attribute (line 2 and 15), and the zone container&nb=
sp;requires the data-studio-zones-container attribute (line 1) to allow dropping Content into zones.
With these three elements: configuration, thumbnail and template, your new layout is ready to use.
Create a Landin= g Page
Now you can create your Landing Page with the new layout to see the effe= cts of your work. Do it as a child of the Home Content item (that is, go to= Home in the Page mode, click Create and select a Landing Page) =E2=80=93 w= e will momentarily replace Home with this new Landing Page. Ch= oose the new layout called "Right sidebar" and call the new page "Front Pag= e". The empty zones as you have defined them will be visible in the = editor.
If the new layout is not available when creating a new Landing Page, yphp app/console cache:clear) a=
nd/or reload the app.
Once you Publish, you will notice that the new, empty Landing Page unfor=
tunately hasn't changed and still looks awful. This is because the looks of=
a Landing Page are actually defined in two separate templates files, and w=
e have only prepared one of those. Our sidebar.html.twig =
file defines that way in which zones are organized and governs the displayi=
ng of zone contents. But one more general template file is needed that will=
be used for every Landing Page, regardless of its layout. Because we haven=
't created it yet, the page is instead displayed using default settings.
Let's correct this by creating a landing_page.html.twig template. In our case, the file will be rather short:
{% extends 'pagelayout.html.twig' %}
{% block content %}
<div class=3D"col-md-12">
{{ ez_render_field(content, 'page') }}
</div>
{% endblock %}=20
As you can see, this file, placed in the views/full folder,=
simply renders the page content. If there is any additional content o=
r formatting you would like to apply to every Landing Page, it should be pl=
aced in this template.
Now you need to tell the app to use this template whenever it tries to r=
ender a Landing Page. Edit the views.yml file in
landing_page:
template: "full/landing_page.html.twig"
match:
Identifier\ContentType: "landing_page"=20
You can place this block anywhere before or after other view configurati=
on blocks, but remember that the indentations must match and the block must=
be placed under the full key.
The views.yml file already contains a handful of view confi=
g blocks, and the views/full folder has templates that co=
rrespond to them. They are used to render the existing content we have in o=
ur website - articles, dog breed information and tips. In a clean installat=
ion these configurations and the folder would not exist and you would have =
to build all view templates from scratch.
After adding this template you can check your new Landing Page. The part between menu and footer should be empty, which is the desired= result =E2=80=93 it should be empty, because we have not added= any actual content to it.
Until we swap the Front Page with the current Home, you can access the n=
ew page by adding /Front-Page to the URI address.
Replacing the front page
This part only works from v1.7.0 onward. If you are using a=
n earlier version, skip this last section and as a workaround in the next s=
teps access your new Front Page directly by its URI, for example: tut=
orial.lh/Front-Page.
Now for the last part in this step: let's replace the curre= nt Home with your new Front Page.
To swap the two Content items, go to Home in Platform UI (i= f you are in the Studio UI, switch by clicking Content at the top). Open th= e Locations tab, click Select Content Item under Content Location Swap and = select the newly created Front Page. The two pages should now be swapped, w= ith the new Landing Page becoming the first item in the Content tree. It wi= ll now be the first page that visitors to your website see. We will momenta= rily start filling it up with content.
You can now delete the previous Home page, as you don't nee=
d it anymore. Navigate to it in the Content mode and click Send to Trash in=
the menu on the right.
=E2=AC=85 Previous: Step 1 - Getting your starter website
Next: Step 3 - Using existing blocks =E2=9E=A1
- =20