Search code examples
javascriptjavagoogle-apps-scriptgoogle-sheetsgoogle-slides-api

Aligning text in the center of a text box using Google app script for slides

I am working on a project that requires text to be aligned in the center of a text box on a google slide, using a google app script.

The goal is to pull text from a google worksheet. Then pull an image from google drive and add the pulled worksheet text, by adding both to a google slide with the resolution of the image. After this, export the slide to create a new image, and add this to google drive.

The code does work, which is great, but when I try to align the pulled texts in the middle of their textboxes, I keep getting an error. Hope someone can help me out.

I used the libraries: "DocsServiceApp", "ImgApp", and have the "slidesAPI" enabled

`function testinsertTextOnImage() {
const fileId = "1PU6GexJ....tiNkwRum2xYxYP";
const sheetId = "1_5bZsO6YJb8eS....9sgIao9C1uYxt_z2GBDjw";
const columns = \["A", "B", "C"\];

const sheet = SpreadsheetApp.openById(sheetId).getSheetByName("Blad1");
const lastRow = sheet.getLastRow();
const texts = columns.map((column) =\> sheet.getRange(column + lastRow).getValue());

const textProperties = \[    {      text: texts\[0\],
left: 500,
top: 475,
width: 880,
height: 80,
fontSize: 150,
fontFamily: "Tangerine",
alignment: SlidesApp.ParagraphAlignment.CENTER,
},
{
text: texts\[1\],
left: 320,
top: 660,
width: 1000,
height: 120,
fontSize: 30,
fontFamily: "Questrial",
alignment: SlidesApp.ParagraphAlignment.CENTER,
},
{
text: texts\[2\],
left: 920,
top: 830,
width: 180,
height: 60,
fontSize: 30,
fontFamily: "Questrial",
alignment: SlidesApp.ParagraphAlignment.CENTER
},
\];

const file = DriveApp.getFileById(fileId);
const blob = file.getBlob();
const size = ImgApp.getSize(blob);

const presentation = {
title: "Result",
width: { unit: "pixel", size: size.width },
height: { unit: "pixel", size: size.height },
};
const presentationId = DocsServiceApp.createNewSlidesWithPageSize(presentation);

const slides = SlidesApp.openById(presentationId);
const slide = slides.getSlides()\[0\];
slide.insertImage(blob);
textProperties.forEach(({ text, left, top, width, height, fontSize, fontFamily, alignment }) =\> {
const textBox = slide.insertTextBox(text, left, top, width, height);
const textStyle = textBox.getText().getTextStyle();
textStyle.setFontSize(fontSize).setFontFamily(fontFamily);
textBox.getText().getParagraphs()\[0\].setAlignment(alignment);
});
slides.saveAndClose();

const obj = Slides.Presentations.Pages.getThumbnail(
presentationId,
slide.getObjectId(),
{
"thumbnailProperties.thumbnailSize": "LARGE",
"thumbnailProperties.mimeType": "PNG",
}
);
const url = obj.contentUrl.replace(/=s\\d+/, "=s" + size.width);
const resultBlob = UrlFetchApp.fetch(url)
.getBlob()
.setName("Result\_" + file.getName());
DriveApp.createFile(resultBlob);
DriveApp.getFileById(presentationId).setTrashed(true);
}`
Solution

  • In your script, please modify it as follows.

    From:

    textBox.getText().getParagraphs()\[0\].setAlignment(alignment);

    To:

    textBox.getText().getParagraphStyle().setParagraphAlignment(alignment);

    Note:

    • I thought that const texts = columns.map((column) => sheet.getRange(column + lastRow).getValue()); can be modified to const texts = sheet.getRange(sheet.getLastRow(), 1, 1, 3).getDisplayValues()[0];.

    • In your script, it seems that [ and ] are escaped. I'm worried about this. So, I would like to add the modified script as follows.

    function testinsertTextOnImage() {
  const fileId = "###";
  const sheetId = "###";

  const columns = ["A", "B", "C"];
  const sheet = SpreadsheetApp.openById(sheetId).getSheetByName("Blad1");
  const lastRow = sheet.getLastRow();
  const texts = sheet.getRange(sheet.getLastRow(), 1, 1, 3).getDisplayValues()[0];
  const textProperties = [
    { text: texts[0], left: 500, top: 475, width: 880, height: 80, fontSize: 150, fontFamily: "Tangerine", alignment: SlidesApp.ParagraphAlignment.CENTER, },
    { text: texts[1], left: 320, top: 660, width: 1000, height: 120, fontSize: 30, fontFamily: "Questrial", alignment: SlidesApp.ParagraphAlignment.CENTER },
    { text: texts[2], left: 920, top: 830, width: 180, height: 60, fontSize: 30, fontFamily: "Questrial", alignment: SlidesApp.ParagraphAlignment.CENTER },
  ];
  const file = DriveApp.getFileById(fileId);
  const blob = file.getBlob();
  const size = ImgApp.getSize(blob);
  const presentation = {
    title: "Result",
    width: { unit: "pixel", size: size.width },
    height: { unit: "pixel", size: size.height },
  };
  const presentationId = DocsServiceApp.createNewSlidesWithPageSize(presentation);
  const slides = SlidesApp.openById(presentationId);
  const slide = slides.getSlides()[0];
  slide.insertImage(blob);
  textProperties.forEach(({ text, left, top, width, height, fontSize, fontFamily, alignment }) => {
    const textBox = slide.insertTextBox(text, left, top, width, height);
    const textStyle = textBox.getText().getTextStyle();
    textStyle.setFontSize(fontSize).setFontFamily(fontFamily);
    textBox.getText().getParagraphStyle().setParagraphAlignment(alignment);
  });
  slides.saveAndClose();
  const obj = Slides.Presentations.Pages.getThumbnail(
    presentationId,
    slide.getObjectId(),
    { "thumbnailProperties.thumbnailSize": "LARGE", "thumbnailProperties.mimeType": "PNG" }
  );
  const url = obj.contentUrl.replace(/=s\\d+/, "=s" + size.width);
  const resultBlob = UrlFetchApp.fetch(url).getBlob().setName("Result_" + file.getName());
  DriveApp.createFile(resultBlob);
  DriveApp.getFileById(presentationId).setTrashed(true);
}

    Reference: