Minska

There is no place like /home

Žinutės | Blogas | Mintys | Elektronika | Technologijos | Politika | Oro stebėjimas | Filmai ir serialai | Knygos | Apie

Paveiksliukai tinklaraštyje

Šis įrašas skirtas labiausiai man pačiam, kad turėčiau lengvai pasiekiamą užrašytą taisyklę, kuria vadovaudamasis galėsiu kurti panašiai atrodančius įrašus. Šį kartą tai bus pamąstymai ir nuostatos, liečiančios paveiksliukus šiame tinklaraštyje.

Kadangi įrašus rašau tiesiai Vim teksto redaktoriuje, HTML kodu, paveiksliuko įterpimas įraše gaunamas, kai aš nukopijuoju paveiksliuką į /vaizdai direktoriją ir įterpiu įraše naudodamas <img> žymę. Tai nėra optimalu, nes paveiksliukų būna visokiausių dydžių, o tai nėra gerai nei tuo, kad juos visaip atvaizduoja naršyklės, nei tuo, kad didelės raiškos paveiksliukai užima daug atminties, o tai reiškia daug srauto ir palyginti ilgą siuntimo laiką. Dėl to reikia apsibrėžti kokio dydžio, raiškos paveiksliukus noriu dėti čia. Taip pat nebloga mintis būtų pasitikrinti kaip galima paveiksliukus įterpti su CSS pagalba, kad bent tinklaraštis atrodytų šiek tiek tvarkingiau.

Kadangi paveiksliukai būna skirtingų proporcijų, pavyzdžiui nuotraukos iš mano fotoaparato kraštinių santykis yra 4:3, o kompiuterio ekrano nuotraukos kraštinių santykis yra 16:9, tai verta suvienodinti paveiksliukų tik vieną kraštinę. Kadangi pas daugelį kompiuterių ekranai yra su kraštinių santykiu 16:9, tai reiškia, kad vietos ekrane yra mažiau vertikaliai, nei horizontaliai, todėl verta suvienodinti visų paveiksliukų aukštį.

Koks tas aukštis turėtų būti? Manau, kad neblogas pasirinkimas būtų 400 pikselių. Jei ekrano raiška 720p, arba dar žinoma kaip HD, tai paveiksliukas užims kiek daugiau nei pusę ekrano. Mano kompiuterio ekranas būtent tokios raiškos ir tinklaraštis su tokio dydžio paveikslais atrodo visai padoriai. Jei ekranas 1080p raiškos, dar žinoma kaip Full HD, tai paveikslėlis atrodys mažesnis, bet, manau, pilnai įžiūrimas. Kaip tinklaraštis atrodo 4K ekrane, neįsivaizduoju, tik žinau, kad 4K ekrane viskas gali atrodyti labai smulku, todėl tokio ekrano naudotojai gali prisiartinti vaizdą naršyklėje - tai nėra sunku. Aišku, galima būtų dinamiškai parinkti tinkamos raiškos paveiksliuką, priklausomai nuo aptiktos informacijos apie ekrano raišką, bet tai, man atrodo, reikalauja programavimo, skriptų, o aš norėčiau to išvengti šiame puslapyje.

400 pikselių aukščio paveiksliukai tinka iliustruoti įrašus, tačiau norint pamatyti visas detales, tokia raiška per maža. Dėl to, manau, padaryti taip, kad paspaudus ant paveiksliuko atsidarytų jo originalas.Taip jis nebus be reikalo užkraunamas ir puslapiai siųsis sparčiai, bet liks galimybė pamatyti vaizdą detaliau.

Kad neužknistų įterpinėti paveiksliukus, pasirašiau bash skriptuką, kuriam nurodžius paveiksliuką, jis bus konvertuojamas į mažesnio dydžio - 400 pikselių aukščio ir atitinkamai pikselių pločio paveiksliuką, kuris bus perkeliamas į šito tinklaraščio vaizdų direktoriją mano kompiuteryje. Originalas nukopijuojamas į tą pačią vaizdų direktoriją ir galų gale į ekraną išvedamas HTML kodas, kurį įkopijavus į įrašo HTML failą gaunamas paveiksliuko įterpimas.

                    #!/bin/bash 

                    vaizduDirektorija=/home/svetainesVaizduDirektorija 
                    originalas=$(readlink -f $1) 
                    paveikslasMazas="$(basename ${originalas%.*})-400.jpg"
                    convert "$originalas" -resize x400 "$vaizduDirektorija$paveikslasMazas"
                    paveikslasOriginalus="$(basename ${originalas%.*})-original.jpg"
                    cp "$originalas" "$vaizduDirektorija$paveikslasOriginalus" 
                    cat <<EOF 
                    <a href="vaizdai/$paveikslasOriginalus">
                       <img src="vaizdai/$paveikslasMazas alt="APRAŠAS"">
                    </a> 
                    EOF 
                

Pakeičiau šio puslapio CSS failą - pridėjau, kad pagal nutylėjimą paveikslai būtų centruojami:

                    img { 
                        display: block; 
                        margin-left: auto;
                        margin-right: auto;
                    } 
                

Aišku, tai tik maži žingsneliai, tobulinant šį puslapį. Reikia neuždelsti ir pradėti perkėlinėti senus įrašus iš senų puslapio versijų į čia, apžiūrėti visus įrašus, ar juose yra paveiksliukai, ar nuorodos veda, kur reikia. Taip pat toliau gerinti puslapio išvaizdą bei dar kalnas kitokių darbelių, kuriuos reikia padaryti. Po žingsnelį, po mažyti, tikiu, kažkur nueisime.


Irašo komentarai

Komentarus siųskite man elektroniniu paštu, adresu: mindaugas per minska taškas lt.

Laiške nurodykite įrašo pavadinimą ir ar norite, kad jūsų komentaras būtų paviešintas.