Innhold
- START Adaptiv bildemodul
- 2 Juster modulen
- 3 Sett brytepunkter
- 4 Konfigurer innhold
- 5 Flere alternativer
- 6 Adaptive bildestiler
- 7 AIS-endringer
- 8 Breakpoint redigeringer
- 9 Angi nodetype
- 10 Adaptivt bilde på klientsiden
- 11 Nye teknikker
- 12 Legg til flere stiler
- 13 Ytterligere størrelser
- 14 Innholdstype
- 15 Konfigurer stiler og brytepunkter
- 16 Responsive bilder og stiler
- 17 Flere stiler
- 18 Knytt stiler til bruddpunkter
- FINISH Klar til rulling
Denne artikkelen dukket først opp i nummer 232 av .net magazine - verdens mest solgte magasin for webdesignere og utviklere.
De fleste nettutviklere som bruker responsive teknikker vet at det kan være vondt i hodepine å servere bilder til mobile enheter med lav båndbredde.
Selv om du setter maks bredde på bildene dine til 100% og setter høyden til automatisk (du burde), sender webserveren fortsatt hele bildet til brukerens enhet. Dette suger opp potensielt dyrebar båndbredde på brukerens mobilforbindelse. Og, som vi alle vet (ikke sant?), Bør mobiloptimaliserte nettsteder ikke bare formateres til skjermen, de bør være optimalisert for forbindelser med lav båndbredde som mobile enheter ofte møter.
Heldigvis for de fleste utviklere har bransjens genier jobbet hardt med å utvikle teknikker for å lette denne smerten. Populære teknikker inkluderer Mairead Buchans metode, skaper responsive bilder ved hjelp av noscript-taggen, og Matt Wilcoxs adaptive bildesystem.
I denne veiledningen vil vi løse dette problemet fire ganger, takket være den nyeste versjonen av Drupal CMS, 7, og det enorme, brukerbidragte modulbiblioteket. Vi vil se på den adaptive bildemodulen, den adaptive bildestilmodulen, den adaptive bildemodulen på klientsiden og til slutt den responsive bilder og stilmodulen. Disse representerer gode løsninger for å optimalisere Drupal-nettstedet ditt for båndbredde sultede mobile enheter; alle modulene som brukes, bruker teknikkene som er oppført ovenfor.
START Adaptiv bildemodul
Last ned og hent ut til din nettsteder / alt / moduls katalog. Logg på Drupal og naviger til Administrator> Moduler. Du finner modulen under Annen seksjon. Merk av i boksen; truffet Lagre konfigurasjon.
2 Juster modulen
Navigere til Administrator> Konfigurasjon> Bildestiler. Lag en ny bildestil ved å klikke Legg til stil. Navngi det adaptiv. På den neste skjermen lar Drupal deg legge til effekter: du kan endre størrelse, beskjære, skalere, rotere og mer. Å velge adaptiv deretter treffer Legge til.
3 Sett brytepunkter
I det neste skjermbildet har du muligheten til å angi oppløsningsbruddpunkter. Modulen bruker fire oppløsninger som standard; det gir også muligheten til å sende enten den minste eller største i hendelsesoppløsningen kan ikke bestemmes. Velg passende alternativer; truffet Legg til effekt.
4 Konfigurer innhold
Vi må konfigurere innholdstypen vår for å bruke vår nye bildestil. Navigere til Administrator> Struktur> Innholdstyper. Du får se en liste over alle innholdstyper på nettstedet ditt. Klikk på administrere skjerm lenke ved siden av innholdstypen du vil bruke denne bildestilen.
5 Flere alternativer
Velg deretter tannhjulikonet som vises til høyre for bildet du vil bruke denne stilen på: flere alternativer vises. Innen Bildestil rullegardinmenyen, velg adaptiv. Når det er valgt, bla nedover og trykk på Lagre for å lagre innstillingene.
6 Adaptive bildestiler
I likhet med den adaptive bildemodulen bruker dette Matt Wilcoxs system. Last ned og trekk ut til nettsteder / alle / moduler. Navigere til Administrator> Moduler i Drupal - AIS vil være under Media seksjon. Merk av i boksen; truffet Lagre konfigurasjon.
7 AIS-endringer
AIS krever at du gjør endringer på webserveren din .htaccess (eller web.config) fil. Dette ber serveren ringe AIS-skriptet når den får en forespørsel om et adaptivt bilde. Legg til koden ovenfor til Drupal's .htaccess filen på slutten av delen for omskrivingsregler (nær linje 99).
8 Breakpoint redigeringer
Ved installasjon vil AIS ha en bildestil kalt adaptiv, og vil opprette flere adaptive bildestiler oppført under bildestiler. For å konfigurere, gå til Admin> Konfigurasjon> Adaptive Image Styles. Herfra kan du redigere brytepunkter for dine adaptive bilder.
9 Angi nodetype
Etter at du har redigert pausepunktene dine (om nødvendig), må du fremdeles angi nodetypen slik at den bruker adaptiv bildestil. For å gjøre dette, naviger til Administrator> Struktur> Innholdstyper, og klikk på administrere skjerm lenke. Herfra klikker du på tannhjulikonet ved siden av bildefeltet, og endrer bildestilen til adaptiv.
10 Adaptivt bilde på klientsiden
Dette benytter Mairead Buchans bruk av noscript stikkord. Last ned og pakk den ut til nettsteder / alle / moduler. Logg inn, naviger til admin / moduler, finn modul under Media, avmerkingsboksen og klikk Lagre konfigurasjon.
11 Nye teknikker
Adaptivt bilde på klientsiden er forskjellig fra de forrige modulene. Først må vi sette brytepunktene. Som standard har modulen fem, men du kan justere dette under Admin> Konfigurasjon> Adaptive Images. Her setter vi denne verdien til 3.
12 Legg til flere stiler
I dette neste trinnet må vi konfigurere bildestiler for hvert brytpunkt. Gå til Administrator> Konfigurasjon> Bildestiler og slå Legg til stil. Den første stilen vil bli kalt 420_small. I listen velger du Skala og slå Legge til. Sett bredde til 420px og slå Legg til effekt.
13 Ytterligere størrelser
Deretter må vi gjøre det samme for de neste to brytpunktene. Vi oppretter en ny bildestil som heter 730_med, og sett skaleringsbredden til 730px, og en annen stil som heter 1020_større med skaleringsbredden satt til 1020px. På slutten har du tre nye bildestiler.
14 Innholdstype
Deretter setter vi innholdstypen vår for å bruke de nye stilene. Gå til Administrator> Struktur> Innholdstyper, og klikk administrere skjerm ved siden av innholdstypen din. Adaptivt bilde på klientsiden bruker et annet visningsformater; under format kolonneendring Bilde til Adaptivt bilde.
15 Konfigurer stiler og brytepunkter
Etter at du har endret innholdsformatøren for bildet ditt, klikker du på tannhjulikonet som vises til høyre. Skjermen over vises. Dette lar deg knytte spesifikke bildestiler til brytpunkter. Konfigurer brytpunktene og bildestilene som vist, så er vi ferdige.
16 Responsive bilder og stiler
Denne siste modulen endrer dynamisk bildestil (og oppløsning) via JS som oppdager skjermstørrelse. Installer, trekk ut til nettsteder / alle / moduler, logg inn, gå til Administrator> Moduler og Annen. Kryss av i boksen og trykk Lagre konfigurasjon.
17 Flere stiler
Vi må lage noen få bildestiler. Vi ringer den første demo_narrow. Fra rullegardinmenyen tilgjengelige effekter, velg Skala og slå Legge til. Sett bredde til 420px og klikk Legg til effekt. Lag to stiler til, demo_normal og demo_omfattende, skalert til 730px og 1020px.
18 Knytt stiler til bruddpunkter
Gå til Administrator> Konfigurasjon> Responsive Images. Klikk Legge til på toppen. Sett merkelapp til Smal, suffiks til _smal og bredde til 420. Gjenta prosessen for å lage to responsive bildesuffikser for de gjenværende bildestilene.
FINISH Klar til rulling
Velg Innstillinger kategorien øverst til høyre på Responsive Images Configuration side. Sett standard suffikset til _smal. Klikk Lagre konfigurasjon. På dette punktet er modulen for responsive bilder og stiler klar og vil laste de riktige bildene til enheten din!
Takk til Lyza Gardner for hennes tekniske fagfellevurdering av denne opplæringen
Oppdag de 20 beste online ressursene for opplæring i webdesign på Creative Bloq.
