Ok, enough about the basic uses for Text Expander, let’s get into something a bit more advanced, and more specific for web developers!
As a web developer, I often need to insert placeholder images into sites that I’m building, and Unsplash is my favourite place to find them. This is a great use case for Text Expander.
Check this out.
Pretty cool! All I need to do is supply my desired image width and height, and Text Expander creates the HTML code for me!
Let’s have a look at how it’s done.
Text Expander Fill-In Fields
One of the powerful features of Text Expander is fill-in fields. As part of snippets you create, you can have Text Expander pop up and ask for some input, for items that you may want to have variable values.
How we are going to use it here is to prompt us for the horizontal and the vertical dimensions we want for our stock placeholder image.
Over on the documentation page for Unsplash Source, their embed photo service, I see that it needs the URL to be in the format of:
So I need to supply it the WIDTH and the HEIGHT values depending on the image dimensions I want to use.
I open up Text Expander and create a new snippet and then paste in the URL, and add a standard IMG tag around it. Then for the width and height, I replace those with the two fill-in field options, and include default values of 250 for each. You do this through the “Fill Ins..Single-line field” option when creating your snippet.
Here is a quick video of the process:
Here is the actual snippet output for the snippet I showed in my example above:
<img src="https://source.unsplash.com/random/300x300" alt="placeholder">
Some Stock Photo Site Options
As I mentioned, Unsplash is my favourite site to use for stock photography. If you read through the documentation on the Source page I referred to above, you will find other options, if you don’t want to use random images, such as using specific user’s images, specific search terms, a specific image, and others as well.
A few other fun placeholder image site options are Fill Murray, placebear (looks like placekitten and placedog are no longer working), placebeard (wonder if I’m in there somewhere 🤔), or the Steven SeGALLERY. Or if you simply want a nice clean box that shows the image dimensions, there’s always Placehold.
Here is an example of quickly adding three random images from three of these services:
I’ve created Text Expander snippets for each of these services, you can just copy and paste them into your Text Expander and they’ll work right away, you can easily change the default values to whatever you like.
<img src="https://source.unsplash.com/random/%filltext:name=width:default=250%x%filltext:name=height:default=250%" alt="placeholder">
<img src="http://fillmurray.com/%filltext:name=height:default=250%/%filltext:name=width:default=250%" alt="placeholder">
<img src="http://placebear.com/%filltext:name=height:default=250%/%filltext:name=width:default=250%" alt="placeholder">
<img src="http://placebeard.it/%filltext:name=height:default=250%/%filltext:name=width:default=250%" alt="placeholder">
<img src="http://stevensegallery.com/%filltext:name=height:default=250%/%filltext:name=width:default=250%" alt="placeholder">
<img src="http://placehold.it/%filltext:name=width:default=250%x%filltext:name=height:default=250%" alt="placeholder">
That’s all there is to it. Now you have no more excuses to use bad placeholder images in your development sites!
By the way, I’ve recently started uploading images to Unsplash, you can follow me here, and of course I’d also love for you to follow me on Instagram, or view some of my favourite photos that I’ve taken.