Asset (image) preview on Many-To-Many relation?

Hello there,

Would it be possible to extend Pimcore, probably via the Plugin Backend UI, to show image previews in Many-To-Many object field?

  1. Attach a “mouseover” event listener to the Many-To-Many table rows.
  2. Check for “asset” type.
  3. Get ID.
  4. Make an asynchronous call for a thumbnail.
  5. Show the thumbnail.

I could use the “preview” function Pimcore offers on assets for steps 4. and 5., correct?

Or should I just change the field to a gallery? There are two problems with this, a) there are tens of thousands of objects and assets that I would have to copy to a temporary field and then back (the field name has to be preserved), b) I don’t think there are just assets in the Many-To-Many relation.

How would you proceed? Any insight is welcome, thanks!

I have used path formatters to show images in many-to-many relation fields.

Assign a formatter class/service to the field in the class editor. Code for the formatter would look something like this…

class ImageFormatter
{
    /**
     * @param $result array containing the nice path info. Modify it or leave it as it is. Pass it out afterwards!
     * @param ElementInterface $source the source object
     * @param $targets list of nodes describing the target elements
     * @param $params optional parameters. may contain additional context information in the future. to be defined.
     * @return mixed list of display names.
     */
    public static function formatPath($result, ElementInterface $source, $targets, $params) {
        foreach ($targets as $key => $item) {
            if ($item["type"] == "asset" && $item['subtype'] == "image" ) {
                $image = Asset::getById($item["id"]);
                if ($image) {
                    $title = $image->getMetadata('title');
                    if (empty($title) || $title === null){
                        $title = $image->getKey();
                    }
                    $alt = $image->getMetadata('alt');
                    if (empty($alt) || $alt === null){
                        $alt = $title;
                    }
                    $result[$key] = '
                        <div style="height:50px; line-height:50px">                        
                        ' . $image->getPath() . '/' . $image->getKey() . '
                        <img style="max-width:100px;max-height:50px;float:left;margin-right: 5px" src="' . $image->getPath() . '' . $image->getKey() . '" alt="' . $alt . '" title="' . $title . '"/>
                        </div>
                    ';
                }
            }
        }
        return $result;
    }
}
1 Like