Add a lightbox to the file tree widget

[koertho]

Description

Currently there is no nice way to change the size of the preview images for fileTree widget in the backend. One must override getPreviewImage method, which is not completely possible since it calls a private method.

I see following solutions:

• the easiest one: change the visiblity of getFilePreviewPath to protected to allow proper override of getPreviewImage. Disadvantage: you still need to override the method
• also easy: add protected properties for preview image size so the overriding class need to just override the properties
• allow set preview image size from field config (dca)
• add config variables (or settings) for setting preview image size.
• add a modal/ lightbox to the image

I would also offer doing a PR for this change, but I would like to discuss your preferred solution first.

[aschempp]

@koertho can you explain the use case for changing the image size?

[koertho]

@aschempp : I cite on of my cutomers in german: "Wie kann man das eingefügte Bild vergrößern, um es anzusehen?"

I added an additional option to my possible solution list which may be a better option and was my solution to this problem: open the image in a modal/ lightbox on click. It's easy to implement and needs no additional config. I used the model of the filepicker, not perfect, but enough for my usecase:

class FileTreeWidget extends FileTree
{
    protected function getPreviewImage(File $objFile, $strInfo, $strClass = 'gimage')
    {
        $previewImage = parent::getPreviewImage($objFile, $strInfo, $strClass);

        return '<a 
            href="' . StringUtil::specialcharsUrl(System::getContainer()->get('router')->generate('contao_backend_popup', array(
                'src' => base64_encode($objFile->path)
            ))) . '" 
            title="' . StringUtil::specialchars($objFile->name) . '" 
            onclick="Backend.openModalIframe({\'title\':\'' . str_replace("'", "\\'", StringUtil::specialchars($objFile->name)) . '\',\'url\':this.href});return false"
            >'.$previewImage.'</a>';
    }

}

[leofeyer]

As discussed in the call, we want to add a default image size in the config.yml and additionally allow to select a different image size in the eval section of the DCA. To prevent these image sizes from being shown in the dropdown menus, we want make the image sizes filterable by tags or add an internal option.

[aschempp]

would it be much simpler just to add a lightbox to the image in the back end, maybe the same we already have in files? This way the image can be seen better everywhere without requiring DCA config.

[leofeyer]

Wouldn‘t that conflict with the drag and drop functionality in e. g. gallery elements?

[koertho]

That is a good point. It works, but the mouse curser now showing a click icon, not the drag icon. Maybe we add an icon for the lightbox like the remove button instead of linking the whole image.