Building a Mac Shortcut To Add a Border And Caption To a Photo

Learn some Shortcuts programming by following along and building a Shortcut that adds a border and caption to a photo file and saves it as a new file.
You can also watch this video at YouTube (but with ads).
Video Transcript: Hi, this is Gary with MacMost.com. Let me show you how to create a shortcut to add a border and a caption to a photo.
MacMost is brought to you thanks to a great group of more than 1000 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 let me show you how to create a rather complex shortcut on your Mac that is going to do several things. It's going to place a border around a photo and it is going to make that border with rounded corners. Then, in addition to that, it's going to add a caption or some text to the photo. Then create a new image from that. There are a lot of steps here and the goal isn't necessarily to just use the shortcut as is. The idea here is to learn a lot of different things about using shortcuts and then use those parts in shortcuts that you create yourself. 
So let's create a new shortcut here. I'm just going to call this Border & Caption. Now let's start off simply by bringing in an image and doing something easy with it. Masking it so it has rounded corners. So what we're going to do is resize the image. Let's search for Resize and there is Resize Image. I'm going to drop that in. Let's resize the image and which image? Well we're going to click here and then select Shortcut Input. Then it is going to receive any input from, and we're going to change any (we're going to clear that) to just Images. Then we're going to resize it to 1280, a good size for uploading, by whatever the height would be if the width is 1280. Then let's Mask it. So we look for Mask Image here, we'll use this one. Put it at the bottom. Mask Resized Image. You can see the line here takes the output of this and puts it right in there, with what?, Rounded Rectangle Shape. We can mask with different things. Let's use Rounded Rectangle, Show More. Let's do a corner radius of 40 pixels. One last thing I want to do here is, Under Receive Images, if there is no input we're going to change it to Ask For. 
So we have a lot of options here. One is that you can run this shortcut on an existing file that is an image. Or if you run it by itself and it's simply going to ask for an image. I'll run it and you can see it's going to come up asking for something here. Let's just select this image here. Now we can see the result. Notice how its got rounded corners now and also you can't really tell here but its now 1280 wide. The original image is much larger. 
Now what we would like to do is add a border around this image. The way to add a border is a little counterintuitive. You don't actually put a border on top of the image. Instead you create another image that is a little bit larger than this image. You have that be a solid color. Then you put this image on top of that. So a little bit of that solid color image shows around the edges. So in order to do that it gets a little tricky. The first thing we want to do is we want to use an Image Editing App. I'm going to use Pixelmator Pro but you can use just about anything, Seashore, PhotoShop, whatever you want, and create an image that is just one pixel. So here I'm going to create something that's width 1, height 1, there's a tiny little image there. I'm going to zoom in here. I'm going to draw there. I'm going to set a color to black, opacity at 100%. I'm going to set the brush to Basic, Hard like that. Now when I draw, I draw a black pixel. Now I'm going to do Export for Web where I have a lot more control. Format is going to be png, you can see 69 bytes, and I'm going to Export. I'm going to call is Pixel.png. Now I've got this image here that's just 1 pixel. I can do Command i on it and see it's only 69 bytes long. Really nice and short. 
Now in order to include that inside the shortcut I need to convert it to a string of characters using something called Base64 Encoding. To do that I can use a variety of different websites that will convert images to Base64 Encoding but I can also do it in shortcuts. I can create a temporary shortcut here and I'm not even going to name this one. Just going to search for Base64, add that. Encode what? Encode the shortcut input. The input I'm going to say, ask for, in that case not just photos but files, here. I'm going to run this. Select the pixel.png and then it gives me the output. I'm going to use QuickLook here so I can easily Copy that. Now back at my main shortcut here I'm going to search for Text, and I'm going to create a Text Action. I'm going to put it up here at the top. Now I'm going to paste that in. So this is that little string produced from that one pixel png. Converted it to Base64. These are the actual bits in that file converted to a text string. I can now use that same Base64 encoding here to Decode the text from this. The result will be that file. 
So by taking this text. Then using this we now have that file inside, imbedded into this shortcut. We can now use that to create another image. So, for instance, if instead of resizing the shortcut input I were to go into here, clear that out and resize the result of the Base64 decoding, make that 1280 by auto-height, which since it is the 1 pixel by 1 pixel square will be 1280 by 1280 and mask that with a 40 corner radius image. What I get now is I get that! I've taken that 1 pixel expanded it to 1280 by 1280 and rounded the corners. So what I want to do is do both of those things. I want to create an image from this one pixel that's a little bit bigger than the image taken from the shortcut input. So let me Undo here to get back to where we're actually doing this with the input here. I want to make one change here. Instead of if there is no input ask for photos, I'm going to say ask for files. You can do either one but in this case now when I select this it's going to ask for file. I can select this image here, which is just an image file on my Desktop and it will then resize it to 1280 and put the rounded edges there. 
Now all I need to do is take this 1 pixel image and make that an image that's slightly bigger than this one and put it behind it. So to do that I'm going to get the Shortcut Input and I'm going to find the width and the height. Now I'm going to search for Image Details and there's get Details of Images. I'm going to put that underneath here so it is going to feed the shortcut input into this. What I want to get? I want to get the width from the shortcut input. Then I'm going to do a calculation on it. So I'll search for Calculate and I will put that under there and say, width plus and let's add 20 pixels to it. So the result of this is the width plus 20 pixels. Let's go and get image details again and let's get the height from, and we will select Magic Variable and use this file here. So get the height from the same file. Let's do the same calculation and add 20 to that. So the result of this is the width + 20 and the result of this is the height + 20. 
Now let's move this here below this. So I'm going to move Text there below and Decode below. So it will get these numbers first. Now it's going to create that one pixel image. Now let's resize it here and let's resize the result of this to, and instead of 640 here I'm going to Control Click on it, insert variable, select the variable, and the width should be the result of this calculation, 20 pixels greater than the width of the image. Let's do the same thing here. Insert variable, select variable, and the 20 pixels greater than the height. Now we have a black image at the same size plus 20 pixels as the original image. Now let's resize that again because remember we're taking the original image and we're making it 1280 across. So we've got the width and height kind of ratio correct but now let's resize to 1280 times auto-height. It's going to be the same size as this image. So let's make this image, instead of 1280 across, 1260 across. So shrink it just a little bit more to give it room for the border to show around the edges. In addition let's create a variable. So I'll search for Variable and I'll set variable. I'm going to create a variable that's going to contain that black box here. We'll call it NewPic and it's going to get the results here. So now NewPic has a black image that is a little bit bigger than the resized actual image there. 
Now we just need to combine them. We're going to take this image here, the actual photo, and place it on top of NewPic. That's called Overlay. So we'll do Overlay image. I'm going to double-click to add to the bottom here. So what we want to do is overlay the result of this, the actual image itself, on top not of itself but instead on the variable NewPic on that slightly larger black image. Now let's click on the Show More here. Turn off Show Image Editor and instead we're going to position it at the center. Let's run this and we can see the result here. You can see the picture has been rounded here and placed on top of this all black image there. So we get this border. Let's round the border itself so we don't get these corners there. So we will do that with a Mask here, mask image, and just before we put it in the variable there, after the resize. This is after resizing it to 1280 will mask the resized image with rounded rectangle. We can do a corner radius here. Now when we run it we can see we get rounded for both the background that becomes the border and the image itself. Now since they are different widths it definitely pays to work with the rounding. So have a larger number for the border and a smaller number for the inside. We can go here to Corner Radius and let's change that to something like 60 and now when we run it we can see that maybe that went a little bit too much. So we have to keep playing with it. Let's make it 50 here and that looks pretty good right there for a nice border. 
Now, of course, you can change to width of the border pretty easily. I've got the background black image set to 1280 and then the image itself set to 1260. If I wanted to make a thicker border I could do something like, you know, 1220 here and now the photo itself will be smaller here allowing for more of a border. You can adjust the corners too. 
So next let's add a caption. Let's look for Ask and we'll ask for input here. I have that here at the bottom. Ask for Text with Prompt Caption. We Show More and we set a default answer if we want. Let's look for Overlay. Overlay Text is another option here. I'll double click on that and what text do we overlay? I'm going to Control Click on that and Insert Variable and then use Selected Variable. Make sure we get the right thing to provide input. On what image? It's the output of this. But we haven't stored the output of that anywhere. So let's set a variable there. We'll call this NewPic with Caption. It's the output of this. So now we can Control Click on there and say, Put the Caption on top of the output from this. Then we do At and we'll do bottom center. Show More allows us to see all the different things we can do. We can set the Font size, Alignment, let's Center it. We can set the color. Let's do something brighter. We can do an outline there to make it stand out so a black border around it. Tons of different things that you can set and play around with. You want to do that to get the look that you want. We can even bottom center offset by, you know, 10% here so it is not all the way at the bottom. 
Now let's run this and it's going to ask for an image like before. It's going to ask for a caption. We'll use the default text there. The result is like that. So probably something brighter or maybe we can change this instead of having the border be black let's have the border be white. Now, it looks a little bit better like that. So you can keep playing around with that. So now you've got something here that you can QuickLook like that and you can Share right there from QuickLook so it is already kind of useful. But let's Save it. One way to Save it that's really easy. Let's go to the Settings here and then let's set this up so that it is used as a Quick Action and it provides Output. So the output is actually going to appear as a file. So now let's hide that and let's go here. We can get ride of this pixel now. We're done with it. We have it inside of the shortcut at that Base64 text and we can actually Copy and Paste that and use that in other shortcuts later on. 
Let's take this, I'm going to Control Click on it. Go to Quick Actions. Customize the Quick Actions. We'll see here the Border and Caption are there. So now we can go back into Quick Actions Border and Caption and it's going to take this as the input here. So it is not going to prompt us for it anymore because it has that already. But it is going to prompt us for this. Done. Then the result is going to be Output because we had this provide output checked right there. It's actually going to output. It's going to be an ugly name here because it doesn't know what else to name it so it's actually choosing bytes at the beginning of this file as the name. So at this point you can just, you know, return and name it whatever you want and you've got your finished image here.
But in the interest of learning more about using shortcuts let me show you how to create a file from that automatically. So let's go and look for File Details. Get Details of Files and put that here at the very beginning. So instead of getting File Size let's get the name. The name from the Shortcut Input. We're going to search for Parent, Get Parent Directory. So we'll put that here and Get Parent Directory of what? Let's clear that and instead say Shortcut Input. Get the Parent Directory of Shortcut Input. So we have the name now. We've got Parent Directory. So now all the way at the bottom here you could see that it Stop at Output Image With Text. That we got automatically when we clicked provide output. Let's turn that Off. Instead let's go here and let's make sure this is a good file format. Let's search for jpeg and use Convert Image and put that at the bottom. Convert Image with Text, the result of this, to a jpeg. We can set the quality. Now we have a jpeg there. Let's do Save. We'll do Save File. Add that at the bottom. Save the converted image. Show More. Ask Where to Save. So, this could prompt us where to save and give it a name. That's good. But what if we just said No, we don't want that. Instead here under Subpath we can Control Click there and go in and say that we want to use Select Variable. Go all the way to the top here and get the name. So let's go back in there and we have Name. But I'm going to put dash new after it. like that, -new. So it's going to Save it but with -new. 
Then we're going to change where it saves. Instead of saving to the Shortcut's folder, the default place, we'll Control Click on that and set Magic Variable and use the Parent Directory there. So Save Converted Image to Parent Directory with the same name but -new after it. Now let's give this a try. I'll Control Click on this. Quick Actions. Border and Caption. It's going to ask the first time here if it is okay to access the Desktop Folder since we're saving there. Then it is going to ask for the caption. Then you could see it does everything and Saves it out with the same name -new after it. Very nice. Notice here you get white corners here instead of the transparent ones because jpeg images don't support transparency. So if you need transparency you may not want to convert this to jpeg but instead convert it to png or just leave this out altogether. But the white should work really well in social media sites and such where the background is white anyway. So people won't even notice it. They just get these nice rounded corners and image and whatever text you want. Now you can reuse this over and over again anytime you want to create an image. Make this text smaller and closer to the bottom if you like and it could be captions instead of large text like this. So you can easily and quickly take an image, resize it, put this border around it and add some text to the bottom describing what's in the photo and get this output here that you can then upload or email or do whatever you want with.
I hope you learned a lot of different skills here in making this shortcut. I'll put a copy of the shortcut for you to download at the Post Page at MacMost.com so you can compare it with what you are working on if you are not getting the same results. Thanks for watching.
Download the Shortcut
Comments: 5 Responses to “Building a Mac Shortcut To Add a Border And Caption To a Photo”

3 years ago
Thank you for this great tutorial,
I saved it to my iPhone but I receive a message stating "Get Parent Directory" only works on Mac, is there any way to work around this ?
Gary Rosenzweig
JP: You'll have to come up with another thing you want to do with the result at the end if you want this to work on iOS. Maybe copy to the clipboard, or just save it to the default location (Shortcuts).
fred
Sorry Gary ! Much too complicated for me to follow. I got lost trying follow this and now I am dizzy.
Andrew Wickliffe
2 years ago
Awesome tutorial! Had me overlaying in about 5 minutes! Thanks Gary!
JP (a different one)
Hello! This was beyond amazing!
I've been searching for a way to do this quickly and your video pointed the way! Now one click and I get an awesome border.
After I got this working, I did make a few modifications: I wrapped the main processing in a 'Repeat with each item' block - this lets me select a whole set of images and, with one click, border-ize all of them! It's really something!
Thank you again!!
Comments Closed.
Building a Mac Shortcut To Add a Border And Caption To a Photo

Comments: 5 Responses to “Building a Mac Shortcut To Add a Border And Caption To a Photo”

Welcome to MacMost

Free Weekly Newsletter

MacMost Online Courses

Keyboard Shortcuts PDF

Connect with MacMost

MacMost Sections

Popular Tutorials

Information
