This is my first time using this approach. I’ve added separate config files in /config/packages.

Here’s vich_uploader.yaml:

vich_uploader:
    db_driver: orm

    metadata:
        type: attribute

    mappings:
        category_images:
            uri_prefix: '%upload.category_images%'
            upload_destination: '%kernel.project_dir%/public%upload.category_images%'
            namer:
                service: VichUploaderBundleNamingSmartUniqueNamer

And, liip_imagine.yaml:

liip_imagine:
    driver: 'imagick'
    twig:
        mode: 'lazy'

    loaders:
        default:
            filesystem:
                locator: filesystem_insecure

    filter_sets:


        explore_category:
            quality: 100
            filters:
                thumbnail: { size: [700, 450], mode: inbound }

I’ve also specified in ** services.yaml** under the parameters directive where the category_images are located:

parameters:
    app.default_locale: 'de'
    app.locales: ['de', 'en']

    # Pagination
    pagination.per_page: 10

    # # Upload directories
    upload.category_images: '/uploads/category'

Twig code where I’m implementing this filter:

{% for promotion in promotions %}
                        
                            {% if loop.index % 2 == 1 %}
                                <div class="owl-carousel-item">
                            {% endif %}
                            <a href="{{ path('client.task.create', {category: promotion.parent.id, subcategory: promotion.id}) }}" class="col-3 mb-3 text-decoration-none">
                                    <div class="promotion-slider-item bg-white margin-bottom-30">
                                    <div class="promotion-slider-item__image">
                                        {% set imageFile = vich_uploader_asset(promotion, 'imageFile')|imagine_filter('explore_category') %}
                                    
                                        {% if file_exists(imageFile) %}
                                            <img src="{{ imageFile }}" alt="download.png" class="w-100 h-100">
                                        {% else %}
                                            <img src="{{ image_path('default.png') }}" alt="default_image.png" class="w-100 h-100">
                                        {% endif %}
                                    </div>
                                    <div class="promotion-slider-item__content">
                                        <p class="mb-0">{{ promotion.translate(app.request.locale).title|u.truncate(25, '…') }}</p>
                                    </div>
                                </div>
                            </a>

                            {% if loop.index % 2 == 0 or loop.last %}
                                </div>
                            {% endif %}
                        {% endfor %}

However, it’s not replacing the URL to show the optimized image on the rendered page. It’s still showing the image from the original upload source, not the optimized one at /media/cache/upload/uploads/category. The original source is /uploads/category/….

Attempting to display the optimized image on the rendered page instead of the original one, but unfortunately, I’m not achieving that result.