Jak w Symfony wypełnić stronę przykładowymi obrazami i tekstem

Programowanie 29.04.2024
ai-generated-8684869_640.jpg

Podczas tworzenia frontendu pewnie spotkałeś się z koniecznością wypełnienia strony jakąś treścią aby zweryfikować docelowy wygląd witryny. Klikanie losowych znaków na klawiaturze nie wygląda za dobrze i nie do końca oddaje realnie jak nasz frontend się prezentuje. Dodawanie losowych obrazów z dysku, szczególnie z zmianą ich rozdzielczości również może być mocno uciążliwe. Tworząc tego bloga chciałem wyeliminować ten problem i dzięki temu powstał bundle dla frameworka Symfony który ułatwia tworzenie frontendu.

Trochę o DummyContent

Bundle o którym mowa to DummyContent. Jest to prosty generator testowej treści wraz z gotową integracją z Twigiem oraz z pakietem LaserTag. Aby zainstalować pakiet wystarczy wykonać polecenie:

BASH
    

composer require starxen/dummycontent

    

Flex powinien automatycznie skonfigurować bundle do działania, jeśli jednak by się tak nie stało należy dodać DummyContent do listy pakietów naszego projektu.

config/bundles.php
PHP
    

<?php

return [
    StarXen\DummyContent\DummyContentBundle::class => ['all' => true],
];

    

Generowanie tekstu

Jeśli chodzi o generowanie tekstu, w DummyContent wbudowany jest generator Lorem Ipsum. Jest to popularny "tekst" służący do wypełniania stron przykładowymi danymi. W tym przypadku nie jest konieczne generowanie Lorem Ipsum zewnętrznym narzędziem i kopiowanie go do projektu, wystarczy użyć przygotowanej funkcji w Twigu podając w argumencie ilość słów do wygenerowania.

TWIG
    

{{ lorem_ipsum(10) }}

    

Wynikowo otrzymamy wygenerowany tekst o zadanej długości.

obraz_2024-04-28_210817785.png

Generowanie obrazów

Podobnie do generowania tekstu zrealizowana jest funkcjonalność generowania obrazów. Aby wstawić w szablonie obraz o zadanej szerokości i wysokości wystarczy użyć następującej funkcji:

TWIG
    

{{ dummy_image(200, 100 }}

    

Wynikiem czego będzie następujący obrazek:

100px x 200px

Dane obrazu są osadzone bezpośrednio w kodzie HTML.

HTML
    

<img src="data:image/png;base64, *img_data*" alt="100px x 200px" class="">

    

W razie potrzeby możemy również podać klasę CSS która ma znaleźć się w kodzie wynikowym a także możemy ustalić kolor tła oraz czcionki.

TWIG
    

{{ dummy_image(200, 100, 'css_class', '#000000', '#FFFFFF')}}

    
100px x 200px
HTML
    

<img src="data:image/png;base64, *img_data*" alt="100px x 200px" class="css_class">

    

Podsumowanie

Biblioteka DummyContent jest w dalszym ciągu rozwijana. Wszystkie jej funkcjonalności wraz z przykładami użycia w samym PHP jak i Twigu oraz LaserTagu są dostępne w dokumentacji. Jeśli interesujesz się programowaniem w PHP i nie tylko, zachęcam do sprawdzenia innych postów na blogu oraz śledzenia go na bierząco!