Sisältö
- Aloita mukautuva kuvamoduuli
- 2 Säädä moduuli
- 3 Aseta taukopisteet
- 4 Määritä sisältö
- 5 Lisää vaihtoehtoja
- 6 Mukautuvat kuvatyylit
- 7 AIS-muutosta
- 8 Breakpoint-muokkausta
- 9 Aseta solmun tyyppi
- 10 Asiakkaan puolen mukautuva kuva
- 11 Uudet tekniikat
- 12 Lisää lisää tyylejä
- 13 muuta kokoa
- 14 Sisältötyyppi
- 15 Määritä tyylit ja katkaisupisteet
- 16 Reagoivat kuvat ja tyylit
- 17 Useita tyylejä
- 18 Liitä tyylit katkaisupisteisiin
- VALMIS Valmis rullalle
Tämä artikkeli ilmestyi ensimmäisen kerran .net-lehden numerossa 232 - maailman myydyimmässä aikakauslehdessä verkkosivujen suunnittelijoille ja kehittäjille.
Useimmat reagoivia tekniikoita käyttävät verkkokehittäjät tietävät, että kuvien tarjoaminen matalan kaistanleveyden mobiililaitteille voi olla kipu päänsäryssä.
Vaikka asetat kuviesi enimmäisleveydeksi 100% ja korkeudeksi automaattisen (sinun pitäisi), Web-palvelin lähettää silti koko kuvan käyttäjän laitteelle. Tämä imee potentiaalisesti arvokasta kaistanleveyttä käyttäjän mobiililiitännässä. Ja kuten me kaikki tiedämme (eikö?), Mobiililaitteille optimoituja verkkosivustoja ei pitäisi muotoilla vain näytölle, vaan ne tulisi optimoida matalan kaistanleveyden yhteyksille, joita mobiililaitteet usein kohtaavat.
Useimpien kehittäjien onneksi teollisuutemme nerot ovat työskennelleet ahkerasti keksimällä tekniikoita tämän kivun lievittämiseksi. Suosittuja tekniikoita ovat Mairead Buchanin menetelmä, reagoivien kuvien luominen noscript-tunnisteen avulla ja Matt Wilcoxin mukautuva kuvajärjestelmä.
Tässä opetusohjelmassa ratkaisemme tämän ongelman neljä kertaa Drupal CMS: n uusimman version 7 ja sen laajan, käyttäjien toimittaman moduulikirjaston ansiosta. Tarkastelemme mukautuvaa kuvamoduulia, mukautuvia kuvatyylejä, asiakaspuolen mukautuvia kuvamoduuleja ja lopuksi reagoivia kuvia ja tyylejä. Nämä ovat loistavia ratkaisuja Drupal-verkkosivustosi optimointiin kaistanleveydelle nälkään jääneille mobiililaitteille; Kaikissa käytetyissä moduuleissa käytetään yllä lueteltuja tekniikoita.
Aloita mukautuva kuvamoduuli
Lataa ja pura omaan sites / all / modules -hakemisto. Kirjaudu Drupaliin ja siirry kohtaan Järjestelmänvalvoja> Moduulit. Moduuli on Muu -osiossa. Valitse ruutu; osuma Tallenna kokoonpano.
2 Säädä moduuli
Navigoida johonkin Järjestelmänvalvoja> Kokoonpano> Kuvatyylit. Luo uusi kuvatyyli napsauttamalla Lisää tyyli. Nimeä se mukautuva. Seuraavassa näytössä Drupal antaa sinun lisätä tehosteita: voit muuttaa kokoa, rajata, skaalata, kiertää ja paljon muuta. Valitse mukautuva sitten osui Lisätä.
3 Aseta taukopisteet
Seuraavassa näytössä sinulla on mahdollisuus asettaa resoluution katkaisupisteet. Moduuli käyttää oletusarvoisesti neljää tarkkuutta; se tarjoaa myös mahdollisuuden lähettää joko pienin tai suurin, mikäli resoluutiota ei voida määrittää. Valitse sopivat vaihtoehdot; osuma Lisää tehoste.
4 Määritä sisältö
Meidän on määritettävä sisältötyyppimme käyttämään uutta kuvatyyliä. Navigoida johonkin Järjestelmänvalvoja> Rakenne> Sisältötyypit. Näet luettelon kaikista verkkosivustosi sisältötyypeistä. Klikkaa hallita näyttöä -linkki sen sisältötyypin vieressä, jota haluat käyttää tätä kuvatyyliä.
5 Lisää vaihtoehtoja
Valitse seuraavaksi hammaskuvake, joka näkyy kuvan oikealla puolella, johon haluat käyttää tätä tyyliä: useita vaihtoehtoja tulee näkyviin. Sisällä Kuvan tyyli avattavasta valikosta mukautuva. Kun se on valittu, vieritä alas ja paina Tallentaa -painiketta tallentaaksesi asetukset.
6 Mukautuvat kuvatyylit
Kuten mukautuva kuvamoduuli, tässä käytetään Matt Wilcoxin järjestelmää. Lataa ja pura sivustot / kaikki / moduulit. Navigoida johonkin Järjestelmänvalvoja> Moduulit Drupalissa - AIS on Media -osiossa. Valitse ruutu; osuma Tallenna kokoonpano.
7 AIS-muutosta
AIS vaatii sinua tekemään muutoksia verkkopalvelimeesi .htaccess (tai web.config) tiedosto. Tämä käskee palvelinta soittamaan AIS-komentosarjaan, kun se saa pyynnön mukautuvasta kuvasta. Lisää yllä oleva koodi Drupalin .htaccess tiedosto uudelleenkirjoitussääntöjen lopussa (lähellä riviä 99).
8 Breakpoint-muokkausta
Asennettaessa AIS: llä on kuvatyyli nimeltä mukautuvaja luo useita mukautuvat kuvatyylit lueteltu kohdassa kuvan tyylit. Määritä siirtymällä kohtaan Järjestelmänvalvoja> Kokoonpano> Adaptive Image Styles. Täältä voit muokata mukautuvien kuviesi katkaisupisteitä.
9 Aseta solmun tyyppi
Kun olet muokannut katkaisupisteitä (tarvittaessa), sinun on silti määritettävä solmun tyyppi käyttämään mukautuva kuvan tyyli. Voit tehdä tämän siirtymällä kohtaan Järjestelmänvalvoja> Rakenne> Sisältötyypitja napsauta hallita näyttöä linkki. Napsauta tästä kuvakentän vieressä olevaa hammaskuvaketta ja muokkaa kuvan tyyliä mukautuva.
10 Asiakkaan puolen mukautuva kuva
Tämä käyttää Mairead Buchanin käyttöä noscript tag. Lataa ja pura se sivustot / kaikki / moduulit. Kirjaudu sisään, siirry kohtaan admin / moduulit, etsi moduuli kohdasta Media, valintaruutu ja napsauta Tallenna kokoonpano.
11 Uudet tekniikat
Asiakkaan puolen mukautuva kuva eroaa edellisistä moduuleista. Ensin meidän on asetettava katkaisupisteet. Oletusarvoisesti moduulissa on viisi, mutta voit säätää tätä kohdassa Järjestelmänvalvoja> Kokoonpano> Mukautuvat kuvat. Tässä asetamme tämän arvon arvoksi 3.
12 Lisää lisää tyylejä
Tässä seuraavassa vaiheessa meidän on määritettävä kuvan tyylit kullekin katkaisupisteelle. Mene Järjestelmänvalvoja> Kokoonpano> Kuvatyylit ja osui Lisää tyyli. Ensimmäistä tyyliä kutsutaan 420_pieni. Valitse valintaluettelosta Mittakaava ja osui Lisätä. Aseta leveys että 420 kuvapistettä ja osui Lisää tehoste.
13 muuta kokoa
Seuraavaksi meidän on tehtävä sama kahdelle seuraavalle katkaisupisteellemme. Luomme uuden kuvan tyylin nimeltä 730_medja aseta skaalausleveydeksi 730 kuvapistettä, ja toinen tyyli kutsutaan 1020_suuri skaalausleveydeksi asetettu 1020 kuvapistettä. Lopussa sinulla on kolme uutta kuvatyyliä.
14 Sisältötyyppi
Seuraavaksi asetamme sisältötyyppimme käyttämään uusia tyylejä. Mene Järjestelmänvalvoja> Rakenne> Sisältötyypitja napsauta hallita näyttöä sisältötyypin vieressä. Asiakkaan puolen mukautuva kuva käyttää eri näytön muotoilijaa; alla muoto sarakkeen muutos Kuva että Mukautuva kuva.
15 Määritä tyylit ja katkaisupisteet
Kun olet muuttanut kuvan sisällön muotoilijaa, napsauta oikealla näkyvää hammaskuvaketta. Yllä oleva näyttö tulee näkyviin. Tämän avulla voit liittää tietyt kuvatyylit katkaisupisteisiin. Määritä katkaisupisteet ja kuvatyylit kuvan mukaisesti ja olemme kaikki valmiit.
16 Reagoivat kuvat ja tyylit
Tämä viimeinen moduuli muuttaa dynaamisesti kuvan tyyliä (ja tarkkuutta) JS: n avulla, joka tunnistaa näytön koon. Asenna, pura sivustot / kaikki / moduulit, kirjaudu sisään, siirry Järjestelmänvalvoja> Moduulit ja Muu. Rasti ruutu ja osuma Tallenna kokoonpano.
17 Useita tyylejä
Meidän on luotava muutama kuvatyyli. Soitamme ensimmäiseen demo_narrow. Valitse käytettävissä olevien tehosteiden pudotusvalikosta Mittakaava ja osui Lisätä. Aseta leveys että 420 kuvapistettä ja napsauta Lisää tehoste. Luo vielä kaksi tyyliä, demo_normaali ja demo_wide, skaalattu 730 kuvapistettä ja 1020 kuvapistettä.
18 Liitä tyylit katkaisupisteisiin
Mene Järjestelmänvalvoja> Kokoonpano> Reagoivat kuvat. Klikkaus Lisätä huipulla. Aseta etiketti että Kapea, pääte että _kapea ja leveys että 420. Toista prosessi, kun haluat luoda vielä kaksi reagoivaa kuvan jälkiliitettä jäljellä oleville kuvatyyleille.
VALMIS Valmis rullalle
Valitse asetukset -välilehti oikeassa yläkulmassa Reagoivien kuvien määritys sivu. Aseta oletuskuvaksi _kapea. Klikkaus Tallenna kokoonpano. Tässä vaiheessa reagoiva kuvat ja tyylit -moduuli on valmis ja lataa sopivat kuvat laitteellesi!
Kiitos Lyza Gardnerille tämän opetusohjelman teknisestä vertaisarvioinnista
Löydä 20 parhaan online-resurssin verkkosuunnittelukoulutusta Creative Bloqista.
