Přejít na hlavní obsah

Designový trend dne

Vložte Designový trend dne na svůj web

Designový trend dne každý den publikuje nový článek. Adresa obrázku se nemění, ale obrázek za ní ano – kód tedy vložíte pouze jednou a vaši návštěvníci automaticky vidí dnešní článek.

Jak to funguje

Každý den se na jedné stálé adrese objeví nový obrázek. Vaše stránka načte tuto adresu, takže vždy zobrazuje aktuální článek, a kliknutím se návštěvníci dostanou na Designový trend dne, kde najdou celý příběh.

Dáváte přednost skriptu? Přidejte jeden kontejner a jeden skript: widget vykreslí styl, který zvolíte pomocí data-dotd-variant (image, cta nebo card), v jazyce adresy skriptu, pokud je daný jazyk k dispozici. Pokud nemůžete spouštět skripty, použijte HTML verzi stejné varianty.

Varianta A: pouze obrázek

Dnešní obrázek s odkazem na Designový trend dne. Nejlehčí varianta.

Živý náhled

<a href="https://designtrendoftheday.com/cs/" target="_blank" rel="noopener">
  <img src="https://competition.adesignaward.com/design-trend-of-the-day/today.png" alt="Designový trend dne – vizualizace nastupujících vzorců utvářejících budoucnost designu" loading="lazy" style="max-width:100%;height:auto">
</a>
<div data-dotd="designtrendoftheday.com" data-dotd-variant="image"></div>
<script async src="https://designtrendoftheday.com/feature.js?lang=cs"></script>

Varianta B: obrázek a výzva k akci

Dnešní obrázek s výzvou k akci pod ním.

Živý náhled

<a href="https://designtrendoftheday.com/cs/" 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-trend-of-the-day/today.png" alt="Designový trend dne – vizualizace nastupujících vzorců utvářejících budoucnost designu" 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">Objevte Designový trend dne</span>
</a>
<div data-dotd="designtrendoftheday.com" data-dotd-variant="cta"></div>
<script async src="https://designtrendoftheday.com/feature.js?lang=cs"></script>

Varianta C: Bootstrap karta

Bootstrap karta s obrázkem, názvem článku, krátkým odstavcem a tlačítkem s výzvou k akci. Vaše stránka potřebuje Bootstrap.

Živý náhled

<div class="card" style="max-width:24rem">
  <a href="https://designtrendoftheday.com/cs/" target="_blank" rel="noopener"><img src="https://competition.adesignaward.com/design-trend-of-the-day/today.png" class="card-img-top" alt="Designový trend dne – vizualizace nastupujících vzorců utvářejících budoucnost designu" loading="lazy"></a>
  <div class="card-body">
    <h5 class="card-title">Designový trend dne</h5>
    <p class="card-text">A' Design Award každý den zkoumá originální designový trend a představuje vznikající styly, proměňující se estetiku a nové kreativní směry, které ovlivňují způsob navrhování produktů, projektů a zážitků, jako Designový trend dne.</p>
    <a href="https://designtrendoftheday.com/cs/" class="btn btn-danger" target="_blank" rel="noopener">Objevte Designový trend dne</a>
  </div>
</div>
<div data-dotd="designtrendoftheday.com" data-dotd-variant="card"></div>
<script async src="https://designtrendoftheday.com/feature.js?lang=cs"></script>

Možnost 3: JSON

Pro vývojáře, aplikace a automatizaci. JSON obsahuje název, popis, adresu obrázku, odkazy a datum. Cross-origin požadavky jsou povoleny.

fetch("https://designtrendoftheday.com/feature.json?lang=cs")
  .then(function (r) { return r.json(); })
  .then(function (d) {
    // d.name, d.feature, d.paragraph, d.image, d.url, d.date ...
  });

Příklad odpovědi

{
    "domain": "designtrendoftheday.com",
    "name": "Designový trend dne",
    "feature": "Designový trend dne",
    "paragraph": "A' Design Award každý den zkoumá originální designový trend a představuje vznikající styly, proměňující se estetiku a nové kreativní směry, které ovlivňují způsob navrhování produktů, projektů a zážitků, jako Designový trend dne.",
    "description": "Designový trend dne každý den zkoumá originální designový trend a představuje vznikající styly, proměňující se estetiku, nové kreativní směry a inovativní přístupy, které ovlivňují způsob navrhování produktů, projektů a zážitků, jak je oceněno vysoce prestižní soutěží A' Design Award and Competition.",
    "call_to_action": "Objevte Designový trend dne",
    "date": "2026-11-08",
    "language": "cs",
    "image": "https://competition.adesignaward.com/design-trend-of-the-day/today.png",
    "image_alt": "Designový trend dne – vizualizace nastupujících vzorců utvářejících budoucnost designu",
    "url": "https://designtrendoftheday.com/cs/",
    "feature_url": "https://competition.adesignaward.com/design-trend-of-the-day.html",
    "registry_url": "https://competition.adesignaward.com/design-trends-of-the-days.php",
    "embed_url": "https://designtrendoftheday.com/cs/vlozeni/"
}

Dobré vědět

  • Ponechte odkaz kolem obrázku, aby vaši návštěvníci mohli objevit celý článek.
  • Vždy používejte výše uvedenou adresu obrázku a neukládejte si kopii, aby vaše stránka zůstala aktuální.
  • Obrázek je responzivní: nikdy se neroztáhne nad šířku svého kontejneru.
  • Potřebujete pomoc nebo vlastní formát? Kontaktujte nás.

Designový citát dne

Designový citát dne

DesignAdage