Classes utilitaires de settings/_titles.scss, indépendantes de la balise h1…h6.
Bienvenue sur votre nouveau site
Nos dernières actualités
Ouverture d’un nouvel espace culturel
Liens utiles
Choisir une taille de fichier, son recadrage et son adaptation à l’écran.
size: 'large'
L’image tient dans une limite de 1280 × 1280 px. Son ratio reste intact ; elle n’est pas forcée dans un carré.
size: 'thumbnail'
Une vignette de 150 × 150 px. Le cadrage coupe une partie du visuel si l’original a un autre ratio et est suffisamment grand.
srcset: true
Activé par défaut : le navigateur choisit une résolution parmi les variantes disponibles. Ce réglage complète size, sans changer le cadrage.
| Gabarit | Dimensions | Comportement | Usage conseillé |
|---|---|---|---|
thumbnail |
150 × 150 px | Recadrage | Vignette, avatar |
small |
480 × 480 px maximum | Proportions conservées | Petit aperçu |
medium |
768 × 768 px maximum | Proportions conservées | Carte, colonne |
large |
1280 × 1280 px maximum | Proportions conservées | Contenu, article |
xlarge |
1920 × 1920 px maximum | Proportions conservées | Hero, visuel large |
full |
Dimensions du fichier importé | Proportions conservées | Fichier source |
MediaHelper::displayImage($imageId, size: 'large');full est la valeur par défaut. WordPress peut avoir réduit un très grand fichier lors de l’import. Une URL brute n’a pas de variantes WordPress : utiliser un ID média ou un tableau ACF pour sélectionner un gabarit.
// Déclarer dans FeatureImageSizes::registerImageSizes()
add_image_size('banner', 1600, 600, true);
// Puis utiliser le nom enregistré
MediaHelper::displayImage($imageId, size: 'banner');true demande un recadrage ; false conserve les proportions. size attend une chaîne, pas un tableau de dimensions. Les médias déjà importés doivent avoir leurs nouvelles variantes générées.
Découpe un texte en caractères, mots ou lignes, puis anime chaque fragment à son entrée dans l’écran.
Accroche
Révéler un message en un clin d’œil.
Slogan, chiffre clé ou paragraphe d’introduction : les transitions typographiques guident la lecture et donnent du rythme à une page sans alourdir le contenu.
<p data-split="words" data-split-stagger='{"amount": 0.5, "from": "start"}'>…</p>Cliquer une icône pour copier son slug dans le presse-papier.
Combinaison .cta.--filled ou .cta.--link et d’une couleur .--primary, .--secondary…
Information
Une nouvelle version du catalogue est disponible.
Succès
Vos modifications ont bien été enregistrées.
Avertissement
Vérifiez les informations avant de continuer.
Erreur
Une erreur est survenue. Réessayez dans quelques instants.
6 résultats
.card
Risus, lacus, facilisis amet amet, vehicula. Et est facilisis id consequat, ante cras. Vulputate rhoncus dictum in morbi phasellus. Morbi egestas eu sodales dui sit. Nulla aliquam commodo augue accumsan.
.card.--wide (à partir de 992px, vertical en dessous)
Risus, lacus, facilisis amet amet, vehicula. Et est facilisis id consequat, ante cras. Vulputate rhoncus dictum in morbi phasellus. Morbi egestas eu sodales dui sit. Nulla aliquam commodo augue accumsan.
Modale Fancybox : focus piégé dans la fenêtre, fermeture avec Échap, retour du focus sur le déclencheur.
@yield('modal-…') dans layouts/app.blade.php.@section('modal-…'), dans un conteneur id masqué.data-fancybox + data-src="#id".<button data-fancybox="modal-styleguide" data-src="#modal-styleguide">
Ouvrir
</button>
@section('modal-styleguide')
<div id="modal-styleguide" style="display:none;">
[...]
</div>
@endsectionUn seul composant sections/hero, cinq rendus. Aperçus dans un faux écran : les styles ne sont pas modifiés, seul le cadre est propre au styleguide.