Placing Bad

This is a placeholder generator for developers to add to their sites, to help with testing. But what developer doesn't like Breaking Bad.

“I am the one who...adds placeholders to my site”

Quick Start

Use it in your project:

If you know the width and height:

<img src="https://placingbad.com/200/200" />
<img src="https://placingbad.com/width/height" />

If you want a square, just specify the width:

<img src="https://placingbad.com/200" />
<img src="https://placingbad.com/width" />

Available Categories

Categories include characters, locations, blue meth and some hidden gems for the die hard Breaking Bad fans.

For example: 'rock' shows a picture of a very angry Hank. 'Mineral' shows some of the minerals from Hanks collection.

Remember when using the below options to specify both height and width

<img src="https://placingbad.com/width/height/hank" />
<img src="https://placingbad.com/width/height/lab" />
<img src="https://placingbad.com/width/height/marie" />
<img src="https://placingbad.com/width/height/rock" />
<img src="https://placingbad.com/width/height/mike" />
<img src="https://placingbad.com/width/height/saul" />
<img src="https://placingbad.com/width/height/gus" />
<img src="https://placingbad.com/width/height/tuco" />
<img src="https://placingbad.com/width/height/mineral" />
<img src="https://placingbad.com/width/height/jesse" />
<img src="https://placingbad.com/width/height/todd" />
<img src="https://placingbad.com/width/height/skyler" />
<img src="https://placingbad.com/width/height/junior" />
<img src="https://placingbad.com/width/height/walter" />
<img src="https://placingbad.com/width/height/meth" />

<!--'All' will let you get any image from any category-->
<img src="https://placingbad.com/width/height/all" />

Image attributions
View the changelogs

Examples

Customisation

NEW: Extra Options

Placing Bad now supports url parameters for customising your image request.

Available options with their default values are:

desaturate => 100
blur => 10
brightness => 50
color => FF0000
pixelate => 8
sepia (this does not accept any values)

To use a parameter add it to the image url like so:

<img src="https://placingbad.com/width/height/?desaturate" />

You can also set an option for most of the parameters. This is done like so:

<img src="https://placingbad.com/width/height/?desaturate=10" />

You can also chain options together if you would like to customise it more:

<img src="https://placingbad.com/width/height?desaturate=10&blur&color=d2d2d2" />

Other available options include:

'Random' will allow you to set a size and then every time you request the image, it will change.

<img src="https://placingbad.com/width/height?random" />

View the changelogs

Parameter Examples

Install for Sublime

First method:

Sublime Text

  1. Download the file below
  2. Extract it
  3. Save this file in:
    Home Directory > Library > Application Support > Sublime Text 3 > Packages > User

Sublime Snippet

Second method:

New sublime snippet

<snippet>
    <content><![CDATA[
        <img src="http://placingbad.com/${1:200}/${2:200}" />
    ]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>placebad</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>