Google apps script: Insert inlineImage and text into Table Cell and modify text in the cell

2.8k views Asked by At

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

There are 1 answers

0
KRR On BEST ANSWER

For this you can create a cell variable as

   var cells = [['Row 1, Cell 1', 'Row 1, Cell 2', 'Row 1, Cell 3'],
                ['Row 2, Cell 1', 'Row 2, Cell 2', 'Row 2, Cell 3']];
  1. Row 1 can be images for 3 students.

  2. 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!