Unplash.com - очень известный сайт, на котором вы найдете изображения на самую разную тематику, причем бесплатно или за условную плату в виде предложения поделиться этим фото в соцсетях.
Как правило, изображения с unsplash.com скачиваются на локальный компьютер по ссылке типа https://unsplash.com/photos/Y6I4VvyN_sA, но при использовании такой ссылки в качестве атрибута src в теге img, вы увидите значок незагруженной картинки наподобие такого:
Варианты использования изображений с Unsplash.com, доступные до июня 2024 года
Очень долго Unsplash.com предоставлял возможность загружать изображения очень простым способом, указывая ссылку вида https://source.unsplash.com/.... Например, случайное фото от конкретного пользователя предполагало такой формат ссылки:
| 1 2 3 4 5 6 7 | https://source.unsplash.com/user/{USERNAME} <!-- или с указанием размеров --> https://source.unsplash.com/user/{USERNAME}/widthxheight <!-- пример встраивания --> <img src="https://source.unsplash.com/user/aaronburden/" alt="Random picture" /> <!-- или с размерами --> <img src="https://source.unsplash.com/user/aaronburden/900x300" alt="aaronburden photo"> |
Случайное фото от автора с отметкой "like", которую можно поставить на unsplash.com в виде сердечка любому понравившемуся фото, ранее подразумевало такой синтаксис:
| 1 2 3 | https://source.unsplash.com/user/{USERNAME}/likes Например, <img src="https://source.unsplash.com/user/marslady/likes/800x400" alt="paige_cody like"> |
А загрузка изображения по его 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"> |
Были еще ссылки на коллекции вида https://source.unsplash.com/collection/{COLLECTION ID}/widthxheight, фото дня в виде ссылки https://source.unsplash.com/daily и фото недели со ссылкой типа https://source.unsplash.com/weekly. Даже можно было посмотреть фото дня от конкретного автора по ссылке https://source.unsplash.com/user/{USERNAME}/daily, например, <img src="https://source.unsplash.com/user/kellysikkema/daily" alt="Daily Photo">
Кроме того, раньше можно было легко использовать фото по ключевым словам, добавляя ссылку вида https://source.unsplash.com/?nature,water или ее же с размерами https://source.unsplash.com/1600x900/?nature,water
Если вы неверно указали автора или размер картинки, то вместо изображения ранее увидели бы такое стандартное фотосообщение Unsplash:
Прочитали?
Молодцы.
ЗАБУДЬТЕ.
Теперь, если вы используете любой из этих вариантов, получите значок незагруженной картинки в браузере.
Современный формат встраивания фото от unsplash.com
Теперь вы можете получать фото на основе Unsplash API при помощи JSON-формата и JavaScript. Основную информацию вы найдете на странице Unsplash Developers.
Для вставки фото таким образом вам понадобится зарегистрироваться на UnspLash Developers и выбрать ссылку Your Apps. Там вы создадите свой первое приложение, которое позволит бесплатно загружать до 50 фото в час. Если нужно больше, читайте доп. информацию. Вы получите ключ для вашего приложения, который позволит вам загружать фотографии.
JS-код при этом будет примерно такой (для случайных фото из категории nature):
| 1 2 3 4 5 6 7 8 9 10 11 12 | const apiKey = 'Access Key'; const images = document.querySelectorAll('.image'); fetch(`https://api.unsplash.com/photos/random?query=nature&count=10&client_id=${apiKey}`) .then((response) => response.json()) .then((data) => { data.forEach((photo, index) => { images[index].src = photo.urls.regular; //или для изображений шириной в 200px //images[index].src = photo.urls.thumb; }); }); |
В виде запросов вы можете использовать такие варианты:
| 1 2 3 4 | GET /photos GET /search/photos GET /photos/:id GET /photos/:id/download |
Поддерживаемые параметры
Официально поддерживаются такие параметры для фото:
w,h: для регулировки ширины и высоты фотографии.crop: для обрезки фотографии.fm: для преобразования формата изображенияauto=format: для автоматического выбора оптимального формата изображения в зависимости от браузера пользователя.q: для изменения качества сжатия при использовании форматов файлов с потерями.fit: для изменения размера изображения в пределах указанных размеров.dpr: для настройки соотношения пикселей изображения на устройстве.
Вы можете найти эти параметры в консоли, когда происходит вывод photo в методе forEach(). Эти параметры можно увидеть внутри поля "urls", например,
| 1 | "regular": "https://images.unsplash.com/photo-1591261730799-ee4e6c2d16d7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNjQ1Mzd8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTkyNTA2NTZ8&ixlib=rb-4.0.3&q=80&w=1080", |
Давайте посмотрим, как сработает код. В него еще добавлено формирование ссылки на фотографию.
See the Pen Встраивание фото с unsplash.com by Elen (@ambassador) on CodePen.
Такой способ загрузки данных предполагает, что вы работаете с JavaScript. С одной стороны это хорошо для разработчиков на React, Vue.js, Angular, PHP и т.п., т.к. существует способ загрузки npm-пакетов и использование фотографий с помощью Fetch API. С другой - вставить фото в html-код на основе его выбора на unsplash.com одной строкой так же просто, как ранее, не получится. Так что все примеры, которые использовали старый API, теперь надо переписывать.
Простой способ добавления фото с unsplash.com - используем codepen.io
Простой способ добавления фотографий в HTML или CSS с unsplash.com, конечно, есть. Например, на этом сайте вы найдете множество примеров с Codepen.io - ресурса, на котором вы и другие пользователи можете выкладывать свой код на HTML, CSS и JS, а также использовать препроцессоры типа Pug, SASS, TypeScript для написания кода. При создании любого pen-а - примера с кодом - вы можете нажать на кнопку Assets внизу слева и воспользоваться изображениями с unsplash.com:
Бесплатное использование этого сервиса предполагает, что вы можете вставлять изображения с помощью тега <img> в малом и полном размере (это очень большие изображения, как правило) или в качестве фона в CSS.
Ссылка в этом случае будет такой:
| 1 | <img src='https://images.unsplash.com/photo-1458929526027-052f5d6a3c5e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTkyNDU3Mzh8&ixlib=rb-4.0.3&q=80&w=400' alt=''> |
Не очень читабельна, хотя вполне работоспособна. Пока, во всяком случае. И похожа на тот код, что мы уже видели выше в поле "urls" JSON-формата. Проверяем:
Изображение есть. Ура!
Для встраивания изображения с определенными размерами по ширине и по высоте нужно использовать такой код:
| 1 | <img src="https://images.unsplash.com/photo-1474308371634-c715850e8d8b?crop=faces&fit=crop&w=550&h=350"> |
Вот эта картинка
Имейте ввиду, что некоторые фото могут удаляться с этого ресурса, поэтому в какой-то момент вы можете обнаружить, что изображение в вашем коде отсутствует. Или API поменяют, и вам нужно почитать новую документацию.
Лицензия Unsplash.com
Все фото, которые пользователи добавляют на ресурс Unsplash.com, могут быть использованы как в коммерческих, так и в некоммерческих целях, что отображено на странице Лицензия. Вы можете редактировать эти фото и вставлять их на страницы сайта.
Имейте в виду, что лицензия Unsplash не распространяется на использование:
- Любых логотипов, торговых марок или брендов, которые есть на фото;
- Фотографий людей, которых можно узнать на фото — стоит спросить их разрешения на публикацию;
- Произведений искусства, которые изображены на фотографиях.
Если вам нужно опубликовать что-либо из этого списка, нужно получить разрешение правообладателя — связаться с владельцем бренда, всеми людьми с фото или автором картины.
Источник - https://unsplash.com/developers
