When developing a website, it is common to consider reserving ad spaces for future use. However, it can be difficult to decide what images to use at the moment. If you don't want the page to look too plain, you can consider using holder.js to generate placeholder images and make the page more visually appealing.

How to Use

First, include holder.js in your webpage:

<script src="https://cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>

Then, use the following code to display the placeholder image. The dimensions (e.g. 300x200) can be adjusted according to your needs.

<img src="holder.js/300x200">

The generated image will look like this:

Customization

holder.js allows you to customize the placeholder images with different styles.

Setting Themes

holder.js provides several built-in themes. You can use the following code to specify a theme (e.g. sky):

holder.js/300x200?theme=sky

The available themes are: sky, vine, lava, gray, industrial, and social. You can also use holder.js/300x200?random=yes to randomly select a theme.

Font and Style Settings

holder.js also allows you to customize the font style, size, background color, foreground color, etc. Here are some examples:

• bg sets the background color: holder.js/300x200?bg=2a2025
• fg sets the foreground color: holder.js/300x200?fg=ffffff
• text customizes the text: holder.js/300x200?text=Hello
• size sets the font size in pt: holder.js/300x200?size=50
• font customizes the font family: holder.js/300x200?font=Helvetica
• align sets the text alignment: holder.js/300x200?align=left

Line Breaks in Text

If you want to display line breaks in the text, you can use \n with a space before and after it. Here is an example:

<img data-src="holder.js/300x200?text=Line One \n Line Two">

For more information and usage instructions, you can refer to the holder.js project on GitHub: https://github.com/imsky/holder