• Documentation >
• Tutorials >
• Beginner tutorial >
• 7. Embed content

Step 7 — Embed content

Creating lists and detailed views of content types and their respective items often involves loading related resources. In this step, you add a related object, a Landmark, which is displayed on Ride pages.

You can add as many or as little related resources as you like.

Add the Landmark content type

Now you need to add the second content type needed in the site, Landmark.

Go to Content types, and in the Content group, add the Landmark content type.

A Landmark is an interesting place that Rides go through. Each Ride may be related to multiple Landmarks.

• Name: Landmark
• Identifier: landmark

Then add all fields with the following information: 

Field type	Name	Identifier	Required	Searchable	Translatable
Text line	Name	name	yes	yes	yes
Rich text	Description	description	no	yes	yes
Image Asset	Photo	photo	yes	no	no
Map location	Location	location	yes	yes	no

Confirm the creation of the content type by selecting Create.

Create a Landmarks Folder and add some Landmarks to it. You need pictures (for the Photo field) to represent them.

Add Landmarks to Ride content type definition

Now edit the Ride content type to add a Multiple Content Relation between the two content types. Create a new Content relations (multiple) field called "Landmarks" with identifier landmarks and allow content type "Landmark" to be added to it:

Confirm by clicking Save and close.

Go back to one of your existing Rides, edit it and link some Landmarks to it. Click Publish.

Display a list of Landmarks in Ride view

Create Landmark line view

Now you need to create the line view for Landmarks.

Declare a new override rule in config/packages/views.yaml:

ibexa:
    system:
        site:
            content_view:
                #full views here
                line:
                    landmark:
                        template: line/landmark.html.twig
                        match:
                            Identifier\ContentType: landmark

Add the template for the line view of a Landmark by creating templates/line/landmark.html.twig:

<section>
    <div class="col-xs-4 photos-box">
        <a href="#bikeModal{{ content.id }}" data-toggle="modal">
            {{ ibexa_render_field( content, 'photo', { parameters: { 'alias': 'landmark_list', 'class': 'img-rounded'}}) }}
        </a>
    </div>


    <div class="bike-modal modal fade" id="bikeModal{{ content.id }}" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-xs-8 col-xs-offset-2">
                        <div class="modal-body text-center">
                            <h2>{{ content.name }}</h2>
                            <hr class="featurette-divider">
                            {{ ibexa_render_field( content, 'photo', { parameters: { 'alias': 'large'}, attr: { 'class': 'img-responsive img-rounded' }}) }}
                            {{ ibexa_render_field( content, 'description', { attr: { 'class': 'padding-box text-justify' }}) }}
                            {{ ibexa_render_field( content, 'location', { parameters: {'width': '100%', 'height': '250px', 'showMap': true, 'showInfo': false }}) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Like before, you use an image variation here (line 4) and you need to configure it. Add the following section to config/packages/image_variations.yaml, at the same level as ride_list:

landmark_list:
    reference: null
    filters:
        - {name: geometry/scalewidth, params: [200]}

Create the RideController

You must provide additional information when the Ride object is displayed. This requires creating a custom controller. The controller uses ContentService to load related resources (Landmarks) for a particular Ride.

Create a src/Controller/RideController.php file:

<?php

namespace App\Controller;

use Ibexa\Bundle\Core\Controller;
use Ibexa\Core\MVC\Symfony\View\ContentView;
use Ibexa\Contracts\Core\Repository\ContentService;

class RideController extends Controller
{
    private $contentService;

    public function __construct(ContentService $contentService)
    {
        $this->contentService = $contentService;
    }

    public function viewRideWithLandmarksAction(ContentView $view)
    {
        $currentContent = $view->getContent();
        $landmarksListId = $currentContent->getFieldValue('landmarks');
        $landmarksList = [];

        foreach ($landmarksListId->destinationContentIds as $landmarkId) {
            $landmarksList[$landmarkId] = $this->contentService->loadContent($landmarkId);
        }

        $view->addParameters(['landmarksList' => $landmarksList]);

        return $view;
    }
}

Update config/packages/views.yaml to mention the RideController.php by adding a line with the controller key to the view config:

ibexa:
    system:
        site:
            content_view:
                full:
                    ride:
                        template: full/ride.html.twig
                        controller: App\Controller\RideController::viewRideWithLandmarksAction
                        match:
                            Identifier\ContentType: ride

Add the Landmark in the Ride full view

Now modify the Ride full view template to include a list of Landmarks, and the controller that you created. Add the following lines at the end of templates/full/ride.html.twig, before the last </div> and the closing tag {% endblock %}:

{% if landmarksList is not empty %}
    <div class="row regular-content-size">
        <section class="photos">
            <div class="col-xs-12">
                <h4 class="underscore">{{ 'Landmarks'|trans }}</h4>
            </div>
            {% for landmark in landmarksList %}
                {{ render( controller( "ibexa_content::viewAction", { 'content': landmark, 'viewType': 'line'} )) }}
            {% endfor %}
        </section>
    </div>
{% endif %}

You can now check the Ride page again to see all the connected Landmarks.

Tip

You can use dump() in Twig templates to display all available variables.