Choisir des images pour différents écrans et aperçus sociaux

Une illustration large peut contenir tous les détails nécessaires et mal fonctionner dans une carte. Dans cet exemple de Northstar Studio, le carnet d’atelier se trouve près du bord droit de la table. L’original est assez détaillé, mais le recadrage centré coupe le sujet. Sur un téléphone, montrer toute la table rend le carnet trop petit.

Ce sont des décisions éditoriales différentes. Un fichier plus petit facilite la diffusion. Un point focal guide le recadrage. Une image mobile distincte permet de choisir une composition plus rapprochée pour un écran étroit.

Pour cet exemple, choisissez deux images dans la Media Library : Workshop table landscape et Workshop notebook detail. L’image horizontale est l’illustration originale de 2400×1200. Le détail vertical est une autre image du même carnet, de 900×1200, préparée pour le mobile.

Gardez cette distinction claire. WebBlocks CMS génère des variantes plus petites et recadrées à partir des images publiques JPEG, PNG et WebP prises en charge. Ces fichiers générés ne deviennent pas des entrées Media Library supplémentaires. Le détail du portrait apparaît ici car il s'agit d'un deuxième original choisi par l'éditeur.

Ouvrez l'image paysage dans Media et regardez Image Variants. Dans cet exemple, les recadrages centrés de la vignette et de la carte ont coupé une partie du bloc-notes. Les aperçus du contenu préservent les proportions de l'illustration large ; ils ne le transforment pas en une vue plus rapprochée du sujet.

Une image de plus haute résolution ne résoudrait pas ce problème de cadrage. Le sujet se trouve au mauvais endroit dans le recadrage. Il s’agit de variantes système : voir une variante Card ne signifie pas que le bloc Card la choisit automatiquement. La version actuelle réserve les variantes card et hero sans proposer de champs Media Library dédiés à ces rôles de blocs.

Dans le formulaire du média, sélectionnez le carnet avec Focal Point et enregistrez la modification. Le point appartient à la fiche du média : vérifiez ses autres utilisations avant de le déplacer. Il guide les recadrages générés de cette image ; ce n’est pas un réglage distinct pour chaque emplacement.

Utilisez Regenerate variants pour recréer et examiner les aperçus. Les recadrages Thumbnail et Card conservent maintenant le carnet. Le fichier original reste intact. Les variantes Contain préservent les proportions : déplacer le point ne rapproche donc pas le sujet dans le bloc Image habituel.

Les tailles des variantes sont définies par le CMS. Cet écran permet à un éditeur de les inspecter et de les régénérer ; il n'offre pas de dimensions personnalisées pour chaque projet. Consultez également l'aperçu social : les images sociales de pages ou de sites utilisent le recadrage social pour les métadonnées Open Graph et Twitter.

Le bloc Image de la page utilise Workshop table landscape comme élément multimédia par défaut et Workshop notebook detail comme Mobile Image. La deuxième sélection est un choix éditorial, indépendant des variantes générées.

Jusqu’à 768 pixels de largeur inclus, le moteur choisit l’image mobile. Les écrans plus larges utilisent l’image par défaut. Si la sélection mobile manque, est privée ou a été supprimée, l’image par défaut est utilisée. Le bloc Image fournit aussi des images candidates responsives, mais choisir un fichier plus petit est différent de sélectionner cette autre composition.

L’aperçu sur ordinateur montre toute la table. L’aperçu mobile met le carnet en avant sans obliger le visiteur à le chercher dans une scène beaucoup plus large.

Les deux images utilisent le même bloc de texte alternatif et la même légende. Dans cet exemple, « Un cahier d'atelier illustré avec un cercle en terre cuite et un triangle vert » décrit le sujet dans les deux vues. Le texte alternatif et les légendes peuvent être traduits par langue, mais les sélections par défaut et mobiles restent partagées dans toutes les langues. Choisissez des compositions connexes qui correspondent toujours à ces descriptions.

Deux vérifications restent nécessaires. Le Gallery Viewer du bloc Image ouvre toujours l’image par défaut en pleine résolution. De plus, Mobile Image ne choisit pas l’image sociale de la page : sélectionnez et vérifiez séparément l’image de page ou de site utilisée pour le partage. La variante Social du CMS montre son recadrage généré ; au moment de partager le lien, vérifiez aussi la carte finale du service externe.

Pour le comportement sous-jacent, voir Média Image Variants. Ajouter une image parcourt les champs de blocs. Lorsque les images font partie d'une mise à jour de page en direct, utilisez le workflow de révision des pages publiées.

Les commentaires sont examinés avant leur publication.