La Légende du design
Intégrer le Légende du design du jour sur votre site web
La Légende du design publie une nouvelle sélection chaque jour. L'adresse de l'image ne change jamais, mais la photo qu'elle affiche est renouvelée : vous ajoutez le code une seule fois et vos visiteurs voient automatiquement la sélection du jour.
Comment ça fonctionne
Chaque jour, une nouvelle image est publiée à une adresse fixe. Votre page charge cette adresse et affiche donc toujours la sélection en cours ; un clic conduit vos visiteurs vers La Légende du design où l'article complet est présenté.
Vous préférez un script ? Ajoutez un conteneur et un script : le widget dessine le style choisi avec data-dotd-variant (image, cta ou card), dans la langue de l'adresse du script lorsque cette langue est disponible. Si vous ne pouvez pas exécuter de scripts, utilisez la version HTML de la même variante.
Variante A : image seule
L'image du jour, liée à La Légende du design. L'option la plus légère.
Aperçu en direct
<a href="https://thedesignlegend.com/fr/" target="_blank" rel="noopener">
<img src="https://competition.adesignaward.com/design-legend-of-the-day/today.png" alt="Légende du design du jour, rétrospective célébrant les réalisations d'une vie entière consacrée au design" 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=fr"></script>Variante B : image et appel à l'action
L'image du jour avec un appel à l'action en dessous.
Aperçu en direct
<a href="https://thedesignlegend.com/fr/" 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="Légende du design du jour, rétrospective célébrant les réalisations d'une vie entière consacrée au design" 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">Découvrir la Légende du design du jour</span>
</a><div data-dotd="thedesignlegend.com" data-dotd-variant="cta"></div>
<script async src="https://thedesignlegend.com/feature.js?lang=fr"></script>Variante C : carte Bootstrap
Une carte Bootstrap avec l'image, le titre de la sélection, un court paragraphe et un bouton d'appel à l'action. Votre page doit intégrer Bootstrap.
Aperçu en direct
<div class="card" style="max-width:24rem">
<a href="https://thedesignlegend.com/fr/" target="_blank" rel="noopener"><img src="https://competition.adesignaward.com/design-legend-of-the-day/today.png" class="card-img-top" alt="Légende du design du jour, rétrospective célébrant les réalisations d'une vie entière consacrée au design" loading="lazy"></a>
<div class="card-body">
<h5 class="card-title">Légende du design du jour</h5>
<p class="card-text">A' Design Award célèbre chaque jour un designer influent ou un architecte de classe mondiale dont la carrière exceptionnelle, les créations iconiques et les idées pionnières ont façonné l'histoire et le développement du design, en tant que Légende du design du jour.</p>
<a href="https://thedesignlegend.com/fr/" class="btn btn-danger" target="_blank" rel="noopener">Découvrir la Légende du design du jour</a>
</div>
</div><div data-dotd="thedesignlegend.com" data-dotd-variant="card"></div>
<script async src="https://thedesignlegend.com/feature.js?lang=fr"></script>Option 3 : JSON
Pour les développeurs, les applications et l'automatisation. Le JSON contient le nom, la description, l'adresse de l'image, les liens et la date. Les requêtes cross-origin sont autorisées.
fetch("https://thedesignlegend.com/feature.json?lang=fr")
.then(function (r) { return r.json(); })
.then(function (d) {
// d.name, d.feature, d.paragraph, d.image, d.url, d.date ...
});Exemple de réponse
{
"domain": "thedesignlegend.com",
"name": "La Légende du design",
"feature": "Légende du design du jour",
"paragraph": "A' Design Award célèbre chaque jour un designer influent ou un architecte de classe mondiale dont la carrière exceptionnelle, les créations iconiques et les idées pionnières ont façonné l'histoire et le développement du design, en tant que Légende du design du jour.",
"description": "La Légende du design célèbre les designers influents et les architectes de classe mondiale dont les carrières exceptionnelles, les créations iconiques, les idées pionnières et les contributions durables ont façonné l'histoire et le développement du design, mettant en lumière les personnalités créatives et les réalisations reconnues par le très prestigieux A' Design Award and Competition.",
"call_to_action": "Découvrir la Légende du design du jour",
"date": "2026-11-08",
"language": "fr",
"image": "https://competition.adesignaward.com/design-legend-of-the-day/today.png",
"image_alt": "Légende du design du jour, rétrospective célébrant les réalisations d'une vie entière consacrée au design",
"url": "https://thedesignlegend.com/fr/",
"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/fr/mise-en-avant/"
}Bon à savoir
- Conservez le lien autour de l'image afin que vos visiteurs puissent découvrir la sélection complète.
- Utilisez toujours l'adresse d'image indiquée ci-dessus et ne stockez pas de copie, pour que votre page reste à jour.
- L'image est responsive : elle ne dépasse jamais la largeur de son conteneur.
- Besoin d'aide ou d'un format personnalisé ? N'hésitez pas à nous contacter.