Легенда дизайну
Вбудуйте Легенда дизайну дня на свій вебсайт
Легенда дизайну публікує нову добірку щодня. Адреса зображення не змінюється, але картинка за нею оновлюється, тож ви додаєте код один раз — і ваші відвідувачі автоматично бачать сьогоднішню добірку.
Як це працює
Щодня за однією незмінною адресою публікується нове зображення. Ваша сторінка завантажує цю адресу, тож завжди показує поточну добірку, а натискання переносить відвідувачів на Легенда дизайну, де розміщено повну історію.
Віддаєте перевагу скрипту? Додайте один контейнер і один скрипт: віджет відобразить стиль, обраний за допомогою data-dotd-variant (image, cta або card), мовою адреси скрипта, якщо ця мова доступна. Якщо скрипти недоступні, скористайтеся HTML-версією того самого варіанта.
Варіант A: лише зображення
Сьогоднішнє зображення з посиланням на Легенда дизайну. Найлегший варіант.
Попередній перегляд
<a href="https://thedesignlegend.com/uk/" target="_blank" rel="noopener">
<img src="https://competition.adesignaward.com/design-legend-of-the-day/today.png" alt="Ретроспектива Легенди дизайну дня — досягнення всього життя у дизайні" loading="lazy" style="max-width:100%;height:auto">
</a><div data-dotd="thedesignlegend.com" data-dotd-variant="image"></div>
<script async src="https://thedesignlegend.com/feature.js?lang=uk"></script>Варіант B: зображення та заклик до дії
Сьогоднішнє зображення із закликом до дії під ним.
Попередній перегляд
<a href="https://thedesignlegend.com/uk/" target="_blank" rel="noopener" style="display:block;max-width:100%;color:inherit;text-decoration:none;text-align:center">
<img src="https://competition.adesignaward.com/design-legend-of-the-day/today.png" alt="Ретроспектива Легенди дизайну дня — досягнення всього життя у дизайні" loading="lazy" style="display:block;max-width:100%;height:auto;margin:0 auto">
<span style="display:block;margin-top:.5em;font:600 15px/1.3 system-ui,sans-serif">Відкрийте Легенду дизайну дня</span>
</a><div data-dotd="thedesignlegend.com" data-dotd-variant="cta"></div>
<script async src="https://thedesignlegend.com/feature.js?lang=uk"></script>Варіант C: картка Bootstrap
Картка Bootstrap із зображенням, назвою добірки, коротким абзацом та кнопкою заклику до дії. На вашій сторінці має бути підключений Bootstrap.
Попередній перегляд
<div class="card" style="max-width:24rem">
<a href="https://thedesignlegend.com/uk/" target="_blank" rel="noopener"><img src="https://competition.adesignaward.com/design-legend-of-the-day/today.png" class="card-img-top" alt="Ретроспектива Легенди дизайну дня — досягнення всього життя у дизайні" loading="lazy"></a>
<div class="card-body">
<h5 class="card-title">Легенда дизайну дня</h5>
<p class="card-text">A' Design Award відзначає впливового дизайнера або архітектора світового рівня, чия виняткова кар'єра, культові творіння та новаторські ідеї сформували історію та розвиток дизайну, як Легенду дизайну дня.</p>
<a href="https://thedesignlegend.com/uk/" class="btn btn-danger" target="_blank" rel="noopener">Відкрийте Легенду дизайну дня</a>
</div>
</div><div data-dotd="thedesignlegend.com" data-dotd-variant="card"></div>
<script async src="https://thedesignlegend.com/feature.js?lang=uk"></script>Варіант 3: JSON
Для розробників, застосунків та автоматизації. JSON містить назву, опис, адресу зображення, посилання та дату. Міждоменні запити дозволені.
fetch("https://thedesignlegend.com/feature.json?lang=uk")
.then(function (r) { return r.json(); })
.then(function (d) {
// d.name, d.feature, d.paragraph, d.image, d.url, d.date ...
});Приклад відповіді
{
"domain": "thedesignlegend.com",
"name": "Легенда дизайну",
"feature": "Легенда дизайну дня",
"paragraph": "A' Design Award відзначає впливового дизайнера або архітектора світового рівня, чия виняткова кар'єра, культові творіння та новаторські ідеї сформували історію та розвиток дизайну, як Легенду дизайну дня.",
"description": "Легенда дизайну відзначає впливових дизайнерів та архітекторів світового рівня, чиї виняткові кар'єри, культові творіння, новаторські ідеї та вагомий внесок сформували історію та розвиток дизайну, висвітлюючи творчих людей та досягнення, відзначені високопрестижним конкурсом A' Design Award and Competition.",
"call_to_action": "Відкрийте Легенду дизайну дня",
"date": "2026-11-08",
"language": "uk",
"image": "https://competition.adesignaward.com/design-legend-of-the-day/today.png",
"image_alt": "Ретроспектива Легенди дизайну дня — досягнення всього життя у дизайні",
"url": "https://thedesignlegend.com/uk/",
"feature_url": "https://competition.adesignaward.com/design-legend-of-the-day.html",
"registry_url": "https://competition.adesignaward.com/design-legends-of-the-days.php",
"embed_url": "https://thedesignlegend.com/uk/vbudovuvannia/"
}Корисно знати
- Зберігайте посилання навколо зображення, щоб відвідувачі могли переглянути повну добірку.
- Завжди використовуйте адресу зображення, вказану вище, і не зберігайте копію — так ваша сторінка завжди буде актуальною.
- Зображення адаптивне: воно ніколи не стає ширшим за свій контейнер.
- Потрібна допомога або індивідуальний формат? Будь ласка, зв'яжіться з нами.