![](-src=3D"/download/attachments/30711760/Beginners_Tutorial-Ride-view.png?ver=)
We will customize the Google map later, now let's inject and display all= Points of interest within the view.
- =20
- 1 Points Of Interest=20
- =20
- 1.1 Create the Point Of Intere= st (POI) Content Type =20
- 1.2 Edit the Ride Content Type =20
=20
- 2 Ride view=20
- =20
- 2.1 Display the list of POI=20
- =20
- 2.1.1 Add a new parameter to your ov= erride rule =20
=20
- 2.2 Create your Point of interest lin= e view =20
=20
- 2.1 Display the list of POI=20
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
Identifier:=
point_of_interest
Content name pattern: <name>&n=
bsp;
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 (Required= / Searchable / Trans= latable)
- Photo: identifier image; field&n= bsp;type Image (Required / Searchable)
- Legend: identifier legend; field= type Rich Text (Required&= nbsp;/ 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 pattern will be used to build = the name. Most Field Types are able to render a textual representation of t= heir value, but be aware that it is not implemented for some of them (Selection FieldType, <= a href=3D"/display/TECHDOC/The+Relation+Field+Type">Relation FieldType,= RelationList Fiel= dType).
Create some Points Of Interest in the Content tree. Note that you will n= eed pictures (for the Photo, the image Field) to represent these Points Of = Interest.
Edit the Ride= Content Type
Now, validate and edit the Ride in order to add a Relation (multiple) be= tween the two Content Types.
Then link some Points Of Interests to a Ride in the Admin interface.
Ride view
Display the list= of POI
By default, there are only 4 varia= bles in a view: noLayout, viewbaseLayout, content and location.
It is possible to inject whatever variable you want in a specific view.<= /p>
You will find more info here: How to use a c=
ustom controller to display a content item or location and
A= dd a new parameter to your override rule
We have already set an override rule for ContentType Ride and we will ne= ed to modify it to use our own action injecting the list of Point of intere= st content.
default:
content_view:
full:
full_ride:
template: "content/view/full/ride.html.twig"
match:
Identifier\ContentType: "ride"=20
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:
site_group:
default:
content_view: =20
line:
line_point_of_interest:
template: 'content/view/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.htm.twig:
<div class=3D"col-xs-4 photos-box">
<a href=3D"#bikeModal{{ content.id }}" class=3D"portfolio-link" data=
-toggle=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, 'image', { parameters: { 'alias': 'sma=
ll'},
attr: { 'class': 'img-respo=
nsive img-rounded' }}) }}
{#<img src=3D"images/lyon.png" class=3D"img-responsive img-round=
ed" 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 ) }}&l=
t;/h2>
<hr class=3D"featurette-divider">
{{ ez_render_field( content, 'image', { parameters:=
{ 'alias': 'large'},
attr: { 'cl=
ass': 'img-responsive img-rounded' }}) }}
{#<img src=3D"images/lyon.png" class=3D"img-resp=
onsive img-centered img-rounded" alt=3D"">#}
{{ ez_render_field( content, 'description', { attr:=
{ 'class': 'padding-box text-justify' }}) }}
{#<p class=3D"padding-box text-justify"></=
p>#}
</div>
</div>
</div>
</div>
</div>
</div>=20
=E2=AC=85 Previous: Working on the Ride introduction page
Next: Step 2 - Display the list of Rid= es on the homepage =E2=9E=A1
- =20