'How can i unescape "slash" additionally to basic function {% autoescape false %}?

I'm working on an app with Symfony/Twig, and I want to scan a directory and add all photos of this directory in a Bootstrap carousel.

Controller

public function index(int $id, ManagerRegistry $doctrine): Response
{
    $entityManager = $doctrine->getManager();
    $establishment = $entityManager->getRepository(Establishment::class)->find($id);
    $establishmentName = $establishment->getEstablishmentName();
    $establishmentDirectory = $this->getParameter('media_directory').'/establishments_pages/'.$establishmentName;
    $establishmentAssetDir = '/ressources/uploads/establishments_pages/'.$establishmentName;

    $photos = [];
    $buttons = [];
    $count = 0;
    $count1 = 1;

    if ($establishmentDirectory) {
        $results = scandir($establishmentDirectory);
        foreach ($results as $value) {
            if ($value !== '.'
                && $value !== '..'
                && $value !== 'Suite Deluxe'
                && $value !== 'Suite standard'
                && $value !== 'Suite VIP') {
                if ($count === 0) {
                    $button = '<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide '.$count1.'"></button>';
                    $photo = '<div class="carousel-item active"><img src="{{ asset("'.$establishmentAssetDir.'/'.$value.'")}}" class="d-block w-100" alt="Photo de l\'hotel"></div>';
                    array_push($buttons, $button);
                    array_push($photos, $photo);
                    $count++;
                    $count1++;
                } else {
                    $button = '<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="'.$count.'" aria-label=" Slide '.$count1.'"></button>';
                    $photo = '<div class="carousel-item"><img src="{{ asset("'.$establishmentAssetDir.'/'.$value.'")}}" class="d-block w-100" alt="Photo de l\'hotel"></div>';
                    array_push($buttons, $button);
                    array_push($photos, $photo);
                    $count++;
                    $count1++;
                }
            }
        }
    } else {
        echo 'Le dossier n\'existe pas.';
    }

    dump($photos);

    return $this->render('establishment/establishment.html.twig', [
        'id' => $id,
        'establishment' => $establishment,
        'establishmentName' => $establishmentName,
        'establishmentDirectory' => $establishmentDirectory,
        'buttons' => $buttons,
        'photos' => $photos,
    ]);
}

When I dump $photos in this Controller, I obtain what I'm looking to do: real paths to the photos with all slashes.

array:3 [▼ 0 => "<img src="{{ asset("/ressources/uploads/establishments_pages/Chez Eros/HM_francesca-saraco-dS27XGgRyQ-unsplash-625fd4f334cbd.j ▶" 1 => "<img src="{{ asset("/ressources/uploads/establishments_pages/Chez Eros/eddi-aguirre-ZAVHbpOn4Jk-unsplash-625fd4f33559c.jpg")}}" class ▶" 2 => "<img src="{{ asset("/ressources/uploads/establishments_pages/Chez Eros/marten-bjork-n-IKQDCyrG0-unsplash-625fd4f3364ae.jpg")}}" class ▶" ]

But when Twig interprets this code, it transforms all slashes to spaces, EVEN IF I put the unescape function on false!

The TWIG code :

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
    {% autoescape false %}
    <div class="carousel-indicators">
        {% for button in buttons %}
            {{ button }}
        {% endfor %}
    </div>
    <div class="carousel-inner">
        {% for photo in photos %}
            {{photo}}
        {% endfor %}
    </div>
    {% endautoescape %}
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

The result in debug toolbar on chrome:

<img src="{{ asset(" ressources="" uploads="" establishments_pages="" chez="" eros="" hm_francesca-saraco-ds27xggryq-unsplash-625fd4f334cbd.jpg")}}"="" class="d-block w-100" alt="Photo de l'hotel">

I already try to add "|raw" inline on the photo variable in TWIG, but it doesn't change anything!

Can anybody help me to keep my paths?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source