jquery.pikit

Generate placement image for your website through many different placeholder services.

Getting Started

Pikit works by inserting an image into a container that you have already created. For this example, we are going to insert a placeholder image into each of the child divs of the .pikit-container:

<div class="pikit-container">
  <div></div>
  <div></div>
  <div></div>
</div>

.pikit-container div {
  height: 200px;
  width: 200px;
}

$(".pikit-container").children().pikit()

This will result in the following:

<div class="pikit-container">
  <div style="height: 200px; width: 200px;"><img class="pikit" src="http://placedog.com/200/200"></div>
  <div style="height: 200px; width: 200px;"><img class="pikit" src="http://placebox.es/200/200"></div>
  <div style="height: 200px; width: 200px;"><img class="pikit" src="http://dummyimages.com/200x200"></div>
</div>

Note that the image will receive the same height/width dimensions as its parent container. It will also insert those dimensions directly into the parent containers inline style, the reasoning for this is in case you set a specific or random height then you will want the parent to be adjusted as well.

Another thing to note is that when no options are passed to pikit then it will use a random placeholder service by default.

Pikit Options

All of these are the default options.

$(".pikit-container").children().pikit({
  service: 'random',

  // Formatting
  height: null,
  width: null,
  format: null,
  sizeKeyword: null,

  // Colors
  greyscale: false,
  backColor: null,
  foreColor: null,

  // Customize
  customText: null,

  // Specify
  category: null,
  variant: null
})

Option	Description	Type	Acceptable Values	Default
service	Specify the placeholder service used. Check out the services table below to see how to reference different services.	String	Any Pikit reference to a service, such as 'fpoimg' or 'placekitten'	'random'
height	Set the height of the image	Integer or Array	Any integer above 1, or pass an array to get a random number between to endpoints such as [200, 400]. Leaving it at the default null will automatically get the height of the parent container.	null
width	Set the width of the image	Integer or Array	Any integer above 1, or pass an array to get a random number between to endpoints such as [200, 400]. Leaving it at the default null will automatically get the width of the parent container.	null
format	Set the format of the image	String	It depends on the website, usually it is 'jpg' or 'png', etc	null
sizeKeyword	Set the dimensions of the image based on a textual description	String	It depends on the website. For now only the DummyImage service supports it, and an example is 'skyscraper'	null
greyscale	Should the image be in black and white?	Boolean	True / False	false
backColor	If the service is generating an image on the fly, specify the background color.	HEX code without # OR 'random', 'pastel', 'dark'	000000, 9900FF, etc	null
foreColor	If the service is generating an image on the fly, specify the foreground color (usually the text color).	HEX code without # OR 'random', 'pastel', 'dark'	000000, 9900FF, etc	null
customText	If the service is generating an image on the fly, specify the custom text to be inserted into it.	String	Any string will do!	null
category	Some services let you specify a category of images.	String	Depends on the service. Check out their websites.	null
variant	Some services let you specify a variant which changes the image even if its in the same category.	Integer	Any integer >= 1	null

Services

Name	Website	Pikit Reference	Available Attributes
DummyImage	http://dummyimage.com/	dummyimage	backColor, foreColor, format, customText, sizeKeyword
DummyImages	http://dummyimages.com/	dummyimages	backColor, foreColor, format, customText
FPOImg	http://fpoimg.com/	fpoimg	customText
Instasrc	http://instasrc.com/	instasrc	greyscale
Ipsum Image	http://www.ipsumimage.com/	ipsumimage	backColor, foreColor, format, customText
Lorem Pixel	http://lorempixel.com/	lorempixel	category, greyscale, variant
Nosrc	http://nosrc.net/	nosrc	none
Placeboxes	http://placebox.es/	placeboxes	backColor, foreColor, customText
Place Dog	http://placedog.com/	placedog	greyscale
Placeholdit	http://placehold.it/	placeholdit	backColor, foreColor, format, customText
Placeholdus	http://placehold.us/	placeholdus	none
PlaceKitten	http://placekitten.com/	placekitten	greyscale
PlacePuppy	http://placepuppy.it/	placepuppy	none
PlaceSheen	http://placesheen.com/	placesheen	none
PlaceZombies	http://placezombies.com/	placezombies	greyscale
NiceNiceJpg	http://nicenicejpg.com/	nicenicejpg	none