0

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?

DarkBee
  • 16,592
  • 6
  • 46
  • 58
  • Does this answer your question? [How to render content from string/database with twig?](https://stackoverflow.com/questions/9803353/how-to-render-content-from-string-database-with-twig) – DarkBee May 06 '22 at 05:36
  • Unfortunatly no. Twig_Loader_String class has been deprecated so I try to create a new TwigFilter which replaces '%2' with '/'. I replace all '/' with '%2' in the Controller and it display the same result : ' ' instead of '/' in paths. – Jérémy GABOURG May 06 '22 at 19:36

0 Answers0