Symfony Essentials

composer require vich/uploader-bundle

vich_uploader:
    db_driver: orm

    mappings:
       article_images:
           uri_prefix: /images/article
           upload_destination: '%kernel.project_dir%/public/images/article'
           namer: Vich\UploaderBundle\Naming\SmartUniqueNamer

// src/Entity/Article.php

use Symfony\Component\HttpFoundation\File\File;
use Vich\UploaderBundle\Mapping\Annotation as Vich;

#[ORM\Entity(repositoryClass: ArticleRepository::class)]
#[Vich\Uploadable]
class Article
{
    // ... existing fields

    #[Vich\UploadableField(mapping: 'article_images', fileNameProperty: 'image')]
    private ?File $imageFile = null;

    public function setImageFile(?File $imageFile = null): void
    {
        $this->imageFile = $imageFile;

        if ($imageFile !== null) {
            $this->updatedAt = new \DateTimeImmutable();
        }
    }

    public function getImageFile(): ?File
    {
        return $this->imageFile;
    }
}

public function setImage(?string $image): static

public function setImage(string $image): static

Expected argument of type "string", "null" given

// src/Form/ArticleForm.php

use Vich\UploaderBundle\Form\Type\VichImageType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;

$builder
    ->add('title')
    ->add('content')
    ->add('imageFile', VichImageType::class, [
        'required' => false,
        'label' => 'Image (JPG/PNG file)',
        'download_uri' => false,
    ])
    ->add('save', SubmitType::class);

// templates/article/_form.html.twig

{{ form_start(form, {'attr': {'class': 'space-y-4 max-w-xl mx-auto p-4'}}) }}

<div>
    {{ form_label(form.title, null, {'label_attr': {'class': 'block mb-1 text-sm font-medium'}}) }}
    {{ form_widget(form.title, {'attr': {'class': 'w-full p-2 border border-gray-400 rounded'}}) }}
    {{ form_errors(form.title) }}
</div>

<div>
    {{ form_label(form.content, null, {'label_attr': {'class': 'block mb-1 text-sm font-medium'}}) }}
    {{ form_widget(form.content, {'attr': {'class': 'w-full p-2 border border-gray-400 rounded h-40'}}) }}
    {{ form_errors(form.content) }}
</div>

{% if form.imageFile is defined %}
<div>
    {{ form_label(form.imageFile, null, {'label_attr': {'class': 'block mb-1 text-sm font-medium'}}) }}
    {{ form_widget(form.imageFile, {'attr': {'class': 'w-full p-2 border border-gray-400 rounded'}}) }}
    {{ form_errors(form.imageFile) }}
</div>
{% endif %}

<button class="bg-blue-600 text-white px-4 py-2 rounded">{{ button_label|default('Save') }}</button>

{{ form_end(form) }}

templates/article/show.html.twig

{% if article.image %}
    <img src="{{ asset('images/article/' ~ article.image) }}" alt="{{ article.title }}" class="mb-4 rounded">
{% endif %}

templates/article/indx.html.twig

comment out the following line
{# <td class="p-2 border">{{ article.image }}</td> #}

and add instade the follwoing:

{% if article.image %}
    <img src="{{ asset('images/article/' ~ article.image) }}" alt="{{ article.title }}" class="mb-4 rounded">
{% endif %}

sudo mkdir -p public/images/article
sudo chgrp www-data  public/images/article
sudo chmod -R 775 public/images/article

git status
git add .
git commit -m "Add image upload support for Article entity using VichUploaderBundle"

composer require intervention/image-symfony

# config/packages/intervention_image.yaml

intervention_image:
    driver: Intervention\Image\Drivers\Gd\Driver
    options:
        autoOrientation: false
        strip: true

# src/EventSubscriber/ImageResizeSubscriber.php

<?php

namespace App\EventSubscriber;

use Intervention\Image\ImageManager;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;
use Vich\UploaderBundle\Event\Event;
use Vich\UploaderBundle\Event\Events;

class ImageResizeSubscriber implements EventSubscriberInterface
{
    private ImageManager $imageManager;

    public function __construct(ImageManager $imageManager)
    {
        $this->imageManager = $imageManager;
    }

    public static function getSubscribedEvents(): array
    {
        return [
            Events::PRE_UPLOAD => 'onPreUpload',
        ];
    }

    public function onPreUpload(Event $event): void
    {
        $object = $event->getObject();

        // Adjust this condition for your actual entity class
        if (!method_exists($object, 'getImageFile')) {
            return;
        }

        $file = $object->getImageFile();
        if ($file === null) {
            return;
        }

        $image = $this->imageManager->read($file->getPathname());

        $image->resize(1000, 1000, function ($constraint) {
            $constraint->aspectRatio();
            $constraint->upsize();
        });

        $image->save($file->getPathname(), 80); // Save at 80% quality
    }
}

# config/services.yaml

    App\EventSubscriber\ImageResizeSubscriber:
        tags:
            - { name: kernel.event_subscriber }

sudo apt update
sudo apt install php-imagick
sudo systemctl restart apache2

# File: config/packages/intervention_image.yaml

intervention_image:
    driver: Intervention\Image\Drivers\Imagick\Driver
    options:
        autoOrientation: true
        strip: true
        blendingColor: 'ffffff'
        decodeAnimation: true

# File: src/EventSubscriber/ImageResizeSubscriber.php

<?php

namespace App\EventSubscriber;

use Intervention\Image\ImageManager;
#
use Intervention\Image\Encoders\WebpEncoder;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;
use Vich\UploaderBundle\Event\Event;
use Vich\UploaderBundle\Event\Events;

class ImageResizeSubscriber implements EventSubscriberInterface
{
    private ImageManager $imageManager;

    public function __construct(ImageManager $imageManager)
    {
        $this->imageManager = $imageManager;
    }

    public static function getSubscribedEvents(): array
    {
        return [
            Events::PRE_UPLOAD => 'onPreUpload',
        ];
    }

    public function onPreUpload(Event $event): void
    {
        $object = $event->getObject();

        if (!method_exists($object, 'getImageFile')) {
            return;
        }

        $file = $object->getImageFile();
        if ($file === null) {
            return;
        }

        $image = $this->imageManager->read($file->getPathname());

        $image->resize(1000, 1000, function ($constraint) {
            $constraint->aspectRatio();
            $constraint->upsize();
        });

        $image->encode(new WebpEncoder(quality: 85))->save($file->getPathname(), 80);
    }
}

Intervention\Image\Encoders\

composer require liip/imagine-bundle

# Documentation on how to configure the bundle can be found at: https://symfony.com/doc/current/bundles/LiipImagineBundle/basic-usage.html
liip_imagine:
    # The image processing driver to use.
    # Options: "gd", "gmagick", or "imagick".
    # "gd" is widely available but limited in features compared to the others.
    driver: "gd"

    resolvers:
        default:
            web_path:
                # The root directory of the public web folder.
                # This is where generated (cached) images will be stored.
                web_root: "%kernel.project_dir%/public"

                # The subdirectory inside the public folder where cached images will be saved.
                # Final path will be: public/media/cache
                cache_prefix: "media/cache"

    filter_sets:
        # An empty filter used as a placeholder for cache warmup commands.
        # Does not perform any actual image transformation.
        cache: ~

        # Filter for small thumbnails (e.g., avatars, icons)
        thumb_small:
            # JPEG compression quality (0–100). Higher means
            # better quality and larger file size.
            quality: 80
            filters:
                thumbnail:
                    # Resize the image to fit within 150x150 pixels while
                    # maintaining aspect ratio.
                    size: [150, 150]
                    # 'inset' mode scales the image down to fit inside
                    # the box without cropping.
                    mode: inset

        # Filter for medium thumbnails (e.g., article previews or card images)
        thumb_medium:
            quality: 85
            filters:
                thumbnail:
                    # Resize to fit within 600x400 pixels.
                    size: [600, 400]
                    # Keeps the entire image visible within the defined size.
                    mode: inset

        # Filter for large images (e.g., headers or full-width banners)
        thumb_large:
            quality: 80
            filters:
                thumbnail:
                    # Resize to exactly 1200x800 pixels.
                    size: [1200, 800]
                    # 'outbound' mode scales and crops the image to
                    # fill the box completely.
                    mode: outbound

mkdir -p public/media/cache
sudo chgrp -R www-data public/media
sudo chmod -R 775 public/media

php bin/console liip:imagine:cache:remove

find public/images/article -type f -iname '*.jpg' -o -iname '*.png' | while read img; do
  php bin/console liip:imagine:cache:resolve "${img#public/}" --filter=thumb_small
doneg

#!/bin/bash

set -e

# Pfad zum Bildordner unter /public/
IMAGE_DIR="public/images/article"

# === Konfiguration: Filter ===
# Leerlassen für alle Filter automatisch:
FILTERS="thumb_small thumb_medium thumb_large"
# Oder: FILTERS="thumb_small thumb_large"

# Wenn leer, hole alle Filter automatisch
if [ -z "$FILTERS" ]; then
  FILTERS=$(php bin/console liip:imagine:filter:list --no-ansi | grep -v "^Filter sets:" | xargs)
fi

# Bilder rekursiv finden und alle gewünschten Filter darauf anwenden
find "$IMAGE_DIR" -type f \( -iname '*.jpg' -o -iname '*.jpeg' -o -iname '*.png' \) | while read -r img; do
  RELATIVE_PATH="${img#public/}"
  for FILTER in $FILTERS; do
    echo "▶ Warming up: $RELATIVE_PATH [filter: $FILTER]"
    php bin/console liip:imagine:cache:resolve "$RELATIVE_PATH" --filter="$FILTER"
  done
done

echo "✅ Cache warmup done."

chmod +x warmup_liip_images.sh

./warmup_liip_images.sh