Placehold – швидке додавання картинок

22

Від автора: у цьому уроці я хотів би поділитися з вами інструментом, який без сумніву може стати в нагоді кожному верстальщику. Це сервіс PLACEHOLD.IT

Коли ми верстаємо шаблон, то частенько нам потрібно позначити в цьому шаблоні місця під певні його частини чи елементи. Наприклад, це може бути шапка, для якої у нас поки що немає картинки, що це може бути банер, галерея та інше. Звичайно ж, можна скористатися будь-яким графічним редактором і створити в ньому прості картинки для тимчасового користування… але це все час, якого інколи просто не вистачає.

Placehold – швидке додавання картинок

Автор: Андрій Кудлай

Звуть мене Андрій Кудлай. Родом я з України, живу в Дніпропетровську. Веб-програмування вчився сам. Непогано знаю HTML, CSS, PHP, JavaScript.

Placehold – швидке додавання картинокPlacehold – швидке додавання картинок

І тут нам може допомогти сервіс placehold.it, завдяки якому можна на льоту генерувати в коді картинки необхідних параметрів.

Сервіс дуже проста у використанні і має мінімум необхідних налаштувань для керування параметрами картинок. Давайте їх розглянемо.

Для того, щоб вставити на сторінку зображення розмірами, скажімо 350х150, нам достатньо прописати наступний рядок коду:

Placehold – швидке додавання картинок

В результаті ми отримаємо ось таке ось нейтральне зображення, яке впишеться практично в будь-який дизайн:

Placehold – швидке додавання картинок

При цьому на картинці ми відразу ж бачимо її розміри (350х150), що дуже зручно при подальшому додаванні реальних картинок замість тимчасових.

Як Ви вже здогадалися, в дорозі до картинці після url самого сервісу ми як раз і вказали розміри картинок. Перше число задає ширину зображення, друге – висоту. Висота є необов’язковим параметром і, якщо ми опустимо її, тоді отримаємо квадратну картинку:

Placehold – швидке додавання картинок

Крім розмірів ми також можемо управляти форматом картинки, кольоровою гамою і текстом на ній.

Кольори картинки задаються після розмірів. Ми можемо керувати кольором тла та кольором тексту, які задаються в наступному порядку: фоновий колір/колір тексту. Для отримання картинки рожевого кольору з білим текстом можна вказати наступні параметри:

Placehold – швидке додавання картинок

В результаті отримаємо наступне зображення:

Placehold – швидке додавання картинок

Також ми можемо управляти форматом картинки. За замовчуванням картинки генеруються у форматі GIF, але ми можемо «попросити» віддавати нам картинки формату JPG або PNG. Для цього достатньо вказати розширення картинки, наприклад, при вказівці її розмірів:

Placehold – швидке додавання картинок

Ну і ще один параметр, яким ми можемо керувати – це текст на зображенні. Зараз на картинці виводяться її розміри, і це дуже зручно, на мій погляд. Але якщо Ви хочете вказати довільний текст, тоді додайте його самим останнім параметром, додаючи перед текстом знак амперсанда. Наприклад, давайте дамо картинці номер:

Placehold – швидке додавання картинок

В результаті отримаємо:

Placehold – швидке додавання картинок

Ось, власне, і все. Сподіваюся, що цей сервіс стане Вам у пригоді і Ви будете використовувати його можливості у своїй роботі.

Удачі і до нових зустрічей!