Place-Hold.IT is a server-side image rendering tool that allows web developers and designers alike to dynamically create images to be used as placeholders in a project. The only required parameter is a number for the image's width. Of course, you also have the ability to supply more parameters, such as height, colors, text, file-type and more!
Simply set your image's src attribute to
and you have yourself a nice little placeholder image! Note that if you only supply one number, Place-Hold.IT will make a square. Supply a height as well, like this:
and Place-Hold.IT will make a super awesome rectangle for you!
Be sure to check out the support section below for all of the other parameters you can specify with Place-Hold.IT. Enjoy!
Input your values here, and let us do the magic!
Having trouble getting Place-Hold.IT to do your bidding? Check here for all the supported parameters and correct syntax.
Place-Hold.IT only needs one variable sent to it to work properly, the width (in pixels). If you type in:
You'll get a square image, 300px x 300px. But where's the fun in just square pictures?? Type in:
And get a sweet rectangle-sized picture to put into your work. Specify any size you need!
Place-Hold.IT takes three different color inputs, in this order:
These values are separated by a backslash, and are hex values. If none of these are specified, the image will default to a background of #aaa, a text color #000, and a text shadow color of #eee. When you're done, it should look something like this:
The hex values will also repeat themselves, so you can use shorthand for repeating hex codes (ex. ff > ffffff, e3 > e3e3e3, 103 . 103103, etc).
Need a specific filetype for your awesome placeholders? Place-Hold.IT has support for multiple type of images. Supported types are:
Specific the filetype anywhere you feel like within the URL (Pro Tip: DON"T put it before the colors. After is fine!). At the end, the beginning, in the middle….who knows! When you're done, it should look something like this:
Sometimes you want the client to know for sure they're just seeing a placeholder image until they get you content. No problem! Place-Hold.IT allows you to specify any amount of text you want to place in your image. All you have to do is append your URL with "&text=". Here's a couple of examples of how this would work:
Place-Hold.IT will automatically resize your text to fit the image, so keep that in mind when writing long strings of text on smaller images! Spaces are no problem for most browsers, but it you want to be sure, substitute a "%20" or a "+" in where a space would normally go.
With Place-Hold.IT you can specify a text format for the image's text. The options for this parameter are bold, italic and bold-italic. Specify all or none; the choice is yours! Same syntax applies for these parameters as does for text:
The default font is "PT Sans" (find the free font pack here, it's awesome!)
Sometimes you may want a different font size than the default (12px). To do so, add a "fontsize" param to the URL:
Have an idea for a new feature not listed here? See the contact section below to give me something to code!
Place-Hold.IT was coded by Mark Sost (@marksost). If you'd like to get in touch with him, send him an email here.
This project was inspired by and the code adapted from the very kind Russell Heimlich (@kingkool68) and his Dummy Image project.