I created a template with a page contain variable images. Those image path are from a variable.
I can successfully display the image by two columns (One at left side and one at right side). But i would like to display them by 3x4 in a page. Do anyone know how to do this?
Below is the script of how i display the image.
var field = “”;
var filenames = ;
var ImageName = “”;
if (record.fields[“ImageName”] != “”){
field = record.fields[“ImageName”];
filenames = field.split(‘,’);
for(let i = 0; i < filenames.length; i++){
ImageName = “/Users/Admin/Desktop/DICOM-to-JPG-master/ImageFolder/” + filenames[i].replace(‘"’,‘’);
ImageName = ImageName.replace(‘"’, ‘’);
ImageName = ImageName.replace(‘[’, ‘’);
ImageName = ImageName.replace(‘]’, ‘’);
if(i==0){
builtElement = query(“#ImageID”).attr(“src”, ImageName);
}else{
if(filenames.length % 2 != 0){
//total images is odd
if(i % 2 == 0){
//even
builtElement += query(“#ImageID”).after(‘
’) + query(“#ImageID”).after(‘’);
}else{
//odd
builtElement += query("#ImageID").after('<img src ="' + ImageName + '" align="left" style="width:30%">');
}
}else{
//total image is even
if(i % 2 == 0){
//even
builtElement += query("#ImageID").after('<img src ="' + ImageName + '" align="left" style="width:30%">');
}else{
//odd
builtElement += query("#ImageID").after('<br/><img src ="/Users/Admin/Desktop/DICOM-to-JPG-master/Report Template/whiteline.png" align="left" style="width:100%">') + query("#ImageID").after('<img src ="' + ImageName + '" align="right" style="width:30%">');
}
}
}
}
results.html(builtElement);
}else{
results.hide();
}