Now let's inject and display all Points of interest within the view.
- =20
- 1 Creating the Ride view=20
- =20
- 1.1.1 What is in this template ? =20
- 1.2 Add a new parameter to your over= ride rule =20
- 1.3 Check the Ride full view=20
- =20
- 1.3.1 Preview in the Admin =20
- 1.3.2 Go to the Ride page =20
=20
- =20
=20
- 2 Points Of Interest=20
- =20
- 2.1 Create the Point Of Intere= st (POI) Content Type =20
- 2.2 Edit the Ride Content Type =20
=20
- 3 Ride view improvements=20
- =20
- 3.1 Display the list of POI =20
- 3.2 Create your Point of Interest lin= e view =20
- 3.3 Integrate the Points of I=
nterest in the Ride view=20
- =20
- 3.3.1 Create the RideController =20
- 3.3.2 Add the Point Of Interest = in the Ride full view =20
=20
=20
Creating the Rid= e view
Create a Twig template app/Resources/views/full/ride.html.twig and paste= into it the following HTML and Twig tags:
{% extends "pagelayout.html.twig" %}
{% block content %}
<section>
<div class=3D"container">
<div class=3D"row regular-content-size">
<div class=3D"col-xs-10 col-xs-offset-1 row-padding">
<div class=3D"col-xs-12">
<div class=3D"col-xs-1 text-left">
<h2>Ride:</h2>
</div>
<div class=3D"col-xs-11 text-left">
<h2 class=3D"extra-padding-left">{{ ez_content_name( co=
ntent ) }}</h2>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div id=3D"map-container">
{{ ez_render_field(content, 'starting_point', {'parameters': { 'heigh=
t': '330px', 'showMap': true, 'showInfo': false }}
) }}
</div>
</section>
<section>
<div class=3D"container">
<div class=3D"row regular-content-size">
<div class=3D"col-xs-10 col-xs-offset-1 padding-box">
<div class=3D"col-xs-2">
<div class=3D"box-ride">
<h3 class=3D"special-number">{{ ez_render_field( conten=
t, 'length') }} Km</h3>
<p class=3D"pre-small special-number special-number-margin=
"><strong>{{ 'Level' }}</strong></p>
</div>
</div>
<div class=3D"col-xs-10">
<div class=3D"col-xs-5">
<p>Created by: {{ ez_field_value( content, 'author') }}=
</p>
<p>Start: {{ ez_field_value(content, 'starting_point') =
}}
</p>
<p>End: {{ ez_field_value(content, 'ending_point') }}&l=
t;/p>
</div>
</div>
</div>
<div class=3D"col-xs-10 col-xs-offset-1 padding-box">
<div class=3D"col-xs-10">
<div class=3D"col-xs-2 text-right">
<p>Description:</p>
</div>
<div class=3D"col-xs-10 text-justify">
{{ ez_render_field( content, 'description') }}
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock %} =20
What is in thi= s template ?
You reuse your pagelayout.html.twig template, to have the menu, footer a= nd CSS.
The Ride template is in a block and you use the Twig helpers to render t= he content of a Ride
See the Twig Fun= ctions Reference for more information on Twig helpers
The Starting Point and Ending Point Google Maps rendering is not yet don= e. You will use the M= apLocation Field Type to render this Content Type.
A= dd a new parameter to your override rule
We still haven't set any matching rule for our new Content Type Ride, so= let's add one that will render a specific template for a Ride Content Type= .
default:
content_view:
full:
full_ride:
template: "full/ride.html.twig"
match:
Identifier\ContentType: "ride"=20
Check the Ride = full view
Preview in the Adm= in
You can use the Preview while Editing in the Admin to preview your conte= nt rendered in the full view.
Go to the Ride page<= /h3>
You can also go the the URL of the content. It is a URL like this one
The infos=
in the URL are http://<yourhost>/view/content/<ContentId>/<=
language>/full/true/<LocationId>
You will find the Content ID and the Location ID of your Ride in the Adm= in, under the Details tab.
Points Of Interest<= /h1>
Go to Admin Panel > Content Types, and under the "Content" grou= p, create the Point Of Interest Content Type.
Create the Point Of Interest (POI) Content Type
A geographical location rides go through. Each ride may be related to as= many points of interest as needed.
Name: Point of interest<=
br>Identifier: point_of_interest
Content name p=
attern: <name>
Then create all fields with the following information:
- Name: identifier name; field typ= e textLine (Required /&nbs= p;Searchable / Translatable)
- Description: identifier description; field type Rich Text (Searchab= le / Translatable)
- Photo: identifier photo; field t= ype Image (Required)
- Photo Legend: identifier legend;= field type Rich Text (Searchable / Translatable)
- Place: identifier place; field&n= bsp;type MapLocation (R= equired / Searchable)
The content name pattern defines how the name and URL p= art of Content items of this type will be built. It may include static stri= ngs, as well as references to field definitions, using their identifier.
The value of the fields referenced in the patt= ern will be used to build the name. Most Field Types are able to render a t= extual representation of their value, but be aware that it is not implement= ed for some of them (Se= lection Field Type, = Relation Field Type, RelationList Field Type).
Now, validate the Content Type creation form. It will save the Point Of =
Interest Content Type.
Create some Points Of Interest in the Content tre=
e.
Note that you will need pictures (for the Photo, the image Field) to rep= resent them.
Edit the Ride= Content Type
Now edit the Ride in order to add a Content Relation Multiple betw= een the two Content Types.
Adding a relation between the Rid=
e and the Points of Interest using the Content Relation Multiple
Then link some Points Of Interests to a Ride in the Admin interface.
Ride view impro= vements
Display the list= of POI
By default, there are only 4 varia=
bles in a view: noLayout, viewbaseLayout, c=
ontent and location.
It is possible to inject whatever variable you want in a specific view.<= /p>
You will find more info here: Cu= stom controllers and View provider configuration.<= /p>
Cr= eate your Point of Interest line view
Now, we need to create the line view for Point of Interest.
Declare a new override rule into your app/config/ezplatform.yml:
system:
default:
content_view:
#full views here
line:
line_point_of_interest:
template: 'line/point_of_interest.html.twig'
match:
Identifier\ContentType: ['point_of_interest']=20
Create your template for the line view of a Point of Interest app/=
Resources/views/line/point_of_interest.html.twig:
<section>
<div class=3D"col-xs-4 photos-box">
<a href=3D"#bikeModal{{ content.id }}" class=3D"portfolio-link" data-t=
oggle=3D"modal">
<div class=3D"caption">
<div class=3D"caption-content">
<i class=3D"fa fa-search-plus fa-3x"></i>
</div>
</div>
{{ ez_render_field( content, 'photo', { parameters: { 'alias': 'small'}=
,
attr: { 'class': 'img-responsive img-rounded', 'alt':'' }}) }}
{#<img src=3D"images/lyon.png" class=3D"img-responsive img-rounded" =
alt=3D"">#}
</a>
</div>
{# MODAL #}
<div class=3D"bike-modal modal fade" id=3D"bikeModal{{ content.id }}" ta=
bindex=3D"-1" role=3D"dialog" aria-hidden=3D"true">
<div class=3D"modal-content">
<div class=3D"close-modal" data-dismiss=3D"modal">
<div class=3D"lr">
<div class=3D"rl">
</div>
</div>
</div>
<div class=3D"container">
<div class=3D"row">
<div class=3D"col-xs-8 col-xs-offset-2">
<div class=3D"modal-body text-center">
<h2>Photo: {{ ez_content_name( content ) }}</h2>
<hr class=3D"featurette-divider">
{{ ez_render_field( content, 'photo', { parameters: { 'alias': =
'large'},
attr: { 'class': 'img-responsive img-rounded' }}) }}
{#<img src=3D"images/lyon.png" class=3D"img-responsive img-c=
entered img-rounded" alt=3D"">#}
{{ ez_render_field( content, 'description', { attr: { 'class': =
'padding-box text-justify' }}) }}
</div>
</div>
</div>
</div>
</div>
</div>
</section>=20
Integrate the Points of Interest in the Ride view
Create the R= ideController
In the AppBundle directory, create a PHP file : /src/AppBundle/Con=
troller/RideController.php
<?php
namespace AppBundle\Controller;
use eZ\Publish\API\Repository\Values\Content\Query;
use eZ\Publish\API\Repository\Values\Content\Query\Criterion;
use eZ\Bundle\EzPublishCoreBundle\Controller;
use eZ\Publish\API\Repository\Values\Content\Query\SortClause;
use eZ\Publish\Core\Repository\Values\Content\Location;
class RideController extends Controller
{
/**
* Action used to display a ride
* - Adds the list of all related Points of interest to the response.
*
* @param Location $location
* @param $viewType
* @param bool $layout
* @param array $params
* @return mixed
*/
public function viewRideWithPOIAction(Location $location, $viewType, $lay=
out =3D false, array $params =3D array())
{
$repository =3D $this->getRepository();
$contentService =3D $repository->getContentService();
$currentLocation =3D $location;
$currentContent =3D $contentService->loadContentByContentInfo($curre=
ntLocation->getContentInfo());
$pointOfInterestListId =3D $currentContent->getFieldValue('pois'); /=
/points of interest
$pointOfInterestList =3D array();
foreach ($pointOfInterestListId->destinationContentIds as $pointId)
{
$pointOfInterestList[$pointId] =3D $contentService->loadContent($p=
ointId);
}
return $this->get('ez_content')->viewLocation(
$location->id,
$viewType,
$layout,
array('pointOfInterestList' =3D> $pointOfInterestList) + $params
);
}
}=20
Update the /app/config/ezplatform.yml file to mention the R=
ideController
default:
content_view:
full:
full_ride:
template: "full/ride.html.twig"
controller: "AppBundle:Ride:viewRideWithPOI"
match:
Identifier\ContentType: "ride"=20
Add the Point Of Interest in the Ride full view
Add the following lines (at the end of the Ride full view file, before t= he closing tag
{% endblock %}
<section>
<div class=3D"col-xs-4 photos-box">
<a href=3D"#bikeModal{{ content.id }}" class=3D"portfolio-link" data-t=
oggle=3D"modal">
<div class=3D"caption">
<div class=3D"caption-content">
<i class=3D"fa fa-search-plus fa-3x"></i>
</div>
</div>
{{ ez_render_field( content, 'photo', { parameters: { 'alias': 'small'}=
,
attr: { 'class': 'img-responsive img-rounded', 'alt':'' }}) }}
{#<img src=3D"images/lyon.png" class=3D"img-responsive img-rounded" =
alt=3D"">#}
</a>
</div>
{# MODAL #}
<div class=3D"bike-modal modal fade" id=3D"bikeModal{{ content.id }}" ta=
bindex=3D"-1" role=3D"dialog" aria-hidden=3D"true">
<div class=3D"modal-content">
<div class=3D"close-modal" data-dismiss=3D"modal">
<div class=3D"lr">
<div class=3D"rl">
</div>
</div>
</div>
<div class=3D"container">
<div class=3D"row">
<div class=3D"col-xs-8 col-xs-offset-2">
<div class=3D"modal-body text-center">
<h2>Photo: {{ ez_content_name( content ) }}</h2>
<hr class=3D"featurette-divider">
{{ ez_render_field( content, 'photo', { parameters: { 'alias': =
'large'},
attr: { 'class': 'img-responsive img-rounded' }}) }}
{#<img src=3D"images/lyon.png" class=3D"img-responsive img-c=
entered img-rounded" alt=3D"">#}
{{ ez_render_field( content, 'description', { attr: { 'class': =
'padding-box text-justify' }}) }}
</div>
</div>
</div>
</div>
</div>
</div>
</section>=20
Then check the Ride page again to see the Points of Interest !
Remember: http://<yourhost>/view/content/<ContentId>/<lan= guage>/full/true/<LocationId>
=E2=AC=85&nb= sp;Previous: W= orking on the Ride introduction page
Next: Step= 2 - Display the list of Rides on the homepage =E2=9E=A1
- =20