The GIFPNG service a cdn image placeholder engine to fill your in-development sites and mockups with real, random images instead of boring gray boxes.
You can use your own images or any freely available creative commons images. Use as many as you like — obviously the more you use, the more random and varied the engine will be. It doesn't matter what size, aspect ratio or orientation you use, PlaceHolder will work out the best fit when generating the placeholder image.
Overview
Basic usage
How does it work? Just put your image size after our URL and you'll get a placeholder.
Size
Size must be the first option in the url. Height is optional, if no height is specified the image will be a square.
Colors
Support for URL slug and parameter type. Colors are represented as hex codes (#ffffff is white). the first color is always the background color and the second color is the text color. The default background color is #cccccc
, default text color is #666666
.
Other than possible values are random
.
Example
Border Parameters
Border width
Sets the border width of the numeric text. The value must be a number greater than 0. The default value is 1
.
Border color
Colors are represented as hex codes. The default value is #7e7e7e
.
Border type
Acceptable operations for border type are: rectangle
, thick
. The default value is thick
.
Example
Text Parameters
Text
The text value to set on the image. This value must be supplied if text is to be rendered. All other text parameters are ignored if this value is not set. we has full support for UTF-8 characters which means appropriate rendering for additional languages and emoji.
Line break
A line break ends the line you are currently on and resumes on the next line. possible values are \n
, \r
, \r\n
.
Text align
The alignment of the text within the image. Possible values are one or more of left
, center
, right
. The default value is center
.
Vertical align
The vertical alignment of the text within the image. Possible values are one or more of top
, middle
, bottom
. The default value is middle
.
White space
Sets the which region of the string to clip if it is too long. Possible values are one or more of normal
, nowrap
. The default value is normal
.
Line height
line-height specifies the height that is used to calculate line box height. The default value is 1.5
.
Font size
Sets the font size of the text. The value must be a number greater than 0. The default value is 20
.
Example
Additional parameters
Listed below are all of the options available to customize image to suite your needs, along with their default values.
Download
When set with an <a>
tag, will force a browser to download an image instead of opening the image in a new window.