Unplash.com - очень известный сайт, на котором вы найдете изображения на самую разную тематику, причем бесплатно или за условную плату в виде предложения поделиться этим фото в соцсетях.
Как правило, изображения с unsplash.com скачиваются на локальный компьютер по ссылке типа https://unsplash.com/photos/Y6I4VvyN_sA, но при использовании такой ссылки в качестве атрибута src в теге img, вы увидите значок незагруженной картинки наподобие такого:
Варианты использования изображений с Unsplash.com
На этом ресурсе вы можете найти вполне конкретное изображение по его id или использовать несколько вариантов загрузки случайного фото. Начнем с последних и рассмотрим примеры.
Случайное фото от конкретного пользователя
Чтобы выбрать случайную фотографию определенного автора, необходимо использовать такой формат ссылки:
|
1 2 3 4 5 |
https://source.unsplash.com/user/{USERNAME} или с указанием размеров https://source.unsplash.com/user/{USERNAME}/widthxheight |
Например, такой код:
|
1 |
<img src="https://source.unsplash.com/user/aaronburden/" alt="Random picture" /> |
приведет к загрузке случайного изображения автора aaronburden со случайными размерами:
Вы можете точно указывать размер фото, причем, желательно знать, какой именно размер фото у этого автора. Например,
|
1 |
<img src="https://source.unsplash.com/user/aaronburden/900x300" alt="aaronburden photo"> |
Если вы неверно указали автора или размер картинки, то вместо изображения увидите стандартное фотосообщение Unsplash:
Случайное фото от автора с отметкой "like"
На Unsplash.com можно поставить отметку Like в виде сердечка любому понравившемуся фото. Поэтому вы можете загрузить только те фото автора, которые имеют такую отметку. Они будут подобраны также в случайном порядке из понравившихся людям фотографий этого пользователя. Синтаксис:
|
1 2 3 |
https://source.unsplash.com/user/{USERNAME}/likes Например, <img src="https://source.unsplash.com/user/marslady/likes/800x400" alt="paige_cody like"> |
Вариант отображения (поменяется при обновлении страницы):
Случайное фото из раздела Collections
Вы можете загружать случайное изображение из раздела Collections на Unsplash.com. Для этого вам необходимо кликнуть на соответствующей ссылке в меню на сайте.
Выбирайте подходящую по названию или по картинкам коллекцию и щелкайте по ней.
В адресной строке вы найдете id - номер данной коллекции, который вам необходимо вставить в свой код в таком виде:
|
1 2 3 4 5 6 7 |
https://source.unsplash.com/collection/{COLLECTION ID} или https://source.unsplash.com/collection/{COLLECTION ID}/widthxheight Например, <img src="https://source.unsplash.com/collection/1118894/1200x600" alt="collection random photo"> |
Фото из коллекции будет меняться после перезагрузки страницы.
Фото дня/недели
На unsplash.com есть возможность загрузить фото дня или недели. Причем фото дня можно выбирать для конкретного автора, а фото недели можно выбрать из какого-нибудь раздела по типу поиска.
|
1 2 3 |
https://source.unsplash.com/daily Например, <img src="https://source.unsplash.com/daily" alt="Daily Photo" /> |
Получаем фото недели:
|
1 2 3 |
https://source.unsplash.com/weekly Например, <img src="https://source.unsplash.com/weekly" alt="Weekly Photo" /> |
Смотрим на результат:
Фото дня одного автора
Код примера:
|
1 2 3 |
https://source.unsplash.com/user/{USERNAME}/daily Например, <img src="https://source.unsplash.com/user/kellysikkema/daily" alt="Daily Photo"> |
Само фото автора:
Случайное фото по поисковым словам
Фото недели из раздела People
Вы указываете поисковое слово после знака вопроса:
|
1 |
<img src="https://source.unsplash.com/weekly?people" alt="Weekly People Photo"> |
Получаете изображение:
Случайное фото по ключевым словам
|
1 2 3 4 5 |
https://source.unsplash.com/featured/?{KEYWORD},{KEYWORD} Например, https://source.unsplash.com/?nature,water или с размерами https://source.unsplash.com/1600x900/?nature,water |
Смотрим на фото:
Загрузка конкретного фото по id
Если вам нужно конкретное фото, которое вы нашли, например, по такой ссылке:
|
1 |
https://unsplash.com/photos/MxjSV_INz_k |
то все, что вам нужно - это ее id, который состоит из букв и цифр в конце ссылки. Копируете его и вставляете в таком виде:
|
1 2 3 4 5 |
https://source.unsplash.com/photo_id/widthxheight Например, <img src="https://source.unsplash.com/MxjSV_INz_k/600x300" alt="bike with flowers"> |
При обновлении страницы вы получите отображение одной и той же картинки, т.к. id - это ее уникальный идентификатор.
Достаточно часто именно этот вариант встраивания фото с unsplash.com используется при программировании на JavaScript, особенно, если необходимо отследить процесс или прогресс загрузки фото с внешнего источника. В статье "Пример использования метода jQuery $.post для AJAX-запросов" был использован массив с id различных фото из 5 категорий для демонстрации работы связки JavaScript + PHP при отправке AJAX-запросов.
Лицензия Unsplash.com
Все фото, которые пользователи добавляют на ресурс Unsplash.com, могут быть использованы как в коммерческих, так и в некоммерческих целях, что отображено на странице Лицензия. Вы можете редактировать эти фото и вставлять их на страницы сайта.
Имейте в виду, что лицензия Unsplash не распространяется на использование:
- Любых логотипов, торговых марок или брендов, которые есть на фото;
- Фотографий людей, которых можно узнать на фото — стоит спросить их разрешения на публикацию;
- Произведений искусства, которые изображены на фотографиях.
Если вам нужно опубликовать что-либо из этого списка, нужно получить разрешение правообладателя — связаться с владельцем бренда, всеми людьми с фото или автором картины.
Использование фото с unsplash.com на codepen.io
Codepen.io - это ресурс, на котором вы можете выкладывать свой код на HTML, CSS и JS, а также использовать препроцессоры типа Pug, SASS, TypeScript для написания кода. При создании любого pen-а - примера с кодом - вы можете нажать на кнопку Assets внизу слева и воспользоваться изображениями с unsplash.com:
Бесплатное использование этого сервиса предполагает, что вы можете вставлять изображения с помощью тега <img> в малом и полном размере (это очень большие изображения, как правило) или в качестве фона в CSS.
Код всех приведенных примеров вы можете посмотреть на codepen.io:
See the Pen <a href='https://codepen.io/ambassador/pen/poopyrQ'>Встраивание фото с unsplash.com</a> by Elen (<a href='https://codepen.io/ambassador'>@ambassador</a>) on <a href='https://codepen.io'>CodePen</a>.18892
Для разработчиков есть раздел Unsplash API, в котором вы можете бесплатно зарегистрироваться и использовать все многообразие фото с этого ресурса для своих целей в коде на JavaScript, PHP и Ruby.
Источник - https://source.unsplash.com/
