eZ Platform Discussions

Sort, translate and reduce the list of images_variations


#1

In the rich text editor you can insert an image and choose a variation.

I would like to be able to sort this list from the smallest to the largest.
I can imagine that automatic sorting is impossible and unfounded. So I just wish I could choose the order of variations.

I would also like to be able to translate them.

And finally I would like not to leave the gallery and ezplatform_admin_admin_ui_profile_picture_user_menu variations at the mercy of my dear contributors…

My current settings:

ezpublish:
    system:
        site_group:
            image_variations:
                variation_dispo_uniquement_en_front:
                    filters:
                        geometry/scaledownonly: [600, 600]

        default:
            image_variations:
                # Built-in image variations override
                tiny:
                    reference: reference
                    filters:
                        geometry/scaledownonly: [115, 115] # 1/6 large
                small:
                    reference: reference
                    filters:
                        geometry/scaledownonly: [229, 229] # 1/3 large
                medium:
                    reference: reference
                    filters:
                        geometry/scaledownonly: [344, 344] # 1/2 large
                large:
                    reference: reference
                    filters:
                        geometry/scaledownonly: [687, 687] # Largeur du contenu principale (en présence d'un aside)
                reference:
                    reference: ~
                    filters:
                        geometry/scaledownonly: [1100, 1100] # 1100 = largeur du contenu.  @see .page-container

#2

The <select> used in the BO is generated by :

vendor/ezsystems/ezplatform-admin-ui/src/bundle/Resources/public/js/alloyeditor/src/buttons/ez-btn-imagevariation.js

From the global variable : eZ.adminUiConfig.imageVariations

But I don’t see how to modify this file.


#3

Hi @remy_php,

Configuration for the front end components (like WYSIWYG editor) is generated by configuration providers (services which implements EzSystems\EzPlatformAdminUi\UI\Config\ProviderInterface). In case of eZ.adminUiConfig.imageVariations it is ezsystems.ezplatform_admin_ui.ui.config.provider.image_variations:

    ezsystems.ezplatform_admin_ui.ui.config.provider.image_variations:
        class: EzSystems\EzPlatformAdminUi\UI\Config\Provider\Value
        lazy: true
        arguments:
            $value: '$image_variations$'
        tags:
            - { name: ezplatform.admin_ui.config_provider, key: 'imageVariations' }

To be able to manipulate this list you can use decorator pattern. For example:

<?php

/**
 * @copyright Copyright (C) eZ Systems AS. All rights reserved.
 * @license For full copyright and license information view LICENSE file distributed with this source code. 
 */
declare(strict_types=1);

namespace AppBundle\UI\Config;

use EzSystems\EzPlatformAdminUi\UI\Config\ProviderInterface;

final class ImageVariationProviderDecorator implements ProviderInterface
{
    /** @var \EzSystems\EzPlatformAdminUi\UI\Config\ProviderInterface */
    private $innerProvider;

    /**
     * @param \EzSystems\EzPlatformAdminUi\UI\Config\ProviderInterface $innerProvider
     */
    public function __construct(ProviderInterface $innerProvider)
    {
        $this->innerProvider = $innerProvider;
    }

    /**
     * {@inheritdoc}
     */
    public function getConfig(): array
    {
        $variations = $this->innerProvider->getConfig();

        // Unset unnecessary variations from UI
        unset($variations['ezplatform_admin_ui_profile_picture_user_menu']);
        unset($variations['gallery']);

        // Sort variation from the smallest to the largest
        uasort($variations, function($a, $b) {
            // TODO: Compare size of A and B variation
        });

        return $variations;
    }
}

and register it in dependency injection container:

services:
    # ...
    AppBundle\UI\Config\ImageVariationProviderDecorator:
        decorates: ezsystems.ezplatform_admin_ui.ui.config.provider.image_variations
        arguments:
            $innerProvider: '@AppBundle\UI\Config\ImageVariationProviderDecorator.inner'

This allows you to remove unnecessary variation items from mentioned <select> and apply custom sorting. unfortunately currently you cannot translate variations without redefining https://github.com/ezsystems/ezplatform-admin-ui/blob/master/src/bundle/Resources/public/js/alloyeditor/src/buttons/ez-btn-imagevariation.js#L34-L36. I’m not sure how to do this in the “clear” way (I’m backend developer :wink:)


#4

Salut @adam.wojs,

I react with a little delay :slight_smile:

It works very well.
a big thank you.