OL Learn

Image layout 3x4

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();
}

Hi, to display 3x4 images per page, you can use imposition.
In the Designer you create a page with a small size containing only 1 image.
Then in the output preset, you select imposition and ask to print 3x4 on a physical page.

Or to create 3x4 page in the Designer, just create a table of 3x4 and put the images within each cell.