Edit on GitHub

Custom Icons & Tooltips for Documents/Assets & Data Objects

Pimcore allows to dynamically define custom element icons & tooltips in the element tree. In addition, the icon of the editor tab can be changed.

Support for the event-based approach for Documents, Assets and Data Objects is available since release 6.4.1 If you you are looking for the (deprecated) pre 6.4.1 way (supporting Data Objects only) read these instructions.

Properties that can be changed

  • Element CSS class
  • Element icon
  • Element icon class
  • Tree node tooltip

How to override the default style

The basic idea is to provide one's own implementation of Pimcore\Model\Element\AdminStyle.

This can be achieved by attaching a listener to the AdminEvents::RESOLVE_ELEMENT_ADMIN_STYLE event.

Example:

\Pimcore::getEventDispatcher()->addListener(\Pimcore\Event\AdminEvents::RESOLVE_ELEMENT_ADMIN_STYLE,
    function(\Pimcore\Event\Admin\ElementAdminStyleEvent $event) {
        $element = $event->getElement();
        // decide which default styles you want to override
        if ($element instanceof \AppBundle\Model\Product\Car) {
            $event->setAdminStyle(new \AppBundle\Model\Product\AdminStyle\Car($element));
        }
});

Example: Custom Icon for the Car DataObject

See demo site for comparison.

This will change the Car icon depending on the car type:

namespace AppBundle\Model\Product\AdminStyle;

use AppBundle\Website\Tool\ForceInheritance;
use Pimcore\Model\Element\AdminStyle;

class Car extends AdminStyle
{
    /** @var ElementInterface */
    protected $element;

    public function __construct($element)
    {
        parent::__construct($element);

        $this->element = $element;

        if ($element instanceof \AppBundle\Model\Product\Car) {
            ForceInheritance::run(function () use ($element) {
                if ($element->getObjectType() == 'actual-car') {
                    $this->elementIcon = '/bundles/pimcoreadmin/img/twemoji/1f697.svg';
                }
            });
        }
    }
}

Result:

Class Icons

Example: Custom Tooltips

It is possible to define custom tooltips which are shown while hovering over the element tree.

The example outlines how to provide a custom tooltip for Car objects.

    /**
     * @inheritdoc
     */
    public function getElementQtipConfig()
    {
        if ($this->element instanceof \AppBundle\Model\Product\Car) {
            $element = $this->element;
            return ForceInheritance::run(function () use ($element) {
                $thumbnail = null;
                $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();
    }

Result:

Class Icons

Example: Custom Style for Assets

This will display the modification date and image size as additional information. Besides that, it shows a different icon for all assets starting with a capital 'C' in their key.

namespace AppBundle\Model\Product\AdminStyle;

use Pimcore\Model\Asset;
use Pimcore\Model\Element\AdminStyle;

class AssetEventStyle extends AdminStyle
{
    public function __construct($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" . '</p>'
                ];
            }
        }
    }
}

Class Icons