holder.js – a library for automatic image rendering on the client side of the set parameters.
\nOften the layout template, ready to add images to a page that would see the end result. This can be done in several ways. You can create an image of the desired size using the graphical editor, or use the library holder.js
\nholder.js – a library for automatic image rendering on the client side of the set parameters. Download the latest actual version you can download from the developer\’s site: http://imsky.github.io/holder/
\nExample:
\nYou need to connect holder.js
\n\n
\n\n
<script src = \”/ path / to / holder.js\”>
\n\n
Put the first plug:
\n\n
\n\n
\n\n
\n<img src = \"holder.js / widthxheight\">
\n\n
\n\n
\n\n
\n
\nThe width and height of the substitute for the necessary dimensions, an example of an image size of 200 width and 100 pixels in height:
\n \n\n
\n\n
\n\n
\n<img src = \"holder.js / 200x100\">
\n\n
\n\n
\n\n
\n
\nAdditionally,
\nOutput square image (such as the width of 200 pixels):
\n \n\n
\n\n
\n\n
\n<img src = \"holder.js / 200\">
\n\n
\n\n
\n\n
\n
\nDisplaying an image with the size as a percentage:
\n\n
\n\n
\n<img src = \"holder.js / 100% x100\">
\n\n
Displaying an image indicating the width of 100% and a height of 100 pixels:
\n\n
\n\n
\n<img src = \"holder.js / 100% x100\">
\n\n
Automatic Image Resizing:
\n
\n\n
\n\n
\n<img src = \"holder.js / 200x200 / auto\">
\n\n
\n\n
\n
\nAttention! To avoid errors 404 console, you can use data-src instead of src
\nTopics
\nIn holder.js default built the 6: sky, vine, lava, gray, industrial, social
\nAn example of using threads sky:
\n\n
\n\n
\n<img src = \"holder.js / 200x300 / sky\">
\n\n
\n\n
\n
\nUsing random topics:
\n\n
\n\n
\n<img data-src = \"holder.js / 300x200 / random\">
\n\n
\n\n
\n
\nColour
\nExample of images with a black background and white text:
\n\n
\n\n
\n<img data-src = \"holder.js / 100x200 / # 000: #fff\">
\n\n
\n\n
\n
\nText
\nYou can use any text with the operator text
\nExample of images with text \”koder.ukr\”:
\n\n
\n\n
\n<img data-src = \"holder.js / 200x200 / text: koder.ukr\">
\n\n
\n\n
\n
\nholder.js automatically adds a line feed to control a line break, use \\ n:
\n\n
\n\n
\n<img data-src = \"holder.js / 200x200 / text: Site \\ n koder.ukr\">
\n\n
\n
\nSet the font name:
\n\n
\n\n
\n<img data-src = \"holder.js / 200x200 / text: Site \\ n koder.ukr / font: Helvetica\">
\n\n
