Holder renders image placeholders on the client side using SVG.
Used by [Bootstrap](http://getbootstrap.com), thousands of [open source projects](https://github.com/search?q=holder.js+in%3Apath&type=Code&ref=searchresults), and [many other sites](https://search.nerdydata.com/search/#!/searchTerm=holder.js/searchPage=1/sort=pop).
Holder automatically adds line breaks to text that goes outside of the image boundaries. If the text is so long it goes out of both horizontal and vertical boundaries, the text is moved to the top. If you prefer to control the line breaks, you can add `\n` to the `text` property:
```html
<imgdata-src="holder.js/300x200/text:Add \n line breaks \n anywhere.">
```
### Custom size
Font size for placeholders is set automatically, however you can set a custom font size by using the ``size`` flag:
```html
<imgdata-src="holder.js/300x200/size:40">
```
### Custom fonts, web fonts and icon fonts
You can set a placeholder's font either through a theme or through the `font` flag:
```html
<imgdata-src="holder.js/300x200/font:Helvetica">
```
Placeholders using a custom font are rendered using canvas by default, due to SVG's constraints on cross-domain resource linking. If you're using only locally available fonts, you can disable this behavior by setting `noFontFallback` to `true` in `Holder.run` options. However, if you need to render a SVG placeholder using an externally loaded font, you have to use the `object` tag instead of the `img` tag and add a `holderjs` class to the appropriate `link` tags. Here's an example:
**Important:** When testing locally, font URLs must have a `http` or `https` protocol defined.
`<object>` placeholders work like `<img>` placeholders, with the added benefit of their DOM being able to be inspected and modified. As with `<img>` placeholders, the `data-src` attribute is more reliable than the `data` attribute.
## Customizing themes
Themes have 5 properties: ``foreground``, ``background``, ``size``, ``font`` and ``fontweight``. The ``size`` property specifies the minimum font size for the theme. The ``fontweight`` default value is ``bold``. You can create a sample theme like this:
```js
Holder.addTheme("dark", {
background: "#000",
foreground: "#aaa",
size: 11,
font: "Monaco",
fontweight: "normal"
});
```
## Using custom themes
There are two ways to use custom themes with Holder:
* Include theme at runtime to render placeholders already using the theme name
* Include theme at any point and re-render placeholders that are using the theme name
The first approach is the easiest. After you include ``holder.js``, add a ``script`` tag that adds the theme you want:
```html
<scriptsrc="holder.js"></script>
<script>
Holder.addTheme("bright", {
background: "white", foreground: "gray", size: 12
});
</script>
```
The second approach requires that you call ``run`` after you add the theme, like this:
You can render a placeholder with a random theme using the `random` flag:
```html
<imgdata-src="holder.js/300x200/random">
```
## Fluid placeholders
Specifying a dimension in percentages creates a fluid placeholder that responds to media queries.
```html
<imgdata-src="holder.js/100%x75/social">
```
By default, the fluid placeholder will show its current size in pixels. To display the original dimensions, i.e. 100%x75, set the ``textmode`` flag to ``literal`` like so: `holder.js/100%x75/textmode:literal`.
## Automatically sized placeholders
If you'd like to avoid Holder enforcing an image size, use the ``auto`` flag like so:
```html
<imgdata-src="holder.js/200x200/auto">
```
The above will render a placeholder without any embedded CSS for height or width.
To show the current size of an automatically sized placeholder, set the ``textmode`` flag to ``exact`` like so: `holder.js/200x200/auto/textmode:exact`.
## Preventing updates on window resize
Both fluid placeholders and automatically sized placeholders in exact mode are updated when the window is resized. To set whether or not a particular image is updated on window resize, you can use the `setResizeUpdate` method like so:
```js
var img = $('#placeholder').get(0);
Holder.setResizeUpdate(img, false);
```
The above will pause any render updates on the specified image (which must be a DOM object).
To enable updates again, run the following:
```js
Holder.setResizeUpdate(img, true);
```
This will enable updates and immediately render the placeholder.
## Background placeholders
Holder can render placeholders as background images for elements with the `holderjs` class, like this:
**Important:** Make sure to define a height and/or width for elements with background placeholders. Fluid background placeholders are not yet supported.
**Important:** Some browsers can't parse URLs like `?holder.js/300x200/#fff:#000` due to the `#` characters. You can use `^` in place of `#` like this: `?holder.js/300x200/^fff:^000`.
## Custom settings
Holder extends its default settings with the settings you provide, so you only have to include those settings you want changed. For example, you can run Holder on a specific domain like this:
```js
Holder.run({domain:"example.com"});
```
## Using custom settings on load
You can prevent Holder from running its default configuration by executing ``Holder.run`` with your custom settings right after including ``holder.js``. However, you'll have to execute ``Holder.run`` again to render any placeholders that use the default configuration.
## Inserting an image with optional custom theme
You can add a placeholder programmatically by chaining Holder calls:
The first argument in ``addImage`` is the ``src`` attribute, and the second is a CSS selector of the parent element.
## Using different renderers
Holder has three renderers: canvas, SVG, and HTML. The SVG renderer is used by default, however you can set the renderer using the `renderer` option, with either `svg`, `canvas`, or `html` values.
```js
Holder.run({renderer: 'canvas'});
```
## Using with [lazyload.js](https://github.com/tuupola/jquery_lazyload)
Holder is compatible with ``lazyload.js`` and works with both fluid and fixed-width images. For best results, run `.lazyload({skip_invisible:false})`.
## Using with Angular.js
You can use Holder in Angular projects with [ng-holder](https://github.com/joshvillbrandt/ng-holder).
## Browser support
* Chrome
* Firefox 3+
* Safari 4+
* Internet Explorer 9+ (with partial support for 6-8)
* Opera 15+ (with partial support for 12)
* Android (with fallback)
## License
Holder is provided under the [MIT License](http://opensource.org/licenses/MIT).
## Credits
Holder is a project by [Ivan Malopinsky](http://imsky.co).
