Tutorial: Generating Google Slides from images

Goal

Complete the steps here to produce a script that creates a new presentation with individual slides for each image in an array of online images (accessible by URL). This tutorial is the full-length companion to the DevByte video you see on this page.

Time to complete

Approximately 20 minutes

Prerequisites

To install and run this sample, you need the following:

  1. Access to the Internet and a web browser
  2. The URL locations of several images to include in the constructed presentation. You must have read access to the images.

Overview

  1. Create a brand new script.
  2. Add addImageSlide() which creates new slide pages with an image.
  3. Implement the driving application which calls addImageSlide() for each image.
  4. Run the sample; see the results.
  5. Improve the sample code and wrap-up.

Creating our new script

In this tutorial, we're going to keep it simple and build a standalone script (not tied to any particular document). Let's get started by creating a new script. The easiest way to do that is to point your browser to script.google.com. You can also click NEW in your Google Drive user interface and select "Google Apps Script". If you are presented with a welcome screen, click Blank Project.

Replace all lines of code with the following:

var NAME = "My favorite images";
var deck = SlidesApp.create(NAME);

Here, we're naming our slide deck as well as creating a new Google Slides file with the same name. All of the action when interacting with the Slides Service takes place with the SlidesApp object.

addImageSlide() function

Copy these lines for the addImageSlide() function into the code editor just below the two lines of code above that you pasted into the Apps Script editor:

 function addImageSlide(imageUrl, index) {
     var slide = deck.appendSlide(SlidesApp.PredefinedLayout.BLANK);
     var image = slide.insertImage(imageUrl);
 }

This function creates a new blank slide in the presentation and inserts the image into it via its URL. This function is called for each image you have, creating a new slide each time. Note that the image may be automatically resized by the API to fit within a slide page's dimensions.

Like any good developer, it's probably a good idea to save the file. Click File > Save, name your project "Image Slides" (or similar), then OK.

Create the main loop

Now it's time to write our driver app. Add the following main() function to the end of your script file. This function sets the array of image URLs and then creates a new slide in the presentation for each one. We've provided some generic Google images by default, but feel free to replace any and all with your own.

function main() {
    var images = [
        "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png",
        "http://www.google.com/services/images/phone-animation-results_2x.png",
        "http://www.google.com/services/images/section-work-card-img_2x.jpg",
        "http://gsuite.google.com/img/icons/product-lockup.png",
        "http://gsuite.google.com/img/home-hero_2x.jpg"
    ];
    var [title, subtitle] = deck.getSlides()[0].getPageElements();
    title.asShape().getText().setText(NAME);
    subtitle.asShape().getText().setText("Google Apps Script\nSlides Service demo");
    images.forEach(addImageSlide);
}

The image array is followed by a couple of lines which grabs the title and subtitle textboxes from the first slide (index 0), then fills them in with the file name (also the presentation title) and a generic subtitle of, "Google Apps Script Slides Service demo". The last part is a forEach() that loops over each image in the array, creating new slides for each of them.

Run the sample

In the Apps Script editor, click Run > Run function > main.

The first time an Apps Script app is executed, the user is prompted to grant the script access to the services requested. In this case, it is the user's Google Slides presentations:

  1. Click the Review permissions button then select your Google account.
  2. The script requires authorization to run. When presented with such a request, read it carefully then click Allow to authorize the script.

The script executes, adding the requested images as slides in the presentation. By default, each image is placed in the upper-left corner of their respective slides, so you should see something like this:

Improving our script

While we accomplished the original objective of building a slide deck out of a collection of images, you probably want those images centered. So let's do that now.

Replace the current addImageSlide() function with the one below. The first pair of lines is identical to what we had earlier. The magic is in the 7 new lines of code that were added at the bottom:

function addImageSlide(imageUrl, index) {
    var slide = presentation.appendSlide(SlidesApp.PredefinedLayout.BLANK);
    var image = slide.insertImage(imageUrl);
    var imgWidth   = image.getWidth();
    var imgHeight  = image.getHeight();
    var pageWidth  = presentation.getPageWidth();
    var pageHeight = presentation.getPageHeight();
    var newX = pageWidth/2.  - imgWidth/2.;
    var newY = pageHeight/2. - imgHeight/2.;
    image.setLeft(newX).setTop(newY);
}

The first 4 lines of this addendum retrieve the dimensions of both the image as well as the slide page. The final 3 lines calculate the new (X, Y) coordinates then sets them via setLeft() and setTop() so as the image is centered on the page. Now if we run our sample again, all of the images are centered as desired:

Further study and additional reading

Congratulations, you've just completed a quick intro to the Slides Service in Apps Script! If you want lower-level access to manipulating Slides, you may wish to consider the Slides API instead of Slides Service. You can do that from within the Apps Script environment by using the Slides Advanced Service.

If you want to do something similar but outside the Apps Script environment, perhaps with your own development tools, you can accomplish that by using the Slides API directly from a client library. The Google APIs Client Libraries documentation features a list of all supported languages.

If you wish to distribute your app more broadly, consider turning your script into an add-on. To convert this script into an add-on you must add a few things, such as an onOpen() function to create menu items. Add-on scripts also have a few special authorization rules that they need to follow, and even though our sample works fine as a standalone script, it does violate one of those rules. Can you see where? Here's a hint. Once you've hashed out all the add-ons details, you can publish add-ons it!

One additional challenge you can undertake is that instead of building a presentation from images available online, perhaps you want to do so from a specific Google Drive or Drive folder. Take a look at the Drive Service documentation to learn how to use it. You can take that a step further by using the Drive file picker dialog user interface and let your users choose which files to add to the slide show!

Reference

Sample script plus comments

var NAME = "My favorite images";
var presentation = SlidesApp.create(NAME);

/**
 * Creates a single slide using the image from the given link;
 * used directly by foreach(), hence the parameters are fixed.
 *
 * @param {Date} link A String object representing an image URL
 * @param {Date} index The index into the array; unused (req'd by forEach)
 */
function addImageSlide(imageUrl, index) {
    var slide = presentation.appendSlide(SlidesApp.PredefinedLayout.BLANK);
    var image = slide.insertImage(imageUrl);
    var imgWidth   = image.getWidth();
    var imgHeight  = image.getHeight();
    var pageWidth  = presentation.getPageWidth();
    var pageHeight = presentation.getPageHeight();
    var newX = pageWidth/2.  - imgWidth/2.;
    var newY = pageHeight/2. - imgHeight/2.;
    image.setLeft(newX).setTop(newY);
}

/**
 * The driver application features an array of image URLs, setting of the
 * main title & subtitle, and creation of individual slides for each image.
 */
function main() {
    var images = [
        "http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png",
        "http://www.google.com/services/images/phone-animation-results_2x.png",
        "http://www.google.com/services/images/section-work-card-img_2x.jpg",
        "http://gsuite.google.com/img/icons/product-lockup.png",
        "http://gsuite.google.com/img/home-hero_2x.jpg"
    ];
    var [title, subtitle] = presentation.getSlides()[0].getPageElements();
    title.asShape().getText().setText(NAME);
    subtitle.asShape().getText().setText("Google Apps Script\nSlides Service demo");
    images.forEach(addImageSlide);
}

Send feedback about...

Apps Script
Apps Script