Image Placeholder

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 745
Active installs:20+
plugin download
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