Step 5 — Display a list of Content items¶
Now that you know how to display a single Content item, you can take care of rendering a list of Content items.
In this step you will display a table of all Rides on the front page.
Customize the homepage template¶
In templates/full/home_page.html.twig
replace the "Hello world" with a table that will display the list of all existing Rides:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
|
The rides
variable you use in line 15 above needs to contain a list of all Rides.
To get this list, you will use a Query Type.
Create a QueryType for the home page¶
QueryType objects are used to limit and sort results for Content Item queries. For more information, see Built-In Query Types.
Here, you need to display ride
objects that have been published (are visible).
Create a RideQueryType.php
file in src/QueryType
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
|
This Query Type will find all visible Content items that belong to the ride
Content Type (lines 21-22).
Now you need to indicate that this Query Type will be used in your configuration.
Add Query Type to configuration¶
Edit config/packages/ezplatform.yaml
.
In the view configuration for the home page indicate that this view will use the Query Type:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
The query_type
parameter in line 12 indicates which Query Type to use.
You defined the name Ride
in the Query Type file in the getName
method.
Using the pagingQueryAction
of the built-in ez_query
controller (line 6)
enables you to automatically get paginated results.
You can set the limit of results per page in the limit
parameter.
View types¶
So far you have been using the full
view type to render the Ride's full view.
Here, on the other hand, you use the line
view, as indicated by 'viewType': 'line'
in the home page template (line 16).
You can configure custom view types with any name you want, as long as you include them in the configuration.
Let's do this now with the line
view for Rides.
Create a line template for Rides¶
Add a rule for the ride
template in your config/packages/ezplatform.yaml
file.
line
should be at the same level as full
.
1 2 3 4 5 6 7 8 |
|
Create the templates/line/rides.html.twig
template.
Because this template will be rendered inside a table, it starts with a <tr>
tag.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
Now go to the homepage of your website and you will see the list of Rides. However, the Ride photos are too large and stretch the table. In the next step you will ensure they are displayed in proper size.