Se un'immagine è più larga della colonna dei contenuti principali, come spesso accade su schermi più piccoli, DevSite la limita automaticamente alla larghezza della colonna. Tuttavia, se per l'immagine sono impostati entrambi gli attributi width e height, viene ridimensionata solo la larghezza, causando la distorsione dell'immagine. Di conseguenza, non impostare height dell'immagine. Ciò significa che la pagina potrebbe essere ridisegnata se il caricamento dell'immagine è lento (causando un salto), ma è meglio di un'immagine che non si adatta allo schermo.
Puoi applicare class="screenshot" a un'immagine per aggiungere un bordo che la distanzi dal testo nelle vicinanze. Questo tipo di sfondo viene in genere utilizzato per gli screenshot con sfondo bianco che altrimenti andrebbero persi nella pagina. Non utilizzarlo per le immagini che non lo richiedono.
A fianco del testo
L'immagine a destra ha anche class="attempt-right", che la fa galleggiare a destra sugli schermi più grandi, ma forza il layout verticale sugli schermi più piccoli, come i tablet e quelli più piccoli, dove il galleggiamento a destra causerebbe problemi. È disponibile anche class="attempt-left". Per utilizzare attempt-left e attempt-right insieme, assicurati che l'elemento attempt-left venga visualizzato per primo.
Quando le immagini sono fluttuanti, non possono superare il 50% della larghezza della colonna. In caso contrario, vengono riscalate.
<img src="/path/to/image.png" alt="Alert dialog"
class="screenshot attempt-right">
Puoi utilizzare le stesse classi per mettere in primo piano altri elementi, ad esempio un <figure> contenente sia un'immagine che una didascalia:
<figure class="attempt-right">
<img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
<figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>
Cancellare il testo a livello
Per impedire che il testo venga a capo intorno a un elemento con flottante e venga visualizzato nella sua larghezza nativa, puoi aggiungere una classe clear agli elementi interessati che seguono l'elemento con flottante.
<p class="clear">Hello world.</p>
Esempio con la classe clear
In questo esempio, il secondo paragrafo include una classe clear.
Questo paragrafo si inserisce intorno all'immagine in primo piano . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Questo paragrafo ha una classe chiara e non si inserisce nell'immagine in primo piano. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Esempio senza la classe clear
In questo esempio, entrambi i paragrafi si inseriscono intorno all'immagine in primo piano.
Questo paragrafo si inserisce intorno all'immagine in primo piano. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Questo paragrafo si inserisce intorno all'immagine in primo piano. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Immagini con tema scuro
DevSite fornisce un piccolo insieme di nomi di classi che possono essere applicati alle immagini per modificarne l'aspetto quando è attivato il tema scuro.
Oscuramento delle immagini
Per impostazione predefinita, tutte le immagini, ad eccezione dei file SVG, sono leggermente scurite nel tema scuro.
Per rimuovere l'oscuramento predefinito da un'immagine quando il tema scuro è attivo, aggiungi una classe no-filter all'immagine:
<img src="/path/to/image.jpg" class="no-filter" alt="">
Invertire un'immagine
Per le immagini con una tavolozza di colori monocromatici neri o scuri, aggiungi una classe invert all'immagine per visualizzarla in bianco/chiaro nel tema scuro:
<img src="/site-assets/logo-github.png" class="invert" alt="">
Per una pagina _index.yaml, aggiungi invert al campo classname per un elemento di riga:
- items:
- classname: invert
icon:
path: /site-assets/logo-github.png
Immagine separata della variante del tema scuro
Se vuoi fornire un'immagine separata che venga visualizzata solo quando è attivato il tema scuro, inserisci l'elemento <img> esistente in un elemento <picture> e aggiungi un elemento <source> per la variante con tema scuro.
Nell'esempio seguente, sono presenti due file SVG per il logo di Google all'interno di un elemento <picture>. Quando il tema scuro è disattivato, viene visualizzato il file immagine all'interno dell'elemento <img>, che mostra il logo con i quattro colori del brand Google. Quando il tema scuro è attivo, viene visualizzato il file immagine all'interno dell'elemento <source>, in cui il logo è completamente bianco e non ha colori del brand.
Esempio
Codice
<picture>
<source
srcset="/devsite/images/google-dark-theme.svg"
media="(prefers-color-scheme: dark)"
class="devsite-dark-theme"
alt="">
<img src="/devsite/images/google.svg" alt="">
</picture>
Note
Poiché il tema scuro è attivato tramite un flag della funzionalità, tieni presente quanto segue sugli attributi dell'elemento <source>:
L'elemento <source> deve includere una classe devsite-dark-theme, che fornisce un hook per il frontend di DevSite per aggiornare l'attributo media e il relativo valore in base all'opzione del tema scuro selezionata dall'utente: light, dark o device.
Il valore dell'attributo media deve includere una query sui media (prefers-color-scheme: dark).
Se hai già elementi <source> con query media nell'attributo media, aggiungi le query multimediali esistenti con and (prefers-color-scheme: dark) o aggiungi un nuovo elemento <source> il cui valore dell'attributo media è (prefers-color-scheme: dark). La query media e il relativo valore verranno rimossi o sostituiti a seconda dell'opzione del tema scuro selezionata dall'utente.
Sebbene tecnicamente il nome file dell'immagine della variante del tema scuro nell'attributo srcset possa essere qualsiasi, è consigliabile aggiungere -dark-theme al nome file dell'immagine esistente.