Scegliere immagini per schermi diversi e anteprime social

Un’illustrazione orizzontale può contenere tutti i dettagli necessari e funzionare comunque male in una card. Nell’esempio di Northstar Studio, il taccuino del laboratorio si trova vicino al bordo destro del tavolo. L’originale ha abbastanza dettaglio, ma il ritaglio centrato taglia il soggetto. Su un telefono, mostrare l’intero tavolo rende il taccuino troppo piccolo.

Sono problemi editoriali diversi. Un file più piccolo facilita la distribuzione dell’immagine. Un punto focale guida il ritaglio. Un’immagine mobile separata permette di scegliere una composizione più ravvicinata per uno schermo stretto.

Per questo esempio, scegli due immagini dalla Media Library: Workshop table landscape e Workshop notebook detail. L’immagine orizzontale è l’illustrazione originale di 2400×1200. Il dettaglio verticale è un’altra immagine dello stesso taccuino, di 900×1200, preparata per il mobile.

Mantieni chiara questa distinzione. WebBlocks CMS genera varianti più piccole e ritagliate dalle immagini JPEG, PNG e WebP pubbliche supportate. I file generati non diventano voci Media Library aggiuntive. Il dettaglio del ritratto appare qui perché è un secondo originale scelto dall'editore.

Apri l'immagine orizzontale in Media e guarda Image Variants. In questo esempio, i ritagli centrati di miniatura e scheda tagliano parte del taccuino. Le anteprime dei contenuti preservano le proporzioni dell'ampia illustrazione; non lo trasformano in una visione più ravvicinata del soggetto.

Caricare un’immagine con più risoluzione non risolverebbe il problema di inquadratura. Il soggetto si trova nella parte sbagliata del ritaglio. Queste sono anteprime delle varianti di sistema: vedere una variante Card non significa che il blocco Card la scelga automaticamente. La versione attuale riserva le varianti card e hero, senza offrire campi Media Library dedicati a questi ruoli dei blocchi.

Nel modulo di modifica del media, seleziona il taccuino con Focal Point e salva la modifica. Il punto appartiene al record del media: controllane gli altri utilizzi prima di spostarlo. Guida i ritagli generati da quell’immagine e non è un’impostazione distinta per ogni posizione.

Usa Regenerate variants per ricreare e controllare le anteprime. Ora i ritagli Thumbnail e Card conservano il taccuino. L’originale resta intatto. Le varianti Contain mantengono le proporzioni originali: spostare il punto non ingrandisce il soggetto nel normale blocco Image.

Le dimensioni delle varianti sono definite dal CMS. Questa schermata consente all'editor di esaminarli e rigenerarli; non offre dimensioni personalizzate per ogni progetto. Controlla anche l'anteprima Social: le immagini social della pagina o del sito utilizzano il ritaglio social per i metadati Open Graph e Twitter.

Il blocco Immagine della pagina utilizza Workshop table landscape come risorsa multimediale predefinita e Workshop notebook detail come Mobile Image. La seconda selezione è una scelta editoriale, indipendente dalle varianti generate.

Fino a 768 pixel di larghezza inclusi, il renderer seleziona l’immagine mobile. Gli schermi più larghi usano quella predefinita. Se la selezione mobile manca, è privata o è stata eliminata, viene usata l’immagine predefinita. Il blocco Image fornisce anche immagini candidate responsive, ma scegliere un file più piccolo è diverso da selezionare questa composizione alternativa.

L’anteprima desktop mostra l’intero tavolo. L’anteprima mobile mette in evidenza il taccuino, senza costringere il visitatore a cercarlo in una scena molto più ampia.

Entrambe le immagini utilizzano lo stesso testo alternativo e la stessa didascalia. In questo esempio, “Un quaderno di laboratorio illustrato con un cerchio di terracotta e un triangolo verde” descrive il soggetto in entrambe le viste. Il testo alternativo e i sottotitoli possono essere tradotti in base alla lingua, ma le selezioni predefinite e mobili rimangono condivise tra le lingue. Scegli composizioni correlate che siano ancora in accordo con quelle descrizioni.

Restano due controlli. Il Gallery Viewer del blocco Image apre ancora l’immagine predefinita a piena risoluzione. Inoltre, Mobile Image non determina l’immagine social della pagina: scegli e controlla separatamente l’immagine della pagina o del sito usata per la condivisione. La variante Social del CMS mostra il ritaglio generato; quando condividi il link, verifica anche la scheda finale del servizio esterno.

Per il comportamento sottostante, vedere Supporto Image Variants. Aggiungi un'immagine cammina attraverso i campi dei blocchi. Quando le immagini fanno parte di un aggiornamento della pagina live, utilizzare flusso di lavoro di revisione delle pagine pubblicate.

I commenti vengono esaminati prima della pubblicazione.