Display and change size of image type field figure of a sharepoint list in plumsail form

Forms SharePoint Online
1

I'm a beginner and I have a sharepoint list with an image type field that displays a thumbnail of the figure in the list. How do I display the figure in large size in the form display mode?

2

Hello @Wagner_Vicente,

I apologize for the delayed reply!

To display the thumbnail in a larger size, you can do one of the following:

  1. Add Image control to the form. Then, in the JavaScript editor, add this code to set the control's source image URL:
fd.spRendered((vue) => {
    fd.control('Image1').source  = fd.field('Image').imageUrl;
});

I find this the easiest option.

  1. Change the size with custom CSS and JavaScript.
    Add a class to the Image field, and then add this to the CSS editor:
.my-image a.preview {
     max-width: 400px !important; 
    max-height: 400px !important;
} 
.my-image .preview img {
    width: 500px !important;
    height: 500px !important;
}

Add this code to JavaScript editor to load the higher quality image:

fd.spRendered((vue) => {
    setTimeout(() => {
        const imgHTML = $('.my-image .preview img');
        $(imgHTML).attr('src', fd.field('Image').imageUrl );
     }, 1000);
});