![](-src=3D"/download/attachments/30711758/Beginners_Tutorial-RideList-view.png=)
Custom your homepage template
Let's modify the Resources/views/content/full/root_folder.htm=
l.twig adding a call to a subrequest to display th=
e list of all existing Rides with pagination:
{% extends "pagelayout.html.twig" %}
{% block content %}
<script src=3D"http://maps.google.com/maps/api/js?sensor=3Dfalse">=
;</script>
<h3 class=3D"center bottom-plus new-header">{{ ez_content_name(co=
ntent) }}</h3>
<div class=3D"col-xs-10 text-justified">
{{ render( controller( "AppBundle:Homepage:getAllRides" ) ) }}
{% endblock %}=20
For the moment, we use a simple render() Twig fu=
nction but when we talk about cache, we will use render_esi.
Create your sub controller to display list of Rides
Create your /src/AppBundle/Controller/HomepageController.php =
with the function getAllRidesAction:
<?php
namespace AppBundle\Controller;
use eZ\Publish\API\Repository\Values\Content\Query;
use eZ\Publish\API\Repository\Values\Content\Query\Criterion;
use eZ\Publish\Core\MVC\Symfony\Controller\Controller;
use eZ\Publish\API\Repository\Values\Content\Query\SortClause;
use eZ\Publish\Core\Pagination\Pagerfanta\ContentSearchAdapter;
use Pagerfanta\Pagerfanta;
use Symfony\Component\HttpFoundation\Request;
use eZ\Publish\API\Repository\Values\Content\Location;
use eZ\Publish\API\Repository\Values\Content\LocationQuery;
class HomepageController extends Controller
{
public function getAllRidesAction(Request $request)
{
$repository =3D $this->getRepository();
$locationService =3D $repository->getLocationService();
$contentService =3D $repository->getContentService();
$rootLocationId =3D $this->getConfigResolver()->getParameter(=
'content.tree_root.location_id');
$rootLocation =3D $locationService->loadLocation($rootLocationId=
);
$currentLocationId =3D 2;
$currentLocation =3D $locationService->loadLocation($currentLoca=
tionId);
$currentContent =3D $contentService->loadContentByContentInfo($c=
urrentLocation->contentInfo);
$query =3D new Query();
$query->query =3D new Criterion\LogicalAnd(
array(
new Criterion\Subtree($rootLocation->pathString),
new Criterion\Visibility(Criterion\Visibility::VISIBLE),
new Criterion\ContentTypeIdentifier(array('ride'))
)
);
$query->sortClauses =3D array(
new SortClause\DatePublished(Query::SORT_ASC)
);
$pager =3D new Pagerfanta(
new ContentSearchAdapter($query, $this->getRepository()->=
getSearchService())
);
//FIXME : get $limit value from a custom parameter
$limit =3D 10;
$pager->setMaxPerPage($limit);
$pager->setCurrentPage($request->get('page', 1));
return $this->render(
'content/view/list/rides.html.twig',
array(
'location' =3D> $currentLocation,
'content' =3D> $currentContent,
'pagerRides' =3D> $pager,
)
);
}
}=20
Create template to display the list of Rides
Create app/Resources/AppBundle/views/list/rides.html.twig template. You use a <table> to display the list of rides. The <=
;thead> of the <table> is in this Ride list template and each <=
tr> (line of the table) is in the line ride template.
So each time you will use the line Ride template, you have to remember t= he choice of using a <tr>.
{#Only display pagerfanta navigator if needed.#}
{% if pagerRides.haveToPaginate() %}
<nav class=3D"text-center">
<ul class=3D"pagination">
<div class=3D"pagerfanta">
{{ pagerfanta( pagerRides, 'twitter_bootstrap_translated', {'routeN=
ame': location } ) }}
</div>
</ul>
</nav>
{% endif %}
<div class=3D"row regular-content-size">
<div class=3D"col-md-8 col-md-offset-2 box-style">
<h3 class=3D"center bottom-plus new-header">{{ 'List of all R=
ides' | trans }}</h3>
{# Loop over the page results #}
{% for ride in pagerRides %}
{% if loop.first %}
<table class=3D"table table-hover">
<thead>
<tr class=3D"table-header">
<th></th>
<th>Name</th>
<th>Starting Point</th>
<th>Ending Point</th>
<th>Length</th>
<th>Level</th>
</tr>
</thead>
<tbody>
{% endif %}
{{ render( controller( 'ez_content:viewLocation', { 'locationId=
': ride.versionInfo.contentInfo.mainLocationId, 'viewType': 'line' } )) }}
{% if loop.last %}
</tbody>
</table>
{% endif %}
{% endfor %}
</div>
</div>
{#Only display pagerfanta navigator if needed.#}
{% if pagerRides.haveToPaginate() %}
<nav class=3D"text-center">
<ul class=3D"pagination">
<div class=3D"pagerfanta">
{{ pagerfanta( pagerRides, 'twitter_bootstrap_translated', =
{'routeName': location } ) }}
</div>
</ul>
</nav>
{% endif %}=20
The next step is to create the override rule to use a dedicated template= for the view line of Rides.
To do so, you need to configure your bundle to inject override configura= tion.
Use a custom template to display view line of a R= ide
You add the rule for the line_ride template to be used in your app=
/config/ezplatform.yml file.
system:
site_group:
content_view:
line:
line_ride:
template: "content/view/line/ride.html.twig"
match:
Identifier\ContentType: "ride"=20
Create your app/Resources/AppBundle/views/content/view/line/ride.h=
tml.twig template. Remember, it's only one line of a table, so =
you will find a <tr> tag with some <td> tags.
<tr>
<td>
{{ ez_render_field( content, 'image', { parameters: { 'alias': 'sma=
ll' }} ) }}
</td>
<td>
<strong>
<a href=3D"{{ path( "ez_urlalias", { 'locationId': content.c=
ontentInfo.mainLocationId } ) }}"
target=3D"_self">
{{ ez_content_name( content ) }}
</a>
</strong>
<p class=3D"pre-small">
{{ ez_render_field( content, 'author') }}
</p>
</td>
<td>
{{ ez_render_field(content, 'starting_point', {'parameters': {'widt=
h': '100%', 'height': '100px', 'showMap': true, 'showInfo': true }}
) }}
</td>
<td>
{{ ez_render_field(content, 'ending_point', {'parameters': {'width'=
: '100%', 'height': '100px', 'showMap': true, 'showInfo': true }}
) }}
</td>
<td>
<p>{{ ez_render_field( content, 'length' ) }} Km</p>
</td>
<td>
<p>{{ ez_render_field( content, 'level' ) }}</p>
</td>
</tr>=20
=E2=AC=85 Previous: Step 1 - Display content of a Ride
Next : Congrats! =E2=9E=A1
- =20