Search code examples
phpsymfonypimcore

How to customise the icon of an areablock in Pimcore

The company I work for uses Pimcore 6 to make websites. In the adminpanel while editing a page you can add areablocks to your content. When you click on the plus sign, you can add a new areablock, I have noticed that the areablocks have a random icon next to their name. I thought that this was because the person who created them was too lazy to create or add the right ones.

enter image description here

After looking at the official DEMO on the Pimcore website. I noticed that their areablocks also have random icons.

enter image description here

I was wondering if it is possible to customise these?

After doing some research it seems that this is possible by adding a icon.png into your areablock's folder.

enter image description here

That's what I have tried. But the random icon is still displaying. My custom icon is getting ignored. Anyone any idea what I'm doing wrong?

Solution

  • Pasting the icon into the view is not helpful (or was some wrong information). When you are registering a brick and check the methods of AbstractTemplateAreabrick you will notice that it has some class getIcon(). And this is the method you have to override in case you want to set custom icons.

    The AreabrickInterface defines the method like this:

    /**
 * Icon as absolute path, e.g. /bundles/websitedemo/img/areas/foo/icon.png
 *
 * @return string|null
 */
public function getIcon();

    An absolute image URL is needed. In my case I just do it with base64 .svgs - here is a working example:

    class Accordion extends AbstractAreabrick
{
    /**
     * {@inheritdoc}
     */
    public function getName()
    {
        return $this->translator->trans('Accordion');
    }

    /**
     * {@inheritdoc}
     */
    public function getDescription()
    {
        return $this->translator->trans('for collapsed contents');
    }

    public function getIcon() {
        return "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiBoZWlnaHQ9IjMycHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnIGlkPSJQaWN0dXJlIj48cGF0aCBkPSJNMjguNzEzLDIuNDIySDMuMjg3Yy0wLjU3LDAtMS4wMzcsMC40NjgtMS4wMzcsMS4wMzh2MjUuMDc5YzAsMC41NywwLjQ2NywxLjAzOCwxLjAzNywxLjAzOGgyNS40MjYgICBjMC41NywwLDEuMDM3LTAuNDY4LDEuMDM3LTEuMDM4VjMuNDZDMjkuNzUsMi44OSwyOS4yODMsMi40MjIsMjguNzEzLDIuNDIyeiBNMjYuODIyLDIyLjk3MUg0Ljg3NVY1LjIyMWgyMS45NDdWMjIuOTcxeiIgZmlsbD0iIzUxNTE1MSIvPjxjaXJjbGUgY3g9IjkuMTA0IiBjeT0iOS43NSIgZmlsbD0iIzUxNTE1MSIgcj0iMy4wNDgiLz48cGF0aCBkPSJNMjAuMDAyLDExLjMwMWMtMC41MzYtMC45Ni0xLjQ1My0wLjk4My0yLjAzNy0wLjA1bC0yLjg3MSw0LjU4N2MtMC41ODQsMC45MzMtMS43NDcsMS4yMjktMi41ODUsMC42NTggICBjLTAuODM5LTAuNTcxLTIuMTA2LTAuMzUyLTIuODE4LDAuNDg2bC0yLjg2LDMuMzcxYy0wLjcxMiwwLjg0LTAuMzk0LDEuNTI1LDAuNzA2LDEuNTI1aDE2LjM3OGMxLjEsMCwxLjU2MS0wLjc4NSwxLjAyNC0xLjc0NiAgIEwyMC4wMDIsMTEuMzAxeiIgZmlsbD0iIzUxNTE1MSIvPjwvZz48L3N2Zz4=";
    }
}