Bilder

Varslingsdialog

Hvis et bilde er bredere enn hovedinnholdskolonnen – som ofte skjer på mindre skjermer – begrenser DevSite det automatisk til kolonnens bredde. Men hvis bildet har både width og height angitt, endres kun bredden, noe som fører til at bildet forvrenges. Følgelig, ikke still inn bildets height . Dette betyr at siden kan tegnes på nytt hvis bildet er tregt med å laste (forårsaker et hopp), men det er bedre enn et bilde som ikke får plass på skjermen.

Du kan bruke class="screenshot" på et bilde for å gi det en kantlinje som forskyver det fra nærliggende tekst. Dette brukes vanligvis for skjermbilder som har hvit bakgrunn og ellers blir borte på siden. Ikke bruk det til bilder som ikke trenger det.

Flytende ved siden av tekst

Bildet til høyre har også class="attempt-right" , som flyter bildet rett på større skjermer, men tvinger bildet inn i vertikal layout på mindre skjermer, nettbrett og mindre, der flytende høyre ville forårsake problemer. class="attempt-left" er også tilgjengelig. For å bruke attempt-left og attempt-right sammen, sørg for at attempt-left -elementet kommer først.

Når bildene er flytende, kan de ikke overstige 50 % av kolonnebredden. Hvis de ville, skaleres de på nytt.

<img src="/path/to/image.png" alt="Alert dialog"
     class="screenshot attempt-right">

Du kan bruke de samme klassene til å flyte andre elementer, for eksempel en <figure> som inneholder både et bilde og en bildetekst:

<figure class="attempt-right">
  <img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
  <figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>

Fjerner flytende tekst

For å forhindre at tekst går rundt et flytende element og vises i dets opprinnelige bredde, kan du legge til en clear klasse til berørte elementer som følger det flytende elementet.

<p class="clear">Hello world.</p>

Eksempel med den klare klassen

I dette eksemplet inkluderer andre ledd en clear klasse.

Varslingsdialog

Dette avsnittet går rundt det flytende bildet . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Dette avsnittet har en tydelig klasse og omslutter ikke det flytende bildet . 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.

Eksempel uten den klare klassen

I dette eksemplet går begge avsnittene rundt det flytende bildet.

Varslingsdialog

Dette avsnittet går rundt det flytende bildet . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Dette avsnittet går rundt det flytende bildet . 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.

Mørkt temabilder

DevSite gir et lite sett med klassenavn som kan brukes på bilder for å endre utseendet når mørkt tema er aktivert.

Bildet blir mørkere

Som standard er alle bilder unntatt SVG-filer litt mørkere i mørkt tema.

For å fjerne standard mørklegging fra et bilde når mørkt tema er aktivert, legg til en no-filter klasse til bildet:

<img src="/path/to/image.jpg" class="no-filter" alt="">

Invertering av et bilde

For bilder med en svart eller mørk monokrom fargepalett, legg til en invert til bildet for å få det til å vise hvitt/lys i mørkt tema:

<img src="/site-assets/logo-github.png" class="invert" alt="">

For en _index.yaml -side, legg til invert i classname for et radelement:

- items:
  - classname: invert
    icon:
      path: /site-assets/logo-github.png

Separat mørkt temavariantbilde

Hvis du vil gi et eget bilde som bare vises når mørkt tema er aktivert, pakk det eksisterende <img> -elementet inn i et <picture> -element og legg til et <source> -element for varianten av mørkt tema.

I eksemplet nedenfor er det to SVG-filer for Google-ordmerket i et <picture> -element. Når mørkt tema er deaktivert, vises bildefilen i <img> -elementet, og viser ordmerket med de fire Google-merkefargene. Når mørkt tema er aktivert, vises bildefilen i <source> -elementet, der ordmerket er helt hvitt og ikke har noen merkefarger.

Eksempel

Kode

<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>

Notater

Fordi mørkt tema er aktivert bak et funksjonsflagg, vær oppmerksom på følgende om <source> -elementets attributter:

<source> -elementet må inkludere en devsite-dark-theme klasse, som gir en hook for DevSites grensesnitt for å oppdatere medieattributtet og dets verdi avhengig av det brukervalgte alternativet for mørkt tema: light , dark eller device . Medieattributtet må inkludere et (prefers-color-scheme: dark) mediesøk i verdien. Hvis du allerede har <source> -elementer med media i medieattributtet, kan du enten legge til de eksisterende mediespørringene med og (prefers-color-scheme: dark) eller legge til et nytt <source> -element hvis medieattributtverdi er (prefers-color-scheme: dark) . media og dens verdi vil bli fjernet eller erstattet avhengig av det brukervalgte alternativet for mørkt tema. Mens filnavnet på det mørke temavarianten i srcset attributtet teknisk sett kan være hva som helst, anbefales det å legge til -dark-theme til det eksisterende bildets filnavn.