How to fill a Symfony page with sample images and text

Programming 29.04.2024
ai-generated-8684869_640.jpg

When developing frontend, you've probably encountered the need to fill the page with some content to verify the final look of the website. Typing random characters on the keyboard doesn't look good and doesn't accurately represent how our frontend looks. Adding random images from the disk, especially with changing their resolution, can also be quite cumbersome. While creating this blog, I wanted to eliminate this problem, and thus the bundle for the Symfony framework was created, which facilitates frontend development.

About DummyContent

The bundle in question is DummyContent. It's a simple generator of test content with ready integration with Twig and the LaserTag package. To install the package, simply execute the command:

BASH
    

composer require starxen/dummycontent

    

Flex should automatically configure the bundle to work. However, if it doesn't, you need to add DummyContent to the list of packages in your project.

config/bundles.php
PHP
    


<?php

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

    

Generating Text

When it comes to generating text, DummyContent comes with a built-in Lorem Ipsum generator. It's a popular "text" used to fill pages with sample data. In this case, there's no need to generate Lorem Ipsum with an external tool and copy it into the project; just use the provided function in Twig, specifying the number of words to generate as an argument.

TWIG
    

{{ lorem_ipsum(10) }}

    

As a result, you'll get generated text of the specified length.

obraz_2024-04-28_210817785.png

Generating Images

Similar to generating text, the functionality of generating images is also implemented. To insert an image with a specified width and height in the template, simply use the following function:

TWIG
    

{{ dummy_image(200, 100 }}

    

This will result in the following image:

100px x 200px

The image data is embedded directly into the HTML code.

HTML
    

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

    

If necessary, you can also specify a CSS class to be included in the resulting code, as well as set the background and font colors.

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">

    

Summary

The DummyContent library is still being developed. All its functionalities, along with usage examples in both PHP and Twig, as well as LaserTag, are available in the documentation. If you're interested in PHP programming and more, I encourage you to check out other posts on the blog and follow it regularly!