Práca s obrázkami

Zverejnil Pali dňa 02.04.2011 |

Tagy: ,

Práca s obrázkami je silnou stránkou SilverStripu, no nie moc dobre zdokumentovaná na to, aby ste okamžite mohli využívať potenciál, ktorý má.

Práca s obrázkami vo WYSIWYG editore

Podrobný návod pre vkladanie obrázkov nájdete v dokumentácii. Článok však nepojednáva o tom, že veľkosť obrázka sa môže meniť priamo v editore - po kliknutí na obrázok môžete meniť veľkosť obrázka ťahaním. Veľkou výhodou je, že systém v žiadnom prípade nemení zdrojový obrázok. Ak si zmenšíte obrázok napr. na polovicu, tak systém vytvorí kópiu obrázku s novými rozmermi. Tým pádom sa nemôže stať to, čo je bežné v iných systémoch, čiže editor nahrá veľký obrázok a pri zmene veľkosti sa pri prehliadaní sťahuje obrázok veľký, len jeho rozmer je cez HTML zmenenená...

Ilustračný obrázok

Práca s obrázkami v šablónach

Oficiálna dokumentácia obsahuje veľa rozumného kódu, žiaľ, bez akéhokoľvek bližšieho vysvetlenia.

1. ako vložiť obrázok do administračného systému?

Do Page.php, class Page vložte (alebo pridajte ak $has_one je už zadefinovaná):

public static $has_one = array(
'MainImage' => 'Image'
);

Do rovnakého súboru i triedy vložte do funkcie getCMSFields() (ak existuje, ak neexistuje vložte celú funkciu) pole pre nahrávanie obrázku (ImageField):

public function getCMSFields()
{
$fields = parent::getCMSFields();
$fields->addFieldToTab("Root.Content.Foto", new ImageField("MainImage", "Hlavný obrázok"));
return $fields;
}

2. ako obrázok zobraziť v šablóne (.ss súbore)?

V šablóne stačí zavolať

$MainImage

a zobrazí sa obrázok v plnej veľkosti. Toto je, samozrejme, veľmi nepraktické. Silverstripe nám to však dokáže veľmi zjednodušiť napríklad takto:

$MainImage.SetWidth(100)

a SS nám vráti obrázok o šírke 100px. Šikovné, no nedokážete s tým vždy to, čo potrebujete (napr. orezané obrázky na presný rozmer). Riešenie je našťastie vcelku jednoduché. Vytvoríte si súbor MyImage.php a uložíte ho v mysite/code adresári. Bude obsahovať napr. toto:

<?php
class MyImage extends Image {

function generateMiniThumb( $gd ) { return $gd->croppedResize( 50, 50 ); }
function generateThumb( $gd ) { return $gd->croppedResize( 100, 75 ); }

function generateFullSize( $gd ) { return $gd->resizeRatio( 1024, 768 ); }
function Full() { return ($this->Width > 1024 OR $this->Height > 769) ? $this->FullSize() : $this; }

}
// EOF

Aby ste v šablóne mohli použiť nami vytvorené veľkosti (generate je prefix, kt. nám vytvorí obrázok podľa požiadaviek a tento je dostupný podľa názvu, čo je za generate), tak je potrebné upraviť $has_one statickú takto:

public static $has_one = array(
'MainImage' => 'MyImage'
);

V šablóne môžeme písať:

$MainImage.MiniThumb

pre vloženie orezaného obrázka o veľkosti 50 x 50 px.

Po kliku na thumb sa nám má cez lightbox zobraziť veľký obrázok, nie však úplne plná veľkosť (lebo môže mať i pár MB)? Aj to ide:

<% if MainImage %>
<% control MainImage %>
<a href="$Full.URL" class="lightbox" title="Kliknite pre zváčšenie">$Thumb</a>
<% end_control %>
<% end_if %>

Pokročilá práca s obrázkami

Zatiaľ som neskúšal, no existuje modul pre editáciu obrázkov online založený na službe pixlr.com. Modul je dostupný tu: https://github.com/nyeholt/silverstripe-pixlr

Ak niekto tento modul otestoval, nech napíše komentár. Vďaka.


Komentáre

silverstripesk:

Minule som dostal otázku e-mailom ohľadne nahrávania obrázkov napr. cez FTP a ich následné použivanie v dministračnom systéme. Áno, funguje to bez problémov, stačí nahrať obrázky do adresára assets (vytvoriť subadresár) a nastaviť práva na zápis serverom (vygenerujú sa thumby).
Po nahratí cez iné rozhranie ako cez SilverStripe samotný však pre zobrazenie nových obrázkov v ponuke musíte navštíviť záložku "Obrázky a súbory" a synchronizovať stav v databáze so stavom na serveri (button "Vyhľadať nové súbory")

komentárový systém: Disqus