A Script For Adding Borders and Captions To Photos

Automator can be used to script some third-party apps. As an example, here's how to write a script for Pixelmator Pro that adds a border and caption to a photo you select in the Photos app.



Check out A Script For Adding Borders and Captions To Photos at YouTube for closed captioning and more options.
Video Transcript: Hi, this is Gary with MacMost.com. Today let me show you how to use Automator to create a script that puts a border and a caption on a photo.
MacMost is brought to you thanks to a great group of more than 900 supporters. Go to MacMost.com/patreon. There you can read more about the Patreon Campaign. Join us and get exclusive content and course discounts.
So one of the great things about automation scripting on a Mac is that a lot of third party apps buy into it as well. For instance, the third party app Pixelmator Pro, which is probably the most popular photoshop alternative on the Mac, can be scripted using either AppleScript of JAVAscript in Script Editor or Automator. So let me show you an example that will take a photo in the Photos app and then bring it into Pixelmator Pro and then add a caption and a border around it saving it back to Photos.
Here I'm using the most recent version of Pixelmator Pro 2.0.6. Now actually I mostly wrote the script originally in Script Editor because it's so much easier to work in Script Editor than Automator. So I created a new document here and I set it to JAVAscript rather than AppleScript. Now to see what Pixelmator Pro can do you can go and open up its dictionary in Script Editor, another thing you can't do in Automator. So here under File choose Open Dictionary and you're going to get this list of all these available dictionaries based on what apps you have installed. So if I scroll down to Pixelmator Pro and choose it, it will open up the dictionary with all of the syntax and commands for Pixelmator Pro. Now unfortunately it gives examples only in AppleScript. So here I have it set to AppleScript and lets say I go in the Pixelmator Pro Suite and I look at something like a Text Player which we're going to need to add captions. You could see it gives you the AppleScript syntax and the example in AppleScript. If I switch to JAVAscript then I could do the same thing. Now I'll see the actual JAVAscript properties but unfortunately, the example script is still going to be in AppleScript. So I have spent a lot of time translating everything from AppleScript to JAVAscript. It's not always obvious how to do that. But I'm going to show you my result in JAVAscript and hopefully it will help you out when using JAVAscript instead of AppleScript.
So let's start out here in Photos and I'm going to edit this photo in an external editor. Now you can do that by going to Image, and then Edit With. If you pick Pixelmator Pro as your external editor then it will open it up in Pixelmator Pro and any changes you make there and save will then go back into Photos. So I'll select Pixelmator Pro. It will launch it and open that up. All I need to do now, for instance, is put a caption here. So I'll add some text and let's say put it down here in the bottom left hand corner. If I do Save and I switch to Photos you could see that it updates the photo in here. But I could easily go to Edit and then Revert to Original to revert. Now another thing that happens is since I've chosen Pixelmator Pro it will now appear as the default for opening up an image in an external editor. So I could go to Image and then Edit With and notice it's at the top now and the keyboard shortcut is Command Return. So all I need to do is select a photo, Command Return, and I'm editing it in Pixelmator Pro. But If I want to add a caption I have to add a text box, add the text, style it, maybe make it white text with a dark shadow. If I want to do a border I need to extend the image a little bit, a few pixels on every side. Add maybe a background behind it so you see maybe a black border go around it. It's a lot of steps. It would be great to be able to automate that in Automator. So let's start off by doing just that.
If we use Command Return let's have a script that will then do all of that in one step. So in Automator I'm going to choose a QuickAction. That way I'll be able to access it from the Menu Bar. Now the QuickAction is just really going to have one thing in it. Run JAVAscript. I'm going to put that in here and that's all I need. I don't need to access anything else. So I can focus on writing my script here. So now I pasted in the script so we can quickly go through it and see what it does. This isn't the final script. This is just the part of the script that does things inside of Pixelmator Pro. We'll be adding more to the beginning and end before we're done. So the first thing we're going to do is grab the app, Pixelmator Pro, and store it in a variable so we can easily tell the app what to do. Now we're going to prompt for the caption. So you can type whatever the caption is. It's going to throw up a little box that asks you for some text. It's going to store that text in the variable caption text. Next we're going to set some things up. Let's set the border width to be 20. So we create our own variable in this way instead of hard coding 20 pixels everywhere in the script. We have one place where it exists. If we want to change it to 10 pixels we can easily just change it here. Now we're going to get the document from Pixelmator Pro. It's important that Pixelmator Pro not have any other documents open. We're going to assume that there's just one document open. You've opened up Photos. You've gone to Edit Image and that's all that's opened up in Pixelmator Pro. So it's going to grab the first item, the zero index item in the list. So that's the document it's going to use. Then it's going to look at the layers and it's going to grab the first item in the list of layers. If we look at Pixelmator Pro we can see that when we open up a file from Photos it basically has one layer called Background Layer and that's what the photo is on. So we're going to grab this layer here. Then we're going to get the width and height of that layer. So the width and height of the total document and we're going to find a new width and a new height by adding the border times 2. In other words border on the left and right and border on the top and bottom. That's why it's times 2.
Now we're going to do a resize canvas command which is a command that's just part of Pixelmator Pro. We found it there in the dictionary for what Pixelmator Pro can do. So we're going to resize the canvas with a new width and a new height taken from the original plus the border on each side. So this increases the space. Now we're going to add a big rectangle and a layer behind the photo. This will make the border. So we create a new border layer, and this took a while to figure out how to do, we're just using something called Rectangle Shape Layer creating it the new width and the new height and size and then we're going to add it to the layers, so it's behind what's there and set the fill color to black. 0,0,0, represents red, green, blue and all zeroes means the color black. Now we're going to create the text caption. So for that instead of creating the rectangle shape layer we'll create a Text Layer and we use the caption text from the prompt. Then we'll add that as a layer as well. Instead of pushing using the Push Command we're going to use Unshift. They are the opposites of each other. One puts the layer in the front and the other puts the layer in the back. So Unshift allows us to put the caption in front of everything whereas push allowed us to put the background behind everything. Then the rest is going to be adjusting the caption. So here we set the font color and size. We get the content of the text caption layer, so in other words the Rich Text that's in there and we set the font, color, and size instead of 000 for the color we use the maximum value, 65535 for each of those which will give us white instead of black. Then we're going to use a different font. Set your own font here. I'm choosing one that I had that I think looks good but you'll probably want to choose something else.
Then the size, I want to make that adjustable because you could have old photos that are like 2000 pixels wide and new photos that are 4000 pixels wide. As cameras evolved and iPhone evolved the pictures got higher resolution and you probably want to set the font size based on the width of the actual photo. So I took the width and divided by 20. So something that's higher resolution the font will be bigger and it needs to be to be relatively the same size. You're going to want to adjust this as well. That 20, if you thing the font is too big you're going to want to make this number larger to divide it by a larger amount. So try 30. If you want the font to be bigger maybe make it 10. So play around with this number to get things right for you.
Now we need to reposition the caption because it's going to appear in the middle of the screen. So we're going to set the position here and we have to give it a X and Y value. We'll start with the border width for the X value. So move it over so it's not going to be on the border. Then add 1% of the photo width. So 1% more margin in. Then the same kind of thing here for Y except we want to start with the height. So start at the bottom. Then subtract the border width to move it up and then subtract the height of the caption itself. So it's not the top of the caption that appears just above the bottom but the bottom of the caption that appears just above the bottom. So this combined will basically put the caption at the bottom left hand corner. If you want it at the bottom right hand corner or the top left hand corner you could adjust these numbers as you need. Just experiment around with them. You can see here how to get the height of the caption itself. You know how to get the width and height of the image. You could put whatever numbers you want here to make it appear in any corner you want. Using simply math you could even center it.
The last thing I want to do is I want to have a dark shadow behind the text. So it's going to be white text but what if it's a very light background. You won't be able to see the text. So the first thing I'm going to do is add a stroke so I outline around the text. I'm going to add a stroke of 2 pixels and make it black. So a black outline around white text. That definitely makes it stand out. To add a little bit more I'll have a shadow that's zero distance. It's not going to cast directly underneath the text but if you want to adjust it and have it be a little bit off you put a number here. Then in that case the angle which it is off would be important. Otherwise at zero the angle really doesn't matter. Then the Opacity, like so how dark the shadow is. So I set that to 100 to make it as dark as possible.
Now all of this should do what we need inside of Pixelmator Pro. So let's Save this. Let's set this to Window Receives Nothing. Sounds like it should be Window receives image. That's not how it works. You're commanding the entire Pixelmator Pro app. You're not sending it an image to have it send back. We'll keep it in Any Application now. I'll save it Border and Caption. So now let's shrink this window down a bit so we can see Pixelmator Pro underneath and let's Run this script right here. It's going to prompt us for something since we asked for Pixelmator Pro to send the prompt makes Pixelmator Pro jump to the front. So now we can put whatever caption we want in here. Then we're going to press OK and watch it do each of the things I talked about. So you can see here it added a border. Let me shrink this a little bit. You could see the black border around it now. It put the text there. It's got that outline. It's got a shadow. I moved it to the bottom left hand corner. It's all taken care of. Now this may be all that you need. You could go to Edit in Pixelmator Pro. Then go and use the script in Services. You could see there's Border and Caption. You can assign a keyboard shortcut to that as well in System Preferences. Now that it's done that you could now go from Pixelmator Pro and Share it. Send it out in an email message. Whatever. Leave the original in Photos alone.
Let's take it a step further and make it as automatic as possible. Okay, so I've added a bunch of stuff to the beginning here. We're going to get the Photos app, which is going to be the app we're currently using. We're going to maybe use that later on to switch back to Photos. Then we're going to get Pixelmator Pro, just like we did before, that's not new. Now we're going to get the number of documents that are currently open in Pixelmator Pro which should be zero but just in case there's already one open we'll get that number here. Then we're going to send the keyboard shortcut command for opening up the image in Pixelmator Pro. So in Photos if we go to Image and then Edit With, since Pixelmator Pro is the app that we last used, it will be Command Return to get to it. It's important that it's there. If there is some other app that's there then this won't work. But we're going to assume you're always using Pixelmator Pro to edit images externally. The script itself is going to actually send that command on its own so you don't have to do multiple steps. Then we're going to loop and look at the number of documents opened in Pixelmator Pro. What happens is when that new document that Photo's opens, the number of documents should increase by one. So it should go from zero to one and then it can continue. Otherwise it's going to delay by a tenth of a second and move again. So it's going to keep checking to see if that new document has been opened. Once it's opened it will continue. Then it continues and does all of the other stuff that we did before. So no change from that point on. So let's Save and test this out.
So here in the Photos app I go to Photos and then Services. There's Border and Caption. Now it's going to ask for permission and it should open it up in Pixelmator Pro and it did!. Then there's the prompt for Caption and it does everything. So now it's at the point where we can go and stop here and Share from here and all that. Or, just Command S, Command W to close and then you could see here in Photos it's all saved. So that gives you a lot of variety. You could do a lot of things. You don't have to save to Photos. But you can if you want. Let's Edit here. Revert to Original. Complete the script by actually having it do some of those things at the end by itself.
So here at the end we're going to add this. All this is going to do is going to use the same method of issuing a keyboard shortcut as before. It's going to do Command S for Save. Then it's going to do a Command W to Close the document in Pixelmator Pro. You probably could use Command Q there to Quit Pixelmator Pro if you want. Now between those I delay for two seconds. Why? Well it doesn't seem to work unless you do that. It seems that if you do a quick Command S and a Command W so fast because it's happening in a script then for some reason it doesn't send the final version of the image to Photos. It just doesn't update. I'm not sure why it does that but delaying 2 seconds seems to do the trick. If you notice that it does do everything it should do inside of Pixelmator Pro but doesn't seem to save the photo maybe you want to increase this time more than 2 seconds. Maybe your machine is a little slower than mine. Then we're going to use the Photos app which we saved from the very beginning and activate Photos. So in other words jump back to the Photos app. So now it should do everything pretty automatically. So in the Photos app we want to caption this Photo. We go to Photos, Services, Border and Caption and it's going to go into Pixelmator Pro. It's going to prompt us. We type the caption. Hit Return. It puts the border. It puts the Caption there. Notice the delay for 2 seconds after Saving. We should be back in the Photos app although it appears Pixelmator Pro is still active. So I hope that part there works a little bit better for you.
Now one thing you might want to change is have this only appear in Photos so it doesn't clutter up the Services menu elsewhere. So I'll choose Photos and Save. So now I won't, for instance, see it here in Automator but I will see it when I'm in Photos. Right there. If I want to make that a keyboard shortcut I go to System Preferences and then Keyboard, Shortcuts, App Shortcuts, Add a New One, set it for Photos and type the menu title exactly as it is, Border and Caption, and do a keyboard shortcut like maybe Control Option Command C, Add, close that and now in Photos you'll actually see, under Services, there's the keyboard shortcut. Let's revert this image here. Done. I'll try it. You can see it works. Just use the test caption there. Close. Now I've got an updated version of that photo in there.
Just a quick review of how you can customize this. You can go in and change the border width to something else like that. You can have the color for the border be something different by using red, green, blue values with zero and 65535. You could change the font. You can make the font bigger or smaller by changing this number here. A bigger number means it's going to be a smaller font, means there is more room for more text at the bottom. You could also play around with the math in here to get it to be at different corners or maybe even centered in the middle. You can change the stroke width and the stroke color. You can increase the distance of the shadow and the angle of the shadow. Also opaque the shadow is. How dark it is. You may want to not even have all this here at the end if you just want to finish up in Pixelmator Pro and then have the option to Share right from there or Save to Photos. So there's a lot you can do by altering this script here.
There's a ton more you can do with Pixelmator Pro. If you go back into Script Editor and look at the dictionary for Pixelmator Pro there are a ton of commands, a ton of different objects if you want to play around with them and you're not that experienced with scripting definitely stick with AppleScript since they have all those examples there. But if you're experienced with scripting, like I am, then of course JAVAscript is definitely the way to go even though it's going to take a little time to figure out how things work. Really there's a ton of stuff you could do taking photos from the Photos app into Pixelmator and using scripts like this to change things, add things. You have access to so much that Pixelmator does that you could really do some interesting things with this.Related Subjects: Automator (43 videos), Pixelmator (11 videos)
Related Video Tutorials:
Adding Captions To Photos Using The Apple Clips App On Your iPhone ― Adding Titles and Captions To Things In Mac Pages ― Building an Automator Script To Snap Windows Into Position ― Add Dates To File Or Photo Names With an Automator Script

Here’s the script:

// remember the Photos app

var photosApp = Application.currentApplication();

// get Pixelmator Pro

var pixelmatorPro = Application('Pixelmator Pro');

pixelmatorPro.includeStandardAdditions = true;

var currentlyOpenedDocuments = pixelmatorPro.documents.length;

// send the keystroke to launch the external editor

var seApp = Application('System Events');

seApp.keystroke('r', { using: 'command down' });

// wait for the document to open

while (true) {

if (pixelmatorPro.documents.length > currentlyOpenedDocuments) break;

delay(0.1);

}

// prompt for the caption

var inputDialog = pixelmatorPro.displayDialog('Caption?', {defaultAnswer: 'Test Caption'});

var captionText = inputDialog.textReturned;

// get variables and calculate new size

var borderWidth = 20;

var doc = pixelmatorPro.documents[0];

var photo = doc.layers()[0]

var photoWidth = photo.width();

var photoHeight = photo.height();

var newWidth = photoWidth + borderWidth*2;

var newHeight = photoHeight + borderWidth*2;

// resize the document, adding room for a border

doc.resizeCanvas({width: newWidth, height: newHeight});

// add rectangle behind photo for border

var borderLayer = pixelmatorPro.RectangleShapeLayer({width: newWidth, height: newHeight});

doc.layers.push(borderLayer);

borderLayer.styles.fillColor = [0,0,0];

// create a text caption

var captionLayer = pixelmatorPro.TextLayer({textContent: captionText});

doc.layers.unshift(captionLayer);

// set the font, color an size of text

var captionContent = captionLayer.textContent;

captionContent.font = 'Gill Sans';

captionContent.color = [65535,65535,65535];

captionContent.size = photoWidth/20;

// position the caption to the lower left

captionLayer.position = {'x':borderWidth + photoWidth * 0.01, 'y':(newHeight - borderWidth - captionLayer.height())};

// add an outline and shadow to the caption

captionLayer.styles.strokeWidth = 2;

captionLayer.styles.strokeColor = [0,0,0];

captionLayer.styles.shadowDistance = 0;

captionLayer.styles.shadowAngle = 315;

captionLayer.styles.shadowOpacity = 100;

// save and close, waiting a little before closing

seApp.keystroke('s', { using: 'command down' });

delay(2);

seApp.keystroke('w', { using: 'command down' });

// go back to the Photos app

photosApp.activate();