Вы здесь: Главная » HTML » Использование изображений Unsplash.com на страницах сайта

Использование изображений Unsplash.com на страницах сайта

Unplash.com - очень известный сайт, на котором вы найдете изображения на самую разную тематику, причем бесплатно или за условную плату в виде предложения поделиться этим фото в соцсетях.

Как правило, изображения с unsplash.com скачиваются на локальный компьютер по ссылке типа https://unsplash.com/photos/Y6I4VvyN_sA, но при использовании такой ссылки в качестве атрибута src в теге img, вы увидите значок незагруженной картинки наподобие такого:

unsplash img src

Варианты использования изображений с Unsplash.com

На этом ресурсе вы можете найти вполне конкретное изображение по его id или использовать несколько вариантов загрузки случайного фото. Начнем с последних и рассмотрим примеры.

Случайное фото от конкретного пользователя

Чтобы выбрать случайную фотографию определенного автора, необходимо использовать такой формат ссылки:

Например, такой код:

приведет к загрузке случайного изображения автора aaronburden со случайными размерами:

Random picture

Вы можете точно указывать размер фото, причем, желательно знать, какой именно размер фото у этого автора. Например,

aaronburden photo
Если вы неверно указали автора или размер картинки, то вместо изображения увидите стандартное фотосообщение Unsplash:

Фото не найдено на Unsplash.com

Случайное фото от автора с отметкой "like"

На Unsplash.com можно поставить отметку Like в виде сердечка любому понравившемуся фото. Поэтому вы можете загрузить только те фото автора, которые имеют такую отметку. Они будут подобраны также в случайном порядке из понравившихся людям фотографий этого пользователя. Синтаксис:

Вариант отображения (поменяется при обновлении страницы):

paige_cody like

Случайное фото из раздела Collections

Вы можете загружать случайное изображение из раздела Collections на Unsplash.com. Для этого вам необходимо кликнуть на соответствующей ссылке в меню на сайте.

unsplash-collections

Выбирайте подходящую по названию или по картинкам коллекцию и щелкайте по ней.

unsplash collections id

В адресной строке вы найдете id - номер данной коллекции, который вам необходимо вставить в свой код в таком виде:

Фото из коллекции будет меняться после перезагрузки страницы.

collection random photo

Фото дня/недели

На unsplash.com есть возможность загрузить фото дня или недели. Причем фото дня можно выбирать для конкретного автора, а фото недели  можно выбрать из какого-нибудь раздела по типу поиска.

Daily Photo
Получаем фото недели:

Смотрим на результат:
Weekly Photo

Фото дня одного автора

Код примера:

Само фото автора:
Daily Photo
Случайное фото по поисковым словам

Фото недели из раздела People

Вы указываете поисковое слово после знака вопроса:

Получаете изображение:Weekly People Photo

Случайное фото по ключевым словам

Смотрим на фото:Keywords Photo

Загрузка конкретного фото по id

Если вам нужно конкретное фото, которое вы нашли, например, по такой ссылке:

то все, что вам нужно - это ее id, который состоит из букв и цифр в конце ссылки. Копируете его и вставляете в таком виде:

При обновлении страницы вы получите отображение одной и той же картинки, т.к. id - это ее уникальный идентификатор.

bike with flowers

Лицензия Unsplash.com

Все фото, которые пользователи добавляют на ресурс Unsplash.com, могут быть использованы как в коммерческих, так и в некоммерческих целях, что отображено на странице Лицензия. Вы можете редактировать эти фото и вставлять их на страницы сайта.
Имейте в виду, что лицензия Unsplash не распространяется на использование:

  • Любых логотипов, торговых марок или брендов, которые есть на фото;
  • Фотографий людей, которых можно узнать на фото — стоит спросить их разрешения на публикацию;
  • Произведений искусства, которые изображены на фотографиях.

Если вам нужно опубликовать что-либо из этого списка, нужно получить разрешение правообладателя — связаться с владельцем бренда, всеми людьми с фото или автором картины.

Использование фото с unsplash.com на codepen.io

Codepen.io - это ресурс, на котором вы можете выкладывать свой код на HTML, CSS и JS, а также использовать препроцессоры типа Pug, SASS, TypeScript для написания кода. При создании любого pen-а - примера с кодом - вы можете нажать на кнопку Assets внизу слева и воспользоваться изображениями с unsplash.com:

unsplash assets codepen.io

Бесплатное использование этого сервиса предполагает, что вы можете вставлять изображения с помощью тега <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/

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *