Docs

Image Preview widget

Image Preview widget logoThe Image Preview widget is basically an Image, wrapped to a link that points to the full-size image. A user sees a thumbnail, clicks it and sees the image fullscreen.

By default, opening images on the page is managed by the standard script like Lightbox, but you can work with your own script as well. To do that, you may need to edit the insertion template for that widget.

A user can select files using the File Manager add-on and edit images using the Image Editor add-on.

Edit Image Preview screenshot

Configuration

Image Preview is a smaller picture (thumbnail) that links to the original. Therefore you can configure two templates: the template of the thumbnail (the <img> tag) and the template of the wrapping link (the <a href> tag).

In the link template settings, templateLink, there are styles to display a small frame and an attribute that allows certain preview scripts (LightBox, FancyBox and numerous others) to automatically connect to the preview on the page.

The image template templateImage specifies the width. By changing this value you can make all your image previews inserted with a certain predefined size.

The default settings are:

widgets: {
    ImagePreview: {
        templateLink: {
            classes: [],
            styles: {
                "background-color": "white",
                "margin": "3px",
                "outline": "none"
            },
            attributes: {
                "rel": "lightbox"
            }
            },
            templateImage: {
            classes: [],
            styles: {
                "width": "250px",
                "outline": "none"
            },
            attributes: {}
        }
    }
},