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 | |
resize=150x100/placeholder:rgb(128,0,128) | |
placeholder:200x100:medium-violet-red |
Syntax
A placeholder follows the following syntax:
placeholder:[<dimensions>:]<colors>
Dimensions
Specifying the dimensions 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 dimensions and no color. In that case, the default colors will be used.
| Example | Result |
|---|---|
placeholder:200x150 |
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 |
Colors
Specifying the colors of a placeholder is mandatory unless dimensions have been specified. Syntax is [<text>/]background where text and background are color expressions to be used for the text and the background of the image respectively.
| Example | Result |
|---|---|
placeholder:50x50:white/red |
auto
as the color expression and TwicPics will default to an unobtrusive gray color scheme.
| Example | Result |
|---|---|
placeholder:50x50:orange | |
placeholder:50x50:black | |
placeholder:50x50:auto |
Script Compatible
One nifty usage of placeholders is with the TwicPics Script.
Simply target a placeholder expression with your data-twic-src to instantly get the best suited physical size of the image and it takes the device DPR into account to boot!
<img data-twic-src="placeholder:auto">
The 200 pixels wide 200 pixels high image below uses this technique:
