A WordPress plugin that provides a shortcode to generate placeholder image using [holder.js](https://github.com/imsky/holder).
| Author: | Del Putnam (profile at wordpress.org) |
| WordPress version required: | 3.3 |
| WordPress version tested: | 3.5.1 |
| Plugin version: | 1.0 |
| Added to WordPress repository: | 25-04-2013 |
| Last updated: | 25-04-2013
Warning! This plugin has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.
|
| Rating, %: | 80 |
| Rated by: | 1 |
| Plugin URI: | http://www.delputnam.com |
| Total downloads: | 1 723 |
| Active installs: | 20+ |
 Click to start download |
|
Using the Shortcode
Using the short code [image-placeholder] without any of the optional attributes will generate a 300px wide by 200px high image using Holder's 'social' theme which defaults to a solid blue background with white text showing the size of the image ('300x200').
Set the width and height
You can set the width and height (in pixels) of your placeholder image:
[image-placeholder width="500" height="100"]Change the colors
You can change the background and text colors:
[image-placeholder colors="#000:#fff"]This will create an image with a black background and white text.
Change the text
By default holder.js uses the size of the image for the text. You can change this:
[image-placeholder text="Foo bar"]Remove the height and width styles
By default, holder.js will add inline styles to specify the height and width of the image. You can remove these:
[image-placeholder auto="true"]Only return the URL
If you want to use the placeholder in your own <img> tag or as a background style, for example:
[image-placeholder url="true"]Add a class
If you want to add a class to the <img> tag that it generated:
[image-placeholder class="my-class"]Change the theme
Holder currently provides three built-in themes: gray, industrial, and social. You can use these in the short code like this:
[image-placeholder theme="industrial"]You can also create your own theme. Each theme defines the foreground color, the background color, the font size and the font family. The easiest approach is to simply include a script tag:
<script>Holder.add_theme("my-theme", { background: "#000", foreground: "#fff", size: 14 })</script>There are a lot of other options for customizing themes.
FAQ