Placeholders

Every manipulation can target a placeholder. In that case, TwicPics will compute the final dimensions consequential to the transformations then respond with an svg image of these dimensions that also displays said dimensions.

Example Result
cover=1:1/resize=150/placeholder:auto cover=1:1/resize=150/placeholder:auto
resize=150x100/placeholder:rgb(128,0,128) resize=150x100/placeholder:rgb(128,0,128)
placeholder:200x100:medium-violet-red placeholder:200x100:medium-violet-red

Syntax

A placeholder follows the following syntax:

placeholder:[<size>:]<color>

Size

Specifying the size of a placeholder is optional. Syntax is <width>x<height> where width and height are strictly positive numbers.

It is perfectly valid to create a placeholder with a size and no color. In that case, the default color will be used.

Example Result
placeholder:200x150 placeholder:200x150

If not specified, the size of a placeholder defaults to 1920x1080.

Keep in mind the final dimensions of a placeholder depends on the transformations applied to it. So resize=(1/10)s/placeholder:auto will give a placeholder which dimensions are 192 per 108, a tenth of the default ones.

Example Result
resize=(1/10)s/placeholder:auto resize=(1/10)s/placeholder:auto

Color

Specifying the color of a placeholder is mandatory unless a size has already been specified. Syntax is [<text>/]background where text and background are color values for the text and the background of the image respectively.

Example Result
placeholder:50x50:white/red placeholder:50x50:white/red

If no text color is given, TwicPics will choose a brightened or darkened version of the background color, whichever yields the best contrast. For a quick placeholder, just use auto as the color expression and TwicPics will default to an unobtrusive gray color scheme.

Example Result
placeholder:50x50:orange placeholder:50x50:orange
placeholder:50x50:black placeholder:50x50:black
placeholder:50x50:auto placeholder:50x50:auto

Text and background colors can be specified just as you would in CSS:

  • as a color name like red or green (listed here)
  • as an hexadecimal like A68040,
  • as a short hexadecimal like 76E,
  • as rgb: rgb(<red>,<green>,<blue>),
  • as rgba: rgba(<red>,<green>,<blue>,<alpha>),
  • as hsl: hsl(<hue>,<saturation>,<lightness>),
  • as hsla: hsla(<hue>,<saturation>,<lightness>,<alpha>).

TwicPics also adds transparent so that you can easily create an invisible placeholder using placeholder:transparent.

Finally, you also have the possibility to add an alpha value to named and hexadecimal colors. Simply append the decimal part of the alpha component to the color expression.

Example Result
violet.25 placeholder:50x50:violet.25
008.75 placeholder:50x50:008.75
white.3/dark-blue placeholder:50x50:white.3/dark-blue

Color names

Name Preview
alice-blue alice-blue
antique-white antique-white
aqua aqua
aquamarine aquamarine
azure azure
beige beige
bisque bisque
black black
blanched-almond blanched-almond
blue blue
blue-violet blue-violet
brown brown
burlywood burlywood
cadet-blue cadet-blue
chartreuse chartreuse
chocolate chocolate
coral coral
cornflower-blue cornflower-blue
cornsilk cornsilk
crimson crimson
cyan cyan
dark-blue dark-blue
dark-cyan dark-cyan
dark-goldenrod dark-goldenrod
dark-gray dark-gray
dark-green dark-green
dark-khaki dark-khaki
dark-magenta dark-magenta
dark-olive-green dark-olive-green
dark-orange dark-orange
dark-orchid dark-orchid
dark-red dark-red
dark-salmon dark-salmon
dark-sea-green dark-sea-green
dark-slate-blue dark-slate-blue
dark-slate-gray dark-slate-gray
dark-turquoise dark-turquoise
dark-violet dark-violet
deep-pink deep-pink
deep-sky-blue deep-sky-blue
dim-gray dim-gray
dodger-blue dodger-blue
firebrick firebrick
floral-white floral-white
forest-green forest-green
fuchsia fuchsia
gainsboro gainsboro
ghost-white ghost-white
gold gold
goldenrod goldenrod
gray gray
green green
green-yellow green-yellow
honeydew honeydew
hot-pink hot-pink
indian-red indian-red
indigo indigo
ivory ivory
khaki khaki
lavender lavender
lavender-blush lavender-blush
lawn-green lawn-green
lemon-chiffon lemon-chiffon
light-blue light-blue
light-coral light-coral
light-cyan light-cyan
light-goldenrod-yellow light-goldenrod-yellow
light-gray light-gray
light-green light-green
light-pink light-pink
light-salmon light-salmon
light-sea-green light-sea-green
light-sky-blue light-sky-blue
light-slate-gray light-slate-gray
light-steel-blue light-steel-blue
light-yellow light-yellow
lime lime
lime-green lime-green
linen linen
magenta magenta
maroon maroon
medium-aquamarine medium-aquamarine
medium-blue medium-blue
medium-orchid medium-orchid
medium-purple medium-purple
medium-sea-green medium-sea-green
medium-slate-blue medium-slate-blue
medium-spring-green medium-spring-green
medium-turquoise medium-turquoise
medium-violet-red medium-violet-red
midnight-blue midnight-blue
mint-cream mint-cream
misty-rose misty-rose
moccasin moccasin
navajo-white navajo-white
navy navy
old-lace old-lace
olive olive
olive-drab olive-drab
orange orange
orange-red orange-red
orchid orchid
pale-goldenrod pale-goldenrod
pale-green pale-green
pale-turquoise pale-turquoise
pale-violet-red pale-violet-red
papaya-whip papaya-whip
peach-puff peach-puff
peru peru
pink pink
plum plum
powder-blue powder-blue
purple purple
red red
rosy-brown rosy-brown
royal-blue royal-blue
saddle-brown saddle-brown
salmon salmon
sandy-brown sandy-brown
sea-green sea-green
seashell seashell
sienna sienna
silver silver
sky-blue sky-blue
slate-blue slate-blue
slate-gray slate-gray
snow snow
spring-green spring-green
steel-blue steel-blue
tan tan
teal teal
thistle thistle
tomato tomato
turquoise turquoise
violet violet
wheat wheat
white white
white-smoke white-smoke
yellow yellow
yellow-green yellow-green