Google script: Replace 2 images in Slides based on URLs saved in Sheets

Question

I’m looking to write a script that will replace two images in Google Slides based on two image URLs saved in adjacent cells (ie B1,B2) in Google Sheets. The images are both on the same slide. I am unsure of how to loop through the images, while simultaneously looping through the Sheets cells (ie so image 1 is replaced based on the URL in cell B1, then image 2 is replaced based on the URL in cell B2). Any help on an example script (I am a newbie!!) would be greatly appreciated.

Answer 1

This is sort of a mish mash of various things. I've been working on it for several hours and I've finally been able to replace several images on a Slide Presentation. But it's not a refined solution by any means.

First function throws up a prompt dialog to get you to enter a Slide Presentation Id. It then goes through all of the slides and all of the page elements looking for page elements of type SlidesApp.PageElementType.IMAGE and when it finds them it records the imageObjectId you will need that for the next function.

function runOne() {
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getActiveSheet();
  var resp=SpreadsheetApp.getUi().prompt("Presentation Id", "Enter Presentation Id", SpreadsheetApp.getUi().ButtonSet.OK_CANCEL);
  if(resp.getSelectedButton()==SpreadsheetApp.getUi().Button.OK) {
    var presentationId=resp.getResponseText();
    var p=SlidesApp.openById(presentationId);
    var slds=p.getSlides();
    var n=1;
    var html=Utilities.formatString('<br /><strong>Presentation Name:</strong> %s<br /><strong>Presentation Id:</strong> %s<br /><hr>',p.getName(), presentationId);
    for(var i=0;i<slds.length;i++) {
      var pageObjectId=slds[i].getPageElements()[0].getParentPage().getObjectId();
      //var imageObjectId=slds[i].getPageElements()[0].asImage().getObjectId()
      if(pageObjectId) { 
        var elementsA=slds[i].getPageElements();
        html+=Utilities.formatString('<br /><strong>Page:</strong> %s <strong>pageObjectId:</strong> %s', i+1, pageObjectId);
        for(var j=0;j<elementsA.length;j++) {
          if(elementsA[j].getPageElementType()==SlidesApp.PageElementType.IMAGE) {
            var imageObjectId=elementsA[j].asImage().getObjectId();
            html+=Utilities.formatString('<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>Page Element:</strong> %s <strong>imageObjectId:</strong> %s', j+1,imageObjectId);
          }
        }
        html+='<br /><hr width="50%" align="left">';        
      }
    }  
    var userInterface=HtmlService.createHtmlOutput(html).setWidth(1000);
    SpreadsheetApp.getUi().showModelessDialog(userInterface, "Slide Image Properties")
  }
}

This function does the actual replacement and it requires the presentationId, the imageObjectId and the replacementUrl. And you will also have to enable the Advanced Slides API. It uses the batchUpdate but I haven't set it up to use more that one request just to keep it simple.

function replaceSlideImage(presentationId,imageObjectId,replacementUrl) {
  var resource={"requests": [{"replaceImage": {"imageObjectId":imageObjectId,"url":replacementUrl}}]};
  Slides.Presentations.batchUpdate(resource, presentationId)
}

So the first function has most of the information you need except for the replacementUrl. The way I get this url is to upload any image that I want to use for pretty anything to the Photos Library. And sometimes the easiest thing to do is to download it to my computer and then upload it to the libary. Once it's in the library click on it and a darkened screen will open up to display the image. At this move over to the image and right click and select "Copy Image Address" and use that for your replacementUrl.

If you make any edits to the Slide Presentation then the imageObjectId's will probabaly change for that page and you may need to update them for this code to work. You can play with all of this on the API Explorer.