Forem: Goran Hrženjak

Animate a frame by using a transition between main image colors

Goran Hrženjak — Mon, 21 Feb 2022 11:34:49 +0000

A disclaimer right away - this is not really about animating image frames; it's just animating the background behind the image and adding some padding.

I wanted to draw more attention to some images in a grid of uploaded images in one of my projects. Instead of having a plain card design or having to tweak borders and shadows around those images, I came up with this technique.

The idea is to extract the main image colors and compose a gradient with transitions between them. This gradient will "circle around" the image making it look more lively and vibrant.
At the same time, each image will have its own unique animated gradient which, in my opinion, will make the transition between the image, image frame and container background color more seamless.

To achieve that, main image colors are extracted for each image. This "palette" of colors is used in composing the aforementioned gradient.

A couple of examples:

The code was mainly influenced by this script by Kepler Gelotte:
Image Color Extract

Input parameters are path to the image, number of colors to extract and delta - the amount of gap when quantizing color values (1-255). The smaller the delta, the more accurate the color, but also - number of similar colors increases.

<?php

declare(strict_types=1);

namespace App\Service;

class ColorPaletteExtractor
{
    private const PREVIEW_WIDTH = 250;
    private const PREVIEW_HEIGHT = 250;

    public function extractMainImgColors(string $imagePath, int $colorsCount, int $delta): array
    {
        $halfDelta = 0;
        if ($delta > 2) {
            $halfDelta = $delta / 2 - 1;
        }

        $size = getimagesize($imagePath);
        $scale = 1;
        if ($size[0] > 0) {
            $scale = min(self::PREVIEW_WIDTH / $size[0], self::PREVIEW_HEIGHT / $size[1]);
        }

        $width = (int) $size[0];
        $height = (int) $size[1];
        if ($scale < 1) {
            $width = (int) floor($scale * $size[0]);
            $height = (int) floor($scale * $size[1]);
        }

        $imageResized = imagecreatetruecolor($width, $height);

        $imageType = $size[2];

        $imageOriginal = null;
        if (IMG_JPEG === $imageType) {
            $imageOriginal = imagecreatefromjpeg($imagePath);
        }
        if (IMG_GIF === $imageType) {
            $imageOriginal = imagecreatefromgif($imagePath);
        }
        if (IMG_PNG === $imageType) {
            $imageOriginal = imagecreatefrompng($imagePath);
        }

        imagecopyresampled($imageResized, $imageOriginal, 0, 0, 0, 0, $width, $height, $size[0], $size[1]);

        $img = $imageResized;

        $imgWidth = imagesx($img);
        $imgHeight = imagesy($img);

        $totalPixelCount = 0;
        $hexArray = [];
        for ($y = 0; $y < $imgHeight; $y++) {
            for ($x = 0; $x < $imgWidth; $x++) {
                $totalPixelCount++;

                $index = imagecolorat($img, $x, $y);
                $colors = imagecolorsforindex($img, $index);

                if ($delta > 1) {
                    $colors['red'] = intval((($colors['red']) + $halfDelta) / $delta) * $delta;
                    $colors['green'] = intval((($colors['green']) + $halfDelta) / $delta) * $delta;
                    $colors['blue'] = intval((($colors['blue']) + $halfDelta) / $delta) * $delta;

                    if ($colors['red'] >= 256) {
                        $colors['red'] = 255;
                    }
                    if ($colors['green'] >= 256) {
                        $colors['green'] = 255;
                    }
                    if ($colors['blue'] >= 256) {
                        $colors['blue'] = 255;
                    }
                }

                $hex = substr('0' . dechex($colors['red']), -2)
                    . substr('0' . dechex($colors['green']), -2)
                    . substr('0' . dechex($colors['blue']), -2);

                if (!isset($hexArray[$hex])) {
                    $hexArray[$hex] = 0;
                }
                $hexArray[$hex]++;
            }
        }

        // Reduce gradient colors
        arsort($hexArray, SORT_NUMERIC);

        $gradients = [];
        foreach ($hexArray as $hex => $num) {
            if (!isset($gradients[$hex])) {
                $newHexValue = $this->findAdjacent((string) $hex, $gradients, $delta);
                $gradients[$hex] = $newHexValue;
            } else {
                $newHexValue = $gradients[$hex];
            }

            if ($hex != $newHexValue) {
                $hexArray[$hex] = 0;
                $hexArray[$newHexValue] += $num;
            }
        }

        // Reduce brightness variations
        arsort($hexArray, SORT_NUMERIC);

        $brightness = [];
        foreach ($hexArray as $hex => $num) {
            if (!isset($brightness[$hex])) {
                $newHexValue = $this->normalize((string) $hex, $brightness, $delta);
                $brightness[$hex] = $newHexValue;
            } else {
                $newHexValue = $brightness[$hex];
            }

            if ($hex != $newHexValue) {
                $hexArray[$hex] = 0;
                $hexArray[$newHexValue] += $num;
            }
        }

        arsort($hexArray, SORT_NUMERIC);

        // convert counts to percentages
        foreach ($hexArray as $key => $value) {
            $hexArray[$key] = (float) $value / $totalPixelCount;
        }

        if ($colorsCount > 0) {
            return array_slice($hexArray, 0, $colorsCount, true);
        } else {
            return $hexArray;
        }
    }

    private function normalize(string $hex, array $hexArray, int $delta): string
    {
        $lowest = 255;
        $highest = 0;
        $colors['red'] = hexdec(substr($hex, 0, 2));
        $colors['green'] = hexdec(substr($hex, 2, 2));
        $colors['blue'] = hexdec(substr($hex, 4, 2));

        if ($colors['red'] < $lowest) {
            $lowest = $colors['red'];
        }
        if ($colors['green'] < $lowest) {
            $lowest = $colors['green'];
        }
        if ($colors['blue'] < $lowest) {
            $lowest = $colors['blue'];
        }

        if ($colors['red'] > $highest) {
            $highest = $colors['red'];
        }
        if ($colors['green'] > $highest) {
            $highest = $colors['green'];
        }
        if ($colors['blue'] > $highest) {
            $highest = $colors['blue'];
        }

        // Do not normalize white, black, or shades of grey unless low delta
        if ($lowest == $highest) {
            if ($delta > 32) {
                return $hex;
            }

            if ($lowest == 0 || $highest >= (255 - $delta)) {
                return $hex;
            }
        }

        for (; $highest < 256; $lowest += $delta, $highest += $delta) {
            $newHexValue = substr('0' . dechex($colors['red'] - $lowest), -2)
                . substr('0' . dechex($colors['green'] - $lowest), -2)
                . substr('0' . dechex($colors['blue'] - $lowest), -2);

            if (isset($hexArray[$newHexValue])) {
                // same color, different brightness - use it instead
                return $newHexValue;
            }
        }

        return $hex;
    }

    private function findAdjacent(string $hex, array $gradients, int $delta)
    {
        $red = hexdec(substr($hex, 0, 2));
        $green = hexdec(substr($hex, 2, 2));
        $blue = hexdec(substr($hex, 4, 2));

        if ($red > $delta) {
            $newHexValue = substr('0' . dechex($red - $delta), -2)
                . substr('0' . dechex($green), -2)
                . substr('0' . dechex($blue), -2);

            if (isset($gradients[$newHexValue])) {
                return $gradients[$newHexValue];
            }
        }

        if ($green > $delta) {
            $newHexValue = substr('0' . dechex($red), -2)
                . substr('0' . dechex($green - $delta), -2)
                . substr('0' . dechex($blue), -2);

            if (isset($gradients[$newHexValue])) {
                return $gradients[$newHexValue];
            }
        }

        if ($blue > $delta) {
            $newHexValue = substr('0' . dechex($red), -2)
                . substr('0' . dechex($green), -2)
                . substr('0' . dechex($blue - $delta), -2);

            if (isset($gradients[$newHexValue])) {
                return $gradients[$newHexValue];
            }
        }

        if ($red < (255 - $delta)) {
            $newHexValue = substr('0' . dechex($red + $delta), -2)
                . substr('0' . dechex($green), -2)
                . substr('0' . dechex($blue), -2);

            if (isset($gradients[$newHexValue])) {
                return $gradients[$newHexValue];
            }
        }

        if ($green < (255 - $delta)) {
            $newHexValue = substr('0' . dechex($red), -2)
                . substr('0' . dechex($green + $delta), -2)
                . substr('0' . dechex($blue), -2);

            if (isset($gradients[$newHexValue])) {
                return $gradients[$newHexValue];
            }
        }

        if ($blue < (255 - $delta)) {
            $newHexValue = substr('0' . dechex($red), -2)
                . substr('0' . dechex($green), -2)
                . substr('0' . dechex($blue + $delta), -2);

            if (isset($gradients[$newHexValue])) {
                return $gradients[$newHexValue];
            }
        }

        return $hex;
    }
}

I was getting the best results when working with 6-10 colors and delta between 20 and 35.

CSS is pretty simple:

.gradient-background-animation {
  background-size: 400% 400% !important;
  animation: BackgroundGradient 10s ease infinite;
}
.card-picture-container {
  padding: 0.875rem; // This value determines how big the "frame" will be
}
.card-picture-container img {
  object-fit: contain;
  max-width: 100%;
}

@keyframes BackgroundGradient {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

You can adjust the layout and the rest of the styling per your liking.

HTML:

<div class="container">
  <div class="card-picture-container gradient-background-animation" 
       style="background-image: linear-gradient(-45deg, #78785a,#5a783c,#3c5a1e,#969678,#b4b4b4,#1e1e1e,#d2d2f0)">
    <picture>
      <img src="/images/source/image.jpeg" alt="">
    </picture>
  </div>
</div>

As you can notice, background is added as inline CSS.

Final result (size decreased for preview purposes):

I've created a Twig extension (filter) and included it in my Symfony project.

<?php

declare(strict_types=1);

namespace App\Twig;

use App\Service\ColorPaletteExtractor;
use Twig\Extension\AbstractExtension;
use Twig\TwigFilter;

class GradientExtractorExtension extends AbstractExtension
{
    public function __construct(
        private ColorPaletteExtractor $gradientExtractor,
    ) {
    }

    public function getFilters(): array
    {
        return [
            new TwigFilter('get_gradient', [$this, 'getGradient']),
        ];
    }

    public function getGradient(string $imagePath, int $colorsCount, int $delta): string
    {
        $colors = $this->gradientExtractor->extractMainImgColors($imagePath, $colorsCount, $delta);

        $filteredColors = array_filter($colors, fn (float $percentage) => $percentage > 0);

        return join(',', array_map(fn (string $color) => '#' . $color, array_keys($filteredColors)));
    }
}

image-grid.html.twig

<div class="container">
    {% for image in images %}
        <div class="card-picture-container gradient-background-animation"
             style="background-image: linear-gradient(-45deg, {{ asset(image)|get_gradient(7,30) }}); animation-duration: 8s;">
            <picture>
                <img src="{{ asset(image) }}" alt="">
            </picture>
        </div>
    {% endfor %}
</div>

Photos for testing purposes downloaded from https://www.parkovihrvatske.hr/parkovi

Implement traditional auth system in Symfony with less code than ever

Goran Hrženjak — Mon, 06 Sep 2021 10:16:16 +0000

PHP 8 introduced some new concepts and really helpful syntax features.
To significantly reduce the boilerplate code, whenever possible, we can use Constructor property promotion. Another thing I'll focus on in this guide is replacing annotations with PHP attributes. This will also reduce the number of lines of code in our classes every now and then.
As of version 2.9, Doctrine supports using PHP 8 Attributes as a new driver for mapping entities.

Not only will we need fewer lines of code than ever for this project, but also we will need to write less of that code ourselves than ever. I’m emphasizing this because we’ll heavily rely on the Maker bundle which will generate the majority of files and actual app logic for the project.
At the time of writing this post, Maker bundle still didn’t fully adopt all new PHP possibilities and some adjustments will be done manually.

The goal of the app is to provide a basic traditional authentication system with registration and login features and email verification.
App will have 3 sections: public section accessible by everyone, profile section available to all logged in users, and content section available only to verified users.
Account verification will be done by simply clicking a link in the verification email.

Create a new project:

composer create-project symfony/website-skeleton my_new_app

(or use Symfony CLI). I’m using Symfony 5.3.7.
Make sure to update required PHP version in composer.json:

{
    "require": {
-       "php": ">=7.2.5",
+       "php": "^8.0",
    }
}

Update Doctrine configuration - use attributes instead of annotations! Without this, generation migrations will not work.
config/packages/doctrine.yaml

doctrine:
    orm:
        mappings:
            App:
-               type: annotation
+               type: attribute

Now let's make initial User entity:

php bin/console make:user

Answer [yes] or select defaults for all questions in the wizard.
This should create src/Entity/User.php and src/Repository/UserRepository.php and update config/packages/security.yaml files.

Symfony Maker bundle still doesn’t support attributes, but generated entities will still save us a lot of time. We can replace annotations with attributes ourselves.
Use attributes and property types to reduce the amount of code.

src/Entity/User.php

- /**
-  * @ORM\Entity(repositoryClass=UserRepository::class)
-  */
+ #[ORM\Entity(repositoryClass: UserRepository::class)]
class User implements UserInterface, PasswordAuthenticatedUserInterface
{ 
-   /**
-    * @ORM\Id
-    * @ORM\GeneratedValue
-    * @ORM\Column(type="integer")
-    */
-   private $id;
+   #[ORM\Id, ORM\GeneratedValue, ORM\Column]
+   private int $id;
-   /**
-    * @ORM\Column(type="string", length=180, unique=true)
-    */
-   private $email;
+   #[ORM\Column(length: 180, unique: true)]
+   private string $email;
-   /**
-    * @ORM\Column(type="json")
-    */
+   #[ORM\Column(type: 'json)]
    private $roles = [];
-   /**
-    * @var string The hashed password
-    * @ORM\Column(type="string")
-    */
-   private $password;
+   #[ORM\Column]
+   private string $password;
}

Make migration and execute it.

php bin/console make:migration
php bin/console doctrine:migration:migrate

Generate simple controllers: PublicController, ProfileController, ContentController. This will add routes /public, /profile and /content. You can do this with Maker as well:

php bin/console make:controller

Rename route names for consistency by prefixing them with: app_.
All 3 routes should be available to anyone at this stage.

Add role hierarchy and access rules to config/packages/security.yaml to achieve what's explained above:

security:
+   role_hierarchy:
+       ROLE_VERIFIED_USER: [ ROLE_USER ]
    access_control:
+       - { path: ^/content, roles: ROLE_VERIFIED_USER }
+       - { path: ^/profile, roles: ROLE_USER }

Now you should be getting 401 Unauthorized error if you try to access /profile or /content.

Make the login authentication:

php bin/console make:auth

Select [1] Login form authenticator, call it LoginFormAuthenticator, confirm the controller name: SecurityController and accept adding the logout route.

This will update the config/packages/security.yaml file by adding a logout route and create authenticator, controller and login form files.

First of all, in login form Twig template, replace deprecated user.username with user.userIdentifier.

- You are logged in as {{ app.user.username }}, <a href="{{ path('app_logout') }}">Logout</a>
+ You are logged in as {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}">Logout</a>

In src/Controller/SecurityController.php we can replace routes defined by annotations with those defined by attributes.

class SecurityController extends AbstractController
{ 
-   /**
-    * @Route("/login", name="app_login")
-    */
+   #[Route('/login', name: 'app_login')]
    public function login(AuthenticationUtils $authenticationUtils): Response
-   /**
-    * @Route("/logout", name="app_logout")
-    */
+   #[Route('/logout', name: 'app_logout')]
    public function logout()
}

Thanks to constructor property promotion in PHP 8, we can rewrite the constructor in src/Security/LoginFormAuthenticator.php. While at it, add proper response in onAuthenticationSuccess method:
after successful login, redirect to app_profile route.

class LoginFormAuthenticator extends AbstractLoginFormAuthenticator
{ 
-   private UrlGeneratorInterface $urlGenerator;
-
-   public function __construct(UrlGeneratorInterface $urlGenerator)
-   {
-       $this->urlGenerator = $urlGenerator;
-   }
+   public function __construct(private UrlGeneratorInterface $urlGenerator)
+   {
+   }

    public function onAuthenticationSuccess(Request $request, TokenInterface $token, string $firewallName): ?Response
    {
-       throw new \Exception('TODO: provide a valid redirect inside '.__FILE__);
+       return new RedirectResponse($this->urlGenerator->generate('app_profile'));
    }
}

Note: If you're using a Symfony plugin in your code editor and it's complaining it can't find the route with the given name, make sure you've prefixed those routes in controllers as suggested above.

Notice how slim this authenticator became in comparison to what it used to look in older versions of Symfony.

Let’s implement registration logic.
Should we write all of this ourselves? Nope. Maker bundle to the rescue again.
First of all, let’s require another bundle, one for handling email verification logic:

composer require symfonycasts/verify-email-bundle

After that, use:

php bin/console make:registration-form

Select defaults except the one for including user ID in the link - answer yes on that prompt; and select app_profile as a route to redirect to after registration.
It's possible that Maker will warn you no Guard authenticators were found and users won't be automatically authenticated after registering. Ignore this for now, we'll implement a solution for this at the end.
The command will change User entity and create confirmation email and registration form Twig templates as well as create a RegistrationController, RegistrationFormType and EmailVerifier helper.

Update src/Entity/User.php first:

- /**
-  * @UniqueEntity(fields={"email"}, message="There is already an account with this email")
-  */
+ #[UniqueEntity(fields: ['email'], message: 'There is already an account with this email')]
class User implements UserInterface, PasswordAuthenticatedUserInterface
{ 
-   /**
-    * @ORM\Column(type="boolean")
-    */
-   private $isVerified = false;
+   #[ORM\Column(options: ['default' => false])]
+   private bool $isVerified = false;
}

Generate a migration for adding this new flag and execute it.

php bin/console make:migration
php bin/console doctrine:migration:migrate

Symfony recommends putting as little logic as possible in controllers. That’s why complex forms will be moved to dedicated classes instead of defining them in controller actions. Maker did that for us.
There are few things to change in RegistrationController - use constructor property promotion and replace deprecated UserPasswordEncoderInterface with UserPasswordHasherInterface.
At the end of the verification process, redirect to the content page.

+ use Symfony\Component\PasswordHasher\Hasher\UserPasswordHasherInterface;
- use Symfony\Component\Security\Core\Encoder\UserPasswordEncoderInterface;

class RegistrationController extends AbstractController
{ 
-   private $emailVerifier;
-
-   public function __construct(EmailVerifier $emailVerifier)
-   {
-       $this->emailVerifier = $emailVerifier;
-   }
+   public function __construct(private EmailVerifier $emailVerifier)
+   {
+   } 
-   public function register(Request $request, UserPasswordEncoderInterface $passwordEncoder): Response
+   public function register(Request $request, UserPasswordHasherInterface $passwordHasher): Response
    {
        $user->setPassword(
-           $passwordEncoder->encodePassword(
-               $user,
-               $form->get('plainPassword')->getData()
-           )
+           $passwordHasher->hashPassword($user, $form->get('plainPassword')->getData())
        );
    }

    public function verifyUserEmail(Request $request, UserRepository $userRepository): Response
    {
-       return $this->redirectToRoute('app_register');
+       return $this->redirectToRoute('app_content');
    }
}

We want to shorten that constructor in the EmailVerifier class and also add proper user roles after email verification:

class EmailVerifier
{ 
-   private $verifyEmailHelper;
-   private $mailer;
-   private $entityManager;
-
-   public function __construct(VerifyEmailHelperInterface $helper, MailerInterface $mailer, EntityManagerInterface $manager)
-   {
-       $this->verifyEmailHelper = $helper;
-       $this->mailer = $mailer;
-       $this->entityManager = $manager;
-   }
+   public function __construct(
+       private VerifyEmailHelperInterface $verifyEmailHelper,
+       private MailerInterface $mailer,
+       private EntityManagerInterface $entityManager
+   ) {
+   }

    public function handleEmailConfirmation(Request $request, UserInterface $user): void
    { 
        $user->setIsVerified(true);
+       $user->setRoles(['ROLE_VERIFIED_USER']);
    }
}

In later versions of Maker bundle where dependency to Guards will be dropped, this might be resolved, but for now we have to implement logging user in after registration manually.
Not a huge deal really. Just inject the UserAuthenticatorInterface and our authenticator in the register method and authenticate the user before returning the redirect response.

+ use App\Security\LoginFormAuthenticator;
+ use Symfony\Component\Security\Http\Authentication\UserAuthenticatorInterface;

class RegistrationController extends AbstractController
{ 
-   public function register(Request $request, UserPasswordHasherInterface $passwordHasher): Response
-   {
+   public function register(
+       Request $request,
+       UserPasswordHasherInterface $passwordHasher,
+       UserAuthenticatorInterface $authenticator,
+       LoginFormAuthenticator $formAuthenticator
+   ): Response {
        if ($form->isSubmitted() && $form->isValid()) {
            // ...
+           $authenticator->authenticateUser($user, $formAuthenticator, $request);

            return $this->redirectToRoute('app_profile');
        }
}

That's basically it for the scope of this guide 🤓

Try accessing /profile or /content route. You should be redirected to the login page. If you still haven't, it's time to register as a new user.
Go to /register and enter the desired email and password. You should be logged in automatically and redirected to /profile. Accessing /content is still not possible.
You should have received a verification email. For this to work out of the box, you only need to set up the MAILER_DSN environmental variable according to your mailing server.
After clicking the confirmation link, flag is_verified will be set, user role ROLE_VERIFIED_USER added and you'll be able to access /content.

You can render flash messages or add password reset feature (by including another great bundle: symfonycasts/reset-password-bundle) or maybe implement social logins as the next step.

Let me know in the comments if code snippets with diffs weren't clear enough or if you have any other questions.

LAMP Docker setup with PHP 8 and MariaDB for Symfony projects

Goran Hrženjak — Mon, 26 Apr 2021 14:44:52 +0000

Yet another one?!

Well, either my searching skills are getting rusty or my request was too specific while at the same time being pretty basic, or something would crash and break during the build process after following available online tutorials or downloading existing projects... but I couldn't find a single solution which I could reuse for my exact needs with just a couple of changes in the configuration.
I had to come up with my own, which is the result of bits and pieces taken from those that didn't fully work for me, as well as some knowledge and understanding of Docker I gained along the way. I'd like to share it; maybe it will be useful for someone else in this very format.

I've decided to use Docker for my local development because different projects I'm working on require different versions of PHP, NodeJS and even different versions of Composer... and switching/upgrading/downgrading those versions whenever I switched my focus on another project became cumbersome.
Docker can be really slow, but listing pros and cons of Docker is not the topic here.

I don't intend to get into the details of each line of code and explain all used commands. What I can do is encourage you into having a look at this great "Docker for local web development" series where you can learn much more. This was my main resource as well.

Let's get started

All my new projects will be using PHP 8 because of some great features I'd like to exploit which were not there prior to version 8. I think it's worth using the latest versions when starting fresh, so that's the stack I'm dealing with. Symfony 5.2 includes support for PHP 8 attributes to define routes and required dependencies, and that's one more argument in favour of it. I'll also use Apache for server and MariaDB for database.
On top of my Symfony project, I'll add PhpMyAdmin to save me some trouble when manually dealing with DB stuff.

I intend to have multiple projects locally with this exact stack, so I had to come up with something simple enough and reusable to get me started quick, but something I can build on top of and extend when necessary.

Prerequisites are installed Docker and Docker Compose (which, depending on your platform, might be a part of the Docker installation). If you're using Windows, make sure you have the WSL2 feature enabled.

Folder structure overview

Maybe it will be easier to follow if I provide the final folder structure first, so here it is:

.
├── codebase/
├── docker/
│   ├── db/
│   │   └── mariadb/
│   │       └── my.cnf
│   └── server/
│       ├── apache/
│       │   └── sites-enabled/
│       │       └── site.conf
│       ├── php/
│       │   └── php.ini
│       └── Dockerfile
├── .env
└── docker-compose.yml

All folder names are arbitrary. Make sure, if you're going to rename them, to rename them accordingly in the configurations.

codebase folder will hold all our project code. Since this will be a Symfony app, we will have public folder with index.php file within it and that's what we'll rely on throughout the setup. For starters, codebase folder is empty.

In .env file, we'll have project-level Docker environment variables. As a part of this guide, I will not configure local machine's hosts file to make site access more user friendly, but will access it over localhost:[PORT]. You must make sure that the port is not occupied already and map available ports from your local machine to container's port 80. In the same manner, I'll map a port for PhpMyAdmin. Stick with some convention and be consistent.
E.G. use ports 8101 and 8102 for project A, 8103 and 8104 for project B and so on...
The same applies for DB port. You might already have default port 3306 occupied on your local machine.
I'm using APP_NAME variable to avoid some extra copy-pasting in the configurations, but that's completely up to you.
MYSQL_* config variables are pretty self-explanatory.

Here's what my .env file looks like:

APP_NAME=symfony_project_2021
APP_PORT=8101
APP_DB_ADMIN_PORT=8102
DB_PORT=33016

MYSQL_ROOT_PASS=superSecr3t
MYSQL_USER=app_user
MYSQL_PASS=t3rceS
MYSQL_DB=symfony_project_2021

Docker Compose

docker-compose.yml YAML file is where our services are defined and based on it, Docker Compose will take care of building the images and starting the containers. We will connect all our services to internal network symfony_project_2021_net, which is also defined in docker-compose.yml.

We will use 3 services:

server
db_server
db_admin

version: '3.9'

networks:
  symfony_project_2021_net:

services:
  server:
    build:
      context: .
      dockerfile: ./docker/server/Dockerfile
    container_name: '${APP_NAME}-server'
    ports:
      - '${APP_PORT}:80'
    working_dir: /var/www/html
    environment:
      - 'DATABASE_URL=mysql://${MYSQL_USER}:${MYSQL_PASS}@db_server:3306/${MYSQL_DB}?serverVersion=10.5'
    volumes:
      - ./codebase:/var/www/html
      - ./docker/server/apache/sites-enabled:/etc/apache2/sites-enabled
      - ./docker/server/php/php.ini:/usr/local/etc/php/conf.d/extra-php-config.ini
    depends_on:
      db_server:
        condition: service_healthy
    networks:
      - symfony_project_2021_net

  db_server:
    image: mariadb:10.5.9
    container_name: '${APP_NAME}-db'
    restart: always
    ports:
      - '${DB_PORT}:3306'
    environment:
      MYSQL_ROOT_PASSWORD: '${MYSQL_ROOT_PASS}'
      MYSQL_USER: '${MYSQL_USER}'
      MYSQL_PASSWORD: '${MYSQL_PASS}'
      MYSQL_DATABASE: '${MYSQL_DB}'
    volumes:
      - db_data:/var/lib/mysql
      - ./docker/db/mariadb/my.cnf:/etc/mysql/conf.d/my.cnf
    healthcheck:
      test: mysqladmin ping -h 127.0.0.1 -u root --password=$$MYSQL_ROOT_PASSWORD
      interval: 5s
      retries: 5
    networks:
      - symfony_project_2021_net

  db_admin:
    image: phpmyadmin/phpmyadmin:5
    container_name: '${APP_NAME}-db-admin'
    ports:
      - '${APP_DB_ADMIN_PORT}:80'
    environment:
      PMA_HOST: db_server
    depends_on:
      db_server:
        condition: service_healthy
    volumes:
      - db_admin_data:/var/www/html
    networks:
      - symfony_project_2021_net

volumes:
  db_data:
  db_admin_data:

We'll use official Docker images for building db_server and db_admin containers. You can find the official (and many other) container images on Docker Hub.

Server

We'll use our own Dockerfile to specify what the server image looks like.
Content of /docker/server/Dockerfile:

FROM php:8.0-apache

RUN a2enmod rewrite

RUN apt-get update && apt-get install -y git unzip zip

WORKDIR /var/www/html

COPY --from=mlocati/php-extension-installer /usr/bin/install-php-extensions /usr/local/bin/
RUN install-php-extensions gd pdo_mysql bcmath zip intl opcache

COPY --from=composer:2.0 /usr/bin/composer /usr/local/bin/composer

Docker PHP extension installer script will install all the required APT/APK packages. At the end of the script execution, packages that are no longer needed will be removed, so the image will be much smaller.
Using docker-php-ext-install didn't always work for me, so I'm pulling this extra script. You can expand the list of extensions to install, if necessary.
After that, we'll also pull the Composer. What do you think about setting up a separate container for Composer?

Content of our local folder codebase will be considered a volume mapped to /var/www/html, which is the project root.

Apache

Site is defined on Apache side, in docker/server/apache/sites-enabled/site.conf:

<VirtualHost *:80>
  DocumentRoot /var/www/html/public
  <Directory /var/www/html/public>
      AllowOverride None
      Order Allow,Deny
      Allow from All

      <IfModule mod_rewrite.c>
          Options -MultiViews
          RewriteEngine On
          RewriteCond %{REQUEST_FILENAME} !-f
          RewriteRule ^(.*)$ index.php [QSA,L]
      </IfModule>
  </Directory>
</VirtualHost>

Again, this is Symfony-specific (something very similar would be used for Laravel projects as well).

Configurations

Finally, there are some extra configurations for PHP and MariaDB in /docker/server/php/php.ini and /docker/db/mariadb/my.cnf, respectively.
You can configure and overwrite defaults in those files if necessary.

upload_max_filesize = 30M
post_max_size = 80M
short_open_tag = Off
memory_limit =  256M

[mysqld]
collation-server = utf8mb4_unicode_ci
character-set-server = utf8mb4

We'll use named volumes to persist data. We need such volumes because without them, every time the DB service container is destroyed the database is destroyed with it. This is what that final section in docker-compose.yml is for. Volumes are referenced in db_server and db_admin services.

Order in which containers are started is important and that's what we've set with depends_on.

Specifying environment server variables is also completely up to you; you're free to use another .env file in the Symfony project root folder. DATABASE_URL variable is Symfony-specific, and if you display it on the server, you should get

Variables defined like this will have precedence over those defined in .env files (in Symfony project root folder).
You can do the same thing for Laravel project.

Ready, set, ...

In your terminal, run docker-compose up -d --build to start the containers. The process will take some time, but only the first time you're building containers.

After this is done, check your containers by running docker-compose ps in the terminal.

Also, in Docker Desktop app you should see:

Everything from now on should be a walk in the park. Or that's what I thought when following all online resources I could find 😃

Execute Bash on server container (where server is the name you've given to container) by running docker-compose exec server bash

We've set our working directory on the server to /var/www/html. While at it, run composer create-project symfony/website-skeleton .. If you prefer, you can install Symfony installer as well (add it to Dockerfile).
This will install the Symfony project.
It's important that you do this directly on the server because your local Composer and PHP versions might be different and you could run into compatibility issues.

Now check http://localhost:8101/ and http://localhost:8102/. Your site and PhpMyAdmin should be available!

Was this guide "yet another" that didn't fully work for your local setup? What would you improve or change completely?
Which other containers do you usually use to get your projects up and running?