Disainilegend
Manusta Päeva disainilegend oma veebilehele
Disainilegend avaldab iga päev uue esiletõstu. Pildi aadress ei muutu kunagi, kuid pilt selle taga muutub – nii lisad koodi ühe korra ja sinu külastajad näevad automaatselt tänast esiletõstu.
Kuidas see töötab
Iga päev avaldatakse uus pilt ühel ja samal aadressil. Sinu leht laadib selle aadressi, nii et alati kuvatakse praegune esiletõst, ning klõps viib külastajad lehele Disainilegend, kus kogu lugu on jutustatud.
Eelistad skripti? Lisa üks konteiner ja üks skript: vidin kuvab stiili, mille valid atribuudiga data-dotd-variant (image, cta või card), skripti aadressi keeles, kui see keel on saadaval. Kui skripte käivitada ei saa, kasuta sama variandi HTML-versiooni.
Variant A: ainult pilt
Tänane pilt, lingitud lehele Disainilegend. Kõige kergekaalulisem valik.
Reaalajas eelvaade
<a href="https://thedesignlegend.com/et/" target="_blank" rel="noopener">
<img src="https://competition.adesignaward.com/design-legend-of-the-day/today.png" alt="Päeva disainilegendi retrospektiiv, mis tutvustab kogu elu jooksul saavutatut disainis" 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=et"></script>
Variant B: pilt ja tegevusüleskutse
Tänane pilt koos tegevusüleskutsega selle all.
Reaalajas eelvaade
<a href="https://thedesignlegend.com/et/" 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="Päeva disainilegendi retrospektiiv, mis tutvustab kogu elu jooksul saavutatut disainis" 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">Avasta Päeva disainilegend</span>
</a>
<div data-dotd="thedesignlegend.com" data-dotd-variant="cta"></div>
<script async src="https://thedesignlegend.com/feature.js?lang=et"></script>
Variant C: Bootstrap-kaart
Bootstrap-kaart pildi, esiletõstu pealkirja, lühikese lõigu ja tegevusüleskutse nupuga. Sinu leht vajab Bootstrap'i.
Reaalajas eelvaade
<div class="card" style="max-width:24rem">
<a href="https://thedesignlegend.com/et/" target="_blank" rel="noopener"><img src="https://competition.adesignaward.com/design-legend-of-the-day/today.png" class="card-img-top" alt="Päeva disainilegendi retrospektiiv, mis tutvustab kogu elu jooksul saavutatut disainis" loading="lazy"></a>
<div class="card-body">
<h5 class="card-title">Päeva disainilegend</h5>
<p class="card-text">A' Design Award tunnustab mõjukat disainerit või maailmatasemel arhitekti, kelle erakordne karjäär, ikoonilised loomingud ja teedrajavad ideed on kujundanud disaini ajalugu ja arengut, kui Päeva disainilegend.</p>
<a href="https://thedesignlegend.com/et/" class="btn btn-danger" target="_blank" rel="noopener">Avasta Päeva disainilegend</a>
</div>
</div>
<div data-dotd="thedesignlegend.com" data-dotd-variant="card"></div>
<script async src="https://thedesignlegend.com/feature.js?lang=et"></script>
Valik 3: JSON
Arendajatele, rakendustele ja automatiseerimiseks. JSON sisaldab nime, kirjeldust, pildi aadressi, linke ja kuupäeva. Päritoluülesed päringud on lubatud.
fetch("https://thedesignlegend.com/feature.json?lang=et")
.then(function (r) { return r.json(); })
.then(function (d) {
// d.name, d.feature, d.paragraph, d.image, d.url, d.date ...
});
Näidisvastus
{
"domain": "thedesignlegend.com",
"name": "Disainilegend",
"feature": "Päeva disainilegend",
"paragraph": "A' Design Award tunnustab mõjukat disainerit või maailmatasemel arhitekti, kelle erakordne karjäär, ikoonilised loomingud ja teedrajavad ideed on kujundanud disaini ajalugu ja arengut, kui Päeva disainilegend.",
"description": "Disainilegend tunnustab mõjukaid disainereid ja maailmatasemel arhitekte, kelle erakordsed karjäärid, ikoonilised loomingud, teedrajavad ideed ja püsiv panus on kujundanud disaini ajalugu ja arengut, tuues esile loomingulisi inimesi ja saavutusi, mida tunnustab maineka A' Design Award and Competition.",
"call_to_action": "Avasta Päeva disainilegend",
"date": "2026-11-08",
"language": "et",
"image": "https://competition.adesignaward.com/design-legend-of-the-day/today.png",
"image_alt": "Päeva disainilegendi retrospektiiv, mis tutvustab kogu elu jooksul saavutatut disainis",
"url": "https://thedesignlegend.com/et/",
"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/et/manustamine/"
}
Kasulik teada
- Jäta link pildi ümber alles, et külastajad saaksid avastada kogu esiletõstu.
- Kasuta alati ülal näidatud pildi aadressi ega salvesta koopiat, nii püsib sinu leht ajakohane.
- Pilt on responsiivne: see ei kasva kunagi laiemaks kui selle konteiner.
- Vajad abi või kohandatud vormingut? Palun võta meiega ühendust.