Navigation Menu

Image Content

Display Image

Using image content type, you can load the image directly to the modal.

Jump to section -

  1. Image parameters
  2. Basic and responsive usage
  3. Using caption for image

Using a TypeScript interface, the image parameters supported by body.imageParams are - 

interface ImageParams {
    url: string,
    alt?: string,
    title?: string,
    caption?: string,
    cssClass?: string,
    inlineStyles?: string,
    captionTemplate?: string,
    captionCssClass?: string,
}
Basic and responsive usage

Using the bare minimum, this is how you load an image - 

 ModalManager.instance.addModal({
    body : {
        contentType : 'image',
        imageParams : {
            url : '/assets/images/svg/1600x900.svg'
        }
    }
});

But, there are some issues! For example, there is padding in body and the image scrolls! Does not look so good. How to fix that? for that we can either set body.noPadding parameter to true or pass a css class that removes padding. Secondly, we can set an aspect ratio on body using aspectRatio. This along with a maxWidth or maxHeight parameter can ensure the image is displayed nicely 


/**
* For images that have width > height
*/

ModalManager.instance.addModal({
    body: {
        contentType: 'image',
        imageParams: {
            url: '/assets/images/svg/1600x900.svg',
        },
        noPadding: true,
        aspectRatio: 16 / 9
    },

    maxWidth : {
        value : 80,
        unit : 'vw'
    }
});

/**
* For images that have width < height
*/


ModalManager.instance.addModal({
    body: {
        contentType: 'image',
        imageParams: {
            url: '/assets/images/svg/900x1600.svg',
        },
        noPadding: true,

    },

    maxHeight: {
        value: 90,
        unit: 'vh'
    },

    aspectRatio: 9 / 16

});
Using caption for image

You can also set image caption. Using imageParams.captionText option. Caption can have htl content content directly using caption parameters. If you want to load caption from a template element, please use captionTemplate parameter. You can also pass css classes to caption using captionCssClass params. 

ModalManager.instance.addModal({
    body: {
        contentType: 'image',
        imageParams: {
            url: '/assets/images/svg/900x1600.svg',
            caption : `Copyright 2025 @ <a href="#">John Doe</a>`,
            captionCssClass  : 'caption'
        },
        noPadding: true
    },

    maxHeight: {
        value: 90,
        unit: 'vh'
    },

    aspectRatio: 9 / 16

});

ModalManager.instance.addModal({
    body: {
        contentType: 'image',
        imageParams: {
            url: '/assets/images/svg/1600x900.svg',
            captionTemplate : `caption-template`,
            captionCssClass  : 'caption'
        },
        noPadding: true
    },

    maxWidth: {
        value: 80,
        unit: 'vw'
    },

    aspectRatio:  16 / 9

});