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¶
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
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).
RideQueryType.php file in
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¶
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
query_type parameter in line 12 indicates which Query Type to use.
You defined the name
Ride in the Query Type file in the
pagingQueryAction of the built-in
ibexa_query controller (line 6)
enables you to automatically get paginated results.
You can set the limit of results per page in the
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
line should be at the same level as
1 2 3 4 5 6 7 8
Because this template will be rendered inside a table, it starts with a
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
Add Media permission¶
To be able to view the
photo Field you have to add a
read permission to
From Admin (gear icon) in the left menu, go to the Roles management screen and click the Anonymous Role.
Edit the Content/Read Policy line to add the
Media section to Limitation along with the
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.