Перейти к основному содержимому

Легенда дизайна

Встройте Легенда дизайна дня на свой сайт

Легенда дизайна публикует новый материал каждый день. Адрес изображения не меняется, но картинка за ним обновляется, поэтому вы добавляете код один раз, а ваши посетители автоматически видят сегодняшний материал.

Как это работает

Каждый день новое изображение публикуется по одному и тому же адресу. Ваша страница загружает этот адрес, поэтому на ней всегда отображается текущий материал, а по клику посетители переходят на Легенда дизайна, где представлена полная история.

Предпочитаете скрипт? Добавьте один контейнер и один скрипт: виджет отрисует стиль, указанный в data-dotd-variant (image, cta или card), на языке адреса скрипта, если этот язык доступен. Если вы не можете использовать скрипты, воспользуйтесь HTML-версией того же варианта.

Вариант A: только изображение

Сегодняшнее изображение со ссылкой на Легенда дизайна. Самый лёгкий вариант.

Предпросмотр в реальном времени

<a href="https://thedesignlegend.com/ru/" 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=ru"></script>

Вариант B: изображение и призыв к действию

Сегодняшнее изображение с призывом к действию под ним.

Предпросмотр в реальном времени

<a href="https://thedesignlegend.com/ru/" 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=ru"></script>

Вариант C: карточка Bootstrap

Карточка Bootstrap с изображением, заголовком материала, коротким описанием и кнопкой призыва к действию. На вашей странице должен быть подключён Bootstrap.

Предпросмотр в реальном времени

<div class="card" style="max-width:24rem">
  <a href="https://thedesignlegend.com/ru/" 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/ru/" 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=ru"></script>

Вариант 3: JSON

Для разработчиков, приложений и автоматизации. JSON содержит название, описание, адрес изображения, ссылки и дату. Кросс-доменные запросы разрешены.

fetch("https://thedesignlegend.com/feature.json?lang=ru")
  .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": "ru",
    "image": "https://competition.adesignaward.com/design-legend-of-the-day/today.png",
    "image_alt": "Ретроспектива Легенды дизайна дня — достижения всей жизни в области дизайна",
    "url": "https://thedesignlegend.com/ru/",
    "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/ru/vstraivaniye/"
}

Полезно знать

  • Сохраняйте ссылку вокруг изображения, чтобы ваши посетители могли перейти к полному материалу.
  • Всегда используйте адрес изображения, указанный выше, и не сохраняйте копию, чтобы ваша страница оставалась актуальной.
  • Изображение адаптивное: оно никогда не становится шире своего контейнера.
  • Нужна помощь или особый формат? Пожалуйста, свяжитесь с нами.

Цитата о дизайне дня

Цитата о дизайне дня

DesignAdage