Tuesday, November 9, 2010

Hogyan fűszerezzük Yii proginkat a már jól bevált ImageCache-sel

Ha valaki már régóta tevékenykedik a "szakmában" az biztosan tudja, hogy egy oldalon megjelenő képeknek az átméretezését még azelött jó megtenni, mielött a kép a böngészőbe kerül. Például, mi történik akkor, ha a képünk 3000x2000 pixeles, és azt 300x200-as méretben szeretnénk megjeleníteni:

<img src="valami.jpg" width="300" height="200" />

A fenti sorral többek között az a gond, hogy az ember azt gondolná (reméljük nem, de lehet), hogy a böngésző ilyenkor csak egy ekkorka képet tölt le. Sajnos ez nem igaz, tehát a felhasználóinkat (és a szerverünket) büntetjük azzal, hogy a böngésző egy hatalmas, alkalmanként több MB-os képet tölt le. A Drupal CMS rendszerben van egy úgy nevezett ImageCache modul, ami pontosan erre kínál megoldást.

Hwangar-nak köszönhetően ez a modul már elérhető a Yii rendszerben is, így néhány "képmegváltoztató" funkcióval lényegesen felgyorsíthatjuk oldalaink betöltését. Ez a cikk azt próbálja bemutatni, hogy hogyan is tehetjük meg mindezt.

Az ImageCache modul segítségével (GD2 szükséges hozzá!) többek között átméretezhetjük, elforgathatjuk és vízjeggyel láthatjuk el képeinket. Maga a beállítás egyszerűen megtehető az alkalmazásunk konfigurációs file-jában. (protected/config/main.php)



Beállítás:

Annyi féle preset-et készíthetünk, amennyit csak akarunk. A fenti példában, a 640x480-nak nevezett preset segítségével például először átméretezzük és vágjuk a képet (scaleAndCrop) majd pedig vízjegyet teszünk a képre (watermark). Az elkészített képeket a modul a webroot/<akarmi> könyvtárba helyezi el. Jelenleg a következő képmódosító funkciók támogatottak: újraméretezés (resize), zsugorítás (scale), zsugorítás és vágás (scaleAndCrop), elforgatás (rotate), vágás (crop) és vízjegy (watermark).

Használat:

Magát a képkészítő programot vagy a Kontrollerben (Controller) vagy a Nézetben (View) szokás meghívni a következő módon:

<?php
$thumb = Yii::app()->image->createUrl( '640x480',YiiBase::getPathOfAlias('webroot.files').'/valami.jpg'); // An image file!!! 

if ($thumb) print $thumb; else print "bad";
?>
Még annyit érdemes megjegyezni, hogy amikor először jelenítjük meg a képet a modul segítségével (tehat a cache könyvtár üres!), akkor fut le maga a képszerkesztő program és készül el az új kép. A következőkben már ezt a képet töltjük be és jelenítjük meg, remélhetőleg gyorsabban.

Az eredeti leírás és maga a modul itt található: http://www.yiiframework.com/extension/image-cache/

(Egyébként ha valakinek van ötelete arra, hogy magyarul hogyan lehetne érzékeltetni a különbséget a resize és a scale között (lehetőleg egyszóval), azt szívesen venném ... köszi)

No comments:

Post a Comment