Untwerp fan de Dei

Ynslút Untwerp fan de Dei op jo webside

Untwerp fan de Dei publisearret alle dagen in nij ûnderwerp. It ôfbyldingsadres feroaret nea, mar de foto derachter wol, dus jo foegje de koade ien kear ta en jo besikers sjogge automatysk it ûnderwerp fan hjoed.

Hoe't it wurket

Alle dagen wurdt in nije ôfbylding publisearre op ien fêst adres. Jo side laadt dat adres, sadat it altyd it aktuele ûnderwerp toant, en in klik bringt jo besikers nei Untwerp fan de Dei dêr't it folsleine ferhaal te lêzen is.

Leaver in skript? Foegje ien kontener en ien skript ta: de widget tekenet de styl dy't jo kieze mei data-dotd-variant (image, cta of card), yn de taal fan it skriptadres as dy taal beskikber is. As jo gjin skripts útfiere kinne, brûk dan de HTML-ferzje fan deselde fariant.

Fariant A: allinnich ôfbylding

De ôfbylding fan hjoed, keppele oan Untwerp fan de Dei. De lichtste opsje.

Live foarbyld

<a href="https://designoftheday.org/fy/" target="_blank" rel="noopener">
  <img src="https://competition.adesignaward.com/design-of-the-day/today.png" alt="Utljochte Untwerp fan de Dei dat priiswinnende kreative eksellinsje sjen lit" loading="lazy" style="max-width:100%;height:auto">
</a>

<div data-dotd="designoftheday.org" data-dotd-variant="image"></div>
<script async src="https://designoftheday.org/feature.js?lang=fy"></script>

Fariant B: ôfbylding en oprop ta aksje

De ôfbylding fan hjoed mei in oprop ta aksje derûnder.

Live foarbyld

<a href="https://designoftheday.org/fy/" 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-of-the-day/today.png" alt="Utljochte Untwerp fan de Dei dat priiswinnende kreative eksellinsje sjen lit" 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">Untdek Untwerp fan de Dei</span>
</a>

<div data-dotd="designoftheday.org" data-dotd-variant="cta"></div>
<script async src="https://designoftheday.org/feature.js?lang=fy"></script>

Fariant C: Bootstrap-kaart

In Bootstrap-kaart mei de ôfbylding, de titel fan it ûnderwerp, in koart stikje tekst en in oprop-ta-aksje-knop. Jo side hat Bootstrap nedich.

Live foarbyld

<div class="card" style="max-width:24rem">
  <a href="https://designoftheday.org/fy/" target="_blank" rel="noopener"><img src="https://competition.adesignaward.com/design-of-the-day/today.png" class="card-img-top" alt="Utljochte Untwerp fan de Dei dat priiswinnende kreative eksellinsje sjen lit" loading="lazy"></a>
  <div class="card-body">
    <h5 class="card-title">Untwerp fan de Dei</h5>
    <p class="card-text">A' Design Award toant elke dei in treflik ûntwerpwurk, in heech ynnovatyf produkt of in tige kreatyf projekt as it Untwerp fan de Dei, mei opmerklike foarbylden fan kreativiteit en goed ûntwerp.</p>
    <a href="https://designoftheday.org/fy/" class="btn btn-danger" target="_blank" rel="noopener">Untdek Untwerp fan de Dei</a>
  </div>
</div>

<div data-dotd="designoftheday.org" data-dotd-variant="card"></div>
<script async src="https://designoftheday.org/feature.js?lang=fy"></script>

Opsje 3: JSON

Foar ûntwikkelers, apps en automatisearring. De JSON befettet de namme, de beskriuwing, it ôfbyldingsadres, de keppelings en de datum. Cross-origin-oanfragen binne tastien.

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

Foarbyld-antwurd

{
    "domain": "designoftheday.org",
    "name": "Untwerp fan de Dei",
    "feature": "Untwerp fan de Dei",
    "paragraph": "A' Design Award toant elke dei in treflik ûntwerpwurk, in heech ynnovatyf produkt of in tige kreatyf projekt as it Untwerp fan de Dei, mei opmerklike foarbylden fan kreativiteit en goed ûntwerp.",
    "description": "Untwerp fan de Dei toant elke dei in treflik ûntwerpwurk, in heech ynnovatyf produkt of in tige kreatyf projekt, mei opmerklike foarbylden fan kreativiteit en goed ûntwerp erkend troch de heech prestizjeuze A' Design Award and Competition.",
    "call_to_action": "Untdek Untwerp fan de Dei",
    "date": "2026-11-08",
    "language": "fy",
    "image": "https://competition.adesignaward.com/design-of-the-day/today.png",
    "image_alt": "Utljochte Untwerp fan de Dei dat priiswinnende kreative eksellinsje sjen lit",
    "url": "https://designoftheday.org/fy/",
    "feature_url": "https://competition.adesignaward.com/design-of-the-day.html",
    "registry_url": "https://competition.adesignaward.com/designs-of-the-days.php",
    "embed_url": "https://designoftheday.org/fy/feature/"
}

Goed om te witten

Hâld de keppeling om de ôfbylding hinne, sadat jo besikers it folsleine ûnderwerp ûntdekke kinne.
Brûk altyd it ôfbyldingsadres dat hjirboppe toand wurdt en bewarje gjin kopy, sadat jo side aktueel bliuwt.
De ôfbylding is responsyf: hy wurdt nea breder as syn kontener.
Help nedich of in oanpast formaat? Nim kontakt mei ús op.

Sponsore

Untdek priiswinende ûntwerpen