Пользовательские иконки и подсказки для документов/ассетов и объектов данных

Pimcore позволяет динамически задавать индивидуальные иконки элементов и подсказки в дереве элементов. Кроме того, можно изменить иконку вкладки редактора.

Свойства, которые можно изменить

• CSS класс элемента
• иконка элемента
• класс иконки элемента
• Всплывающая подсказка к элементу в дереве
• текст элемента

Как переопределить стиль по умолчанию

Основная идея заключается в предоставлении собственной реализации Pimcore\Model\Element\AdminStyle.

Это можно реализовать, добавив слушатель события AdminEvents::RESOLVE_ELEMENT_ADMIN_STYLE.

Пример:

В config/services.yaml добавьте

  App\EventListener\AdminStyleListener:  
    tags:  
      - { name: kernel.event_listener, event: pimcore.admin.resolve.elementAdminStyle, method: onResolveElementAdminStyle }  

Создайте AdminStyleListener в EventListeners

<?php  
  
namespace App\EventListener;  
  
class AdminStyleListener  
{  
    public function onResolveElementAdminStyle(\Pimcore\Bundle\AdminBundle\Event\ElementAdminStyleEvent $event): void  
    {  
        $element = $event->getElement();  
        // решаем, какие стандартные стили хотим переопределить
        if ($element instanceof \App\Model\Product\Car) {  
            $event->setAdminStyle(new \App\Model\Product\AdminStyle\Car($element));  
        }  
    }  
}  
  

Пример: пользовательская иконка для объекта данных Car

Это будет менять иконку Car в зависимости от типа автомобиля:

namespace App\Model\Product\AdminStyle;  
  
use Pimcore\Model\DataObject;  
use Pimcore\Model\Element\AdminStyle;  
  
class Car extends AdminStyle  
{  
    protected ElementInterface $element;  
  
    public function __construct(ElementInterface $element)  
    {  
        parent::__construct($element);  
  
        $this->element = $element;  
  
        if ($element instanceof \App\Model\Product\Car) {  
            DataObject\Service::useInheritedValues(true, function () use ($element) {  
                if ($element->getObjectType() == 'actual-car') {  
                    // необходимо установить это в false, чтобы elementIcon действительно применился
                    $this->elementIconClass = false;  
                    $this->elementIcon = '/bundles/pimcoreadmin/img/twemoji/1f697.svg';  
                }  
            });  
        }  
    }  
}  

Результат:

Пример: пользовательские подсказки

Можно определить собственные подсказки, которые отображаются при наведении на элементы в дереве.

В примере показано, как предоставить пользовательскую подсказку для объектов Car.

    public function getElementQtipConfig(): ?array  
    {  
        if ($this->element instanceof \App\Model\Product\Car) {  
            $element = $this->element;  
  
            return DataObject\Service::useInheritedValues(true, function () use ($element) {  
                $text = '<h1>' . $element->getName() . '</h1>';  
  
                $mainImage = $element->getMainImage();  
                if ($mainImage) {  
                    $thumbnail = $mainImage->getThumbnail("content");  
                    $text .= '<p><img src="' . $thumbnail . '" width="150" height="150"/></p>';  
                }  
  
                $text .= wordwrap($this->element->getDescription(), 50, "<br>");  
  
                return [  
                    "title" => "ID: " . $element->getId() . " - Year: " . $element->getProductionYear(),  
                    "text" => $text,  
                ];  
            });  
        }  
  
        return parent::getElementQtipConfig();  
    }  

Результат:

Пример: пользовательский стиль для ассетов

Это будет отображать дату изменения и размер изображения в качестве дополнительной информации. Кроме того, для всех ресурсов, ключ которых начинается с заглавной буквы 'C', будет показываться другая иконка.

namespace App\Model\Product\AdminStyle;  
  
use Pimcore\Model\Asset;  
use Pimcore\Model\Element\AdminStyle;  
  
class AssetEventStyle extends AdminStyle  
{  
    public function __construct(ElementInterface $element)  
    {  
        parent::__construct($element);  
  
        if ($element instanceof Asset\Image) {  
            if (strpos($element->getKey(), 'C') === 0) {  
                $this->elementIconClass = null;  
                $this->elementIcon = '/bundles/pimcoreadmin/img/twemoji/1f61c.svg';  
            }  
  
            $this->elementQtipConfig = [  
                'title' => 'ID: ' . $element->getId(),  
                'text' => 'Path: ' . $element->getFullPath()  
                        . '<br>Modified: ' . date('c', $element->getModificationDate())  
                        . '<br>Size:  '. $element->getWidth() . 'x' . $element->getHeight() . " px"  
            ];  
        }  
    }  
}