Photography Technology

Using Text Expander For Web Developers: Unsplash Placeholder Images

Text Expander for Unsplash Placeholder Images blog post image

Welcome back, this is the fourth post in my series about Text Expander. If you haven’t already read the previous entries, please click here to see them all!

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.

Animated GIF showing how to insert image using text expander


 
 

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.

Unsplash Source instructions 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:

https://source.unsplash.com/random/WIDTHxHEIGHT

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:

Animated GIF showing how to insert images using text expander

 

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.

Unsplash

<img src="https://source.unsplash.com/random/%filltext:name=width:default=250%x%filltext:name=height:default=250%" alt="placeholder">

Fill Murray

<img src="http://fillmurray.com/%filltext:name=height:default=250%/%filltext:name=width:default=250%" alt="placeholder">

placebear

<img src="http://placebear.com/%filltext:name=height:default=250%/%filltext:name=width:default=250%" alt="placeholder">

placebeard

<img src="http://placebeard.it/%filltext:name=height:default=250%/%filltext:name=width:default=250%" alt="placeholder">

Steven SeGALLERY

<img src="http://stevensegallery.com/%filltext:name=height:default=250%/%filltext:name=width:default=250%" alt="placeholder">

Placehold.it

<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.

And as always, if you have any questions, please leave a comment below, or reach out to me to me via email or twitter!

0 comments on “Using Text Expander For Web Developers: Unsplash Placeholder Images

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: