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 (‘300×200’).
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.
Credits
This plugin is merely a WordPress shortcode wrapper for the holder.js library built by Ivan Malopinsky.