What I am trying to do is create a table in a Google Doc using Google apps script and (1) insert an inlineImage
into a cell (while limiting the size of the image to about 120 pixels wide). Then I would like to (2) insert text into the same cell underneath the image and modify the font size of the text.
I have created a script that is able to do all of these things in a paragraph, so that an image is inserted with text beneath it. However, I need to be able to fit multiple pictures side by side. As I do not think Google Docs supports multiple columns, I was told I could use a table (perhaps with 3 columns) with an invisible border to obtain a similar effect. If there are any suggestions how I could do this differently or any questions, please let me know.
My script takes information and a picture link from a Google sheet and uses them to create a photo directory in a google doc. I am trying to fit more people on one page, so it would be helpful to have 3 pictures side by side.
This is what my script does essentially:
[Image1]
text1
[Image2]
text2
This is what I would like it to look like: [Image1] [Image2] [Image3]
text1 text2 text3
I have inserted the entire script below for convenience (only some parts are relevant to this discussion). If you are at all confused with what I am asking, please let me know. Thank you!
var sheetID = "xxxx"; //spreadsheet
var GDoc = DocumentApp.openByUrl("xxxx");
var body = GDoc.getBody(); //google document body
function loadSheet() {
body.clear(); //deletes previous doc contents so a new photo directory can be made
//load studentSheet
var StudentSheet = SpreadsheetApp.openById(sheetID).getSheetByName('Students');
var studentdata = StudentSheet.getDataRange().getValues();
//make variables to hold data from StudentSheet
for (var studentRowNumber = 1; studentRowNumber < studentdata.length; studentRowNumber++) { //studentdata.length determines speed of program execution
var FirstName = studentdata[studentRowNumber][1];
var LastName = studentdata[studentRowNumber][2];
var Gender = studentdata[studentRowNumber][3];
var School = studentdata[studentRowNumber][4];
var Grade = studentdata[studentRowNumber][5];
var Birthday = studentdata[studentRowNumber][6];
var StudentCellPhone = studentdata[studentRowNumber][7];
var StudentEmail = studentdata[studentRowNumber][8];
var DadFirstName = studentdata[studentRowNumber][9];
var MomFirstName = studentdata[studentRowNumber][10];
var DadLastName = studentdata[studentRowNumber][11];
var MomLastName = studentdata[studentRowNumber][12];
var DadEmail = studentdata[studentRowNumber][13];
var MomEmail = studentdata[studentRowNumber][14];
var DadCellPhone = studentdata[studentRowNumber][15];
var MomCellPhone = studentdata[studentRowNumber][16];
var HomePhone = studentdata[studentRowNumber][17];
var StreetAddress = studentdata[studentRowNumber][18];
var City = studentdata[studentRowNumber][19];
var ZipCode = studentdata[studentRowNumber][20];
var longpictureID = studentdata[studentRowNumber][21];
//verify if there is a picture uploaded for the student, and if there is then insert it in the google doc
if (longpictureID == "") {
Logger.log(FirstName + " " + LastName + ": No picture available");
}
else {
insertImageFromDrive();
}
insertData();
}
}
/** Inserts data from studentSheet variables as a paragraph beneath the image of the student **/
function insertData(){
//insert student info into google doc
var FullName = body.appendParagraph(FirstName + " " + LastName); //combine student's first and last names
//verify that both parents' names are present
if (DadFirstName == "" && MomFirstName !== "") {
//if dad's name is missing
var ParentsText = body.appendParagraph("Parents: " + MomFirstName);
}
else {
if (DadFirstName !== "" && MomFirstName == "") {
//if mom's name is missing
var ParentsText = body.appendParagraph("Parents: " + DadFirstName);
}
else {
if (DadFirstName == "" && MomFirstName == "") {
//if both parent names are missing
var ParentsText = "";
}
else {
//both parent names are given
var ParentsText = body.appendParagraph("Parents: " + DadFirstName + " & " + MomFirstName);
}
}
}
//verify that birthday is given
if (Birthday !== "") {
var BirthdayText = body.appendParagraph("Birthday: " + Birthday);
}
//verify that grade is given
if (Grade !== "") {
var GradeText = body.appendParagraph("Grade: " + Grade);
}
//verify that both parents' phone numbers are present
if (DadCellPhone == "" && MomCellPhone !== "") {
//dad's name is missing
var CellText = body.appendParagraph("Phone: " + MomCellPhone);
}
else {
if (DadCellPhone !== "" && MomCellPhone == "") {
//mom's name is missing
var CellText = body.appendParagraph("Phone: " + DadCellPhone);
}
else {
if (DadCellPhone == "" && MomCellPhone == "") {
//both parent names are missing
var CellText = "";
}
else {
//both parent names are given
var CellText = body.appendParagraph("Phone: " + "Dad - " + DadCellPhone + ", Mom - " + MomCellPhone);
}
}
}
//verify that both parents' emails are present
if (DadEmail == "" && MomEmail !== "") {
//dad's name is missing
var EmailText = body.appendParagraph("Phone: " + MomEmail);
}
else {
if (DadEmail !== "" && MomEmail == "") {
//mom's name is missing
var EmailText = body.appendParagraph("Phone: " + DadEmail);
}
else {
if (DadEmail == "" && MomEmail == "") {
//both parent names are missing
var EmailText = "";
}
else {
//both parent names are given
var EmailText = body.appendParagraph("Email: " + "Dad - " + DadEmail + ", Mom - " + MomEmail);
}
}
}
// modify text attributes
FullName.editAsText().setBold(false).setFontSize(10).setForegroundColor('#000066');
if (ParentsText !== "") {
ParentsText.editAsText().setFontSize(8).setForegroundColor(0, 8, '#FF0000');
}
if (BirthdayText !== "") {
BirthdayText.editAsText().setFontSize(8).setForegroundColor(0, 9, '#FF0000');
}
GradeText.editAsText().setFontSize(8).setForegroundColor(0, 6, '#FF0000');
if (CellText !== "") {
CellText.editAsText().setFontSize(8).setForegroundColor(0, 6, '#FF0000'); //makes first 6 characters red ("Phone:")
}
if (EmailText !== "") {
EmailText.editAsText().setFontSize(8).setForegroundColor(0, 6, '#FF0000');
}
GDoc.appendHorizontalRule(); //not to be used if the text and image are in a table
}
/** Inserts photo of the student from google drive **/
function insertImageFromDrive(){
var shortpictureID = longpictureID.replace('https://drive.google.com/uc?export=view&id=', '');
//(old, new); replace all occurences of old with new in string
var img = DriveApp.getFileById(shortpictureID).getBlob();
var inlineI = GDoc.appendImage(img);
//resizing the image
var width = inlineI.getWidth();
var newW = width;
var height = inlineI.getHeight();
var newH = height;
var ratio = width/height;
if(width>120){
//max width of image
newW = 120;
newH = parseInt(newW/ratio);
}
inlineI.setWidth(newW).setHeight(newH);
}
For this you can create a cell variable as
Row 1 can be images for 3 students.
Row 2 can be the text you want to add.
you can also set the border width to 0.
body.appendTable(cells).setBorderWidth(0);
Hope that helps!