Gallery Nette Plugin – správa fotek snadno a rychle

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
stekycz
Člen | 152
+
0
-

Při práci jsem narazil na potřebu spravovat množství fotek, ať už pro obyčejné galerie nebo pro různé jiné prvky webu (členové klubu, produkty, atd.). Pokaždé jsem to řešil trochu jinak, polovina kódu v modelu zabrala jen kvůli správě obrázků, fotky byly v adresářové struktuře všude možně a prostě údržba nějaké rozumné hierarchie náročná. Na konci června jsem začal pracovat na rozšíření pro Nette, které by mi tuhle práci usnadnilo.

Prozatím nechci uveřejňovat rozdělanou verzi a dám ji světu na oči až bude v nějaké rozumné fázi. Nicméně už teď obsahuje model včetně databázové struktury, kontrolky pro zobrazování seznamu galerií a i seznamu fotek a vlastní konfigurační třídu, kterou lze konfigurovat v config.neon. Chystám také při zveřejnění přidat nějaké demo, které mi zatím běhá jen lokálně.

Proč ale vůbec píšu sem na fórum, aniž bych něco zveřejnil – rád bych se od vás dozvěděl, co byste od takového pluginu očekávali. Jaké možnosti konfigurace, použití, co všechno by to mělo zvládat bez vlastního psaní kódu atd.

Za sebe bych očekával tyto body, které se snažím implementovat:

  • Ukládání, update, mazání i načítání dat přes volání metod
  • Možnost jednoduše přidat data, která mají být o galerii/fotce ukládány v databázi
  • Měnit pořadí fotek v každé galerii zvlášť
  • Jmenné prostory pro různé galerie (například produkty a zaměstnanci budou v různých, ať se v tom dá dobře vyznat)
  • Možnosti konfigurace prostě maximální :-) Aktuálně vím asi o:
    • výška a šířka náhledu fotky
    • maximální velikost jedné strany fotky
    • složka pro ukládání souborů
    • definice jmenných prostorů
    • počet galerií na stránku
    • počet fotek na stránku
    • třídy zajišťující modelovou část (především ukládání dat do databáze a souborů)
    • kvalita zmenšeného obrázku
    • název složky s náhledy jakožto podsložky galerie
    • název klíče použité pro soubor/y ve formulářích
    • a možná ještě něco, na co si teď nevzpomenu

Předem díky za náměty a názory :-)

Ani
Člen | 226
+
0
-

Můžeš tam udělat nějkou snadnou integraci třeba do tinymce nebo nějkého wysiwyg editoru. S tim sem si hrál nedávno. Vždycky se mi nelíbí, když má wysiwyg jinou zprávu než zbytek.

srigi
Nette Blogger | 558
+
0
-

+1 za TinyMCE alebo CK. Fajn by bolo taktiez lazy vytvaranie nahladov.

stekycz
Člen | 152
+
0
-

Z WYSIWYG editorů jsem naposledy používal CK, částečně bych tam možná zařadil i Texylu. Tiny bohužel nemám zkušenost a nevím, jak tam to spolupracuje. Mám pocit, že u Texyly a možná i u CK stačí nastavit akorát nějaký handler nebo něco podobného. Což by nemuselo být tak náročné. Jak to je u Tiny?

Lazy vytváření náhledů je dobrý nápad a zvažoval jsem tuhle možnost. Asi bych to ale dělal přes konfiguraci, kde by lazy mode bylo možné zapínat a existovala by někde metoda vracející instanci Image náhledu. Lazy mode totiž už vyžaduje vlastní obsluhu načítání obrázků a ne každý si ji chce psát a občas to je skoro zbytečné. Při přímém přístupu na soubor pak lazy mode moc uplatnit nejde. Nebo pokud je to nějak možné a jen nevím jak, budu rád poučen.

Darkry
Člen | 101
+
0
-

Ta integrace se můžeš inspirovat tímto:¨
http://kcfinder.sunhater.com/

Je tam návod (Integreta) jak na zapojení do TinyMCE tak do CKEDitoru. Myslim, že by se to dalo použít (teda ten způsob integrace do editorů ne zbytek).

nanuqcz
Člen | 822
+
0
-

Co se týče lazy generování náhledů, je tady na to doplněk – před nějakou dobou jsem používal (a pořád používám v projektu na Nette 2.0alfa2) a funguje jak má ;-)

Jinak co se týče návrhů, tak např jmenné prostory a některé konfigurace (výška a šířka náhledu fotky, maximální velikost jedné strany fotky – tohle si každý může nastavit zásahem do šablony) bych určitě nevyužil. Osobně mám radši jednodochost, ale případnou možnost vlastního rozšíření :-)

Bernard Williams
Člen | 207
+
0
-

Nazdárek,

já bych uvítal možnost nahrát fotky přes FTP – fotky nahraješ do předem určeného adresáře a na webu jen spustíš script (přejdeš do nějaké části toho pluginu) a on si sám všechny fotky zpracuje, roztřídí, vytvoří náhledy, uloží do DB atd.

Dále by se mi líbilo mít možnost měnit způsob vytvoření náhledu. Nastavení šířky/výšky je jasné, ale tím to nekončí. Co možnost nastavit jen jeden údaj a druhý se dopočítá a další nastavení s kombinací Image::FILL a Image::STRETCH a metodou crop().

Bernard

ic
Člen | 430
+
0
-

Myslím, že nahrání přes FTP už není dnes (respektive nebude) tak aktuální…
je tu <input type="file" multiple> který dovolí při nahrání obrázků jich vybrat mnoho.
Nebo jednoduché (pro uživatele) přetažení souborů do okna a jejich následné nahrání javasctipem… jako je k vidění na Picase (funguje FF a Chrome, další jsem nezkoušel).
Něco o tom psali na zdrojáku: http://zdrojak.root.cz/…omoci-html5/

Takovou galerii bych taky využil, už jsem na tom dříve dělal, ale musel jsem přestat z důvodu nutnosti udělat něco jiného XD

Takže pokud bych mohl nějak pomoci s vývojem rád bych přiložil ruku k dílu.

Jsem docela daleko s klientskou částí… slideshow s jQuery… organizace do setů a tak

stekycz
Člen | 152
+
0
-

xxxObiWan napsal(a):

Co se týče lazy generování náhledů, je tady na to doplněk – před nějakou dobou jsem používal (a pořád používám v projektu na Nette 2.0alfa2) a funguje jak má ;-)

Díky za upozornění, vypadá to velice dobře. Asi by to pro aktuální stav projektu chtělo upravit, ale princip je parádní.

xxxObiWan napsal(a):

Jinak co se týče návrhů, tak např jmenné prostory a některé konfigurace (výška a šířka náhledu fotky, maximální velikost jedné strany fotky – tohle si každý může nastavit zásahem do šablony) bych určitě nevyužil. Osobně mám radši jednodochost, ale případnou možnost vlastního rozšíření :-)

Vzhledem k dosavadní neznalosti výše zmíněného doplňku mi velikosti obrázků přišly užitečné.

Bernard Williams napsal(a):

já bych uvítal možnost nahrát fotky přes FTP – fotky nahraješ do předem určeného adresáře a na webu jen spustíš script (přejdeš do nějaké části toho pluginu) a on si sám všechny fotky zpracuje, roztřídí, vytvoří náhledy, uloží do DB atd.

Rychleji za mě odpověděl už ic. Nicméně v Demu zatím používám MultipleFileUpload

Bernard Williams napsal(a):

Dále by se mi líbilo mít možnost měnit způsob vytvoření náhledu. Nastavení šířky/výšky je jasné, ale tím to nekončí. Co možnost nastavit jen jeden údaj a druhý se dopočítá a další nastavení s kombinací Image::FILL a Image::STRETCH a metodou crop().

Nad tímhle jsem zatím tolik nepřemýšlel. Snažím se to psát tak, aby bylo možné co nejjednodušeji napsat vlastní Control nebo model, respektive jej přepsat. Otázka, zda tohle stojí za zpracování jako nastavení či zda to nepatří do dceřinné třídy.

ic napsal(a):

Takže pokud bych mohl nějak pomoci s vývojem rád bych přiložil ruku k dílu.

Jsem docela daleko s klientskou částí… slideshow s jQuery… organizace do setů a tak

Klientskou část řeším velmi jednoduše, alespoň zatím. Javascriptovou knihovnu jQuery s fancyboxem a fotky organizované v tabulce. Možností je samozřejmě (podobně jako v MultipleFileUploadu) vytvořit více interfaců pro zobrazování a člověk si buď vybere a nebo stejně vytvoří vlastní. Stejně tak modelová část. Stavím jí nad dibi. U modelu si myslím spíš, že bude různorodá potřeba. Takže asi vytvořit nějaký adaptér a přes něj se pak dostávat k datům ať už pomocí dibi, NotORM nebo jiné knihovny. Zase možnost nabídnout více hned s pluginem.
Díky i za nabídku na spolupráci, nejprve to ale trochu „pofackuju“ dohromady a až hodím link, nějak se můžeme domluvit. Především s klientskou částí si každý asi pohraje sám podle webu. Tam jediné, co je možné připravit (a mám na to napsané i TODO), jsou metody pro patřičné operace (změna pořadí, atd.).

Díky všem za motivy k zamyšlení či přímo k tvorbě!

Ještě připojím nějaké své nápady:

  • Možnost přesouvat galerie mezi jmennými prostory/fotky mezi galeriemi – využil by to někdo? Přijde mi to trochu zbytečný. Když chci dát fotku jinam, tak jí tam dám rovnou, ne? Možná ty galerie a namespacy.
  • Sám jsem zvyklý na ukládání nějakých informací v databázi. Které informace si ukládáte o galeriích vy? Osobně vetšinou počítám s titulkem a popisem, ale ne vždy. Určitě používám status viditelnosti ve veřejné části webu (bool). Co titulek k jednotlivým fotkám?
  • Konfigurovat je možné z PHP i z neon.config, kterou variantu vítáte více a pro které atributy? Složku pro ukládání fotek bych čekal snad výhradně v configu, naopak volba velikosti fotky asi spíš v PHP/šabloně.
nanuqcz
Člen | 822
+
0
-
  • Konfigurovat je možné z PHP i z neon.config, kterou variantu vítáte více a pro které atributy? Složku pro ukládání fotek bych čekal snad výhradně v configu, naopak volba velikosti fotky asi spíš v PHP/šabloně.

To jako že by měla ta komponenta svůj vlastní config.neon, nebo že by sis vyhradil zvláštní sekci v hlavním config.neonu? Já jsem u komponent zvyklý nastavovat je v PHP při vytváření (a pokud se rozhodnu některé věci dát si do configu, můžu – pak je v PHP komponentě jednoduše předám).

Každopádně pro mě osobně důležitá věc: Čím víc nastavení si dokáže komponenta detekovat automaticky, tím líp (jsem dost líný :-D)

svobodai
Člen | 136
+
0
-

Tomu FTP bych se tolik nebránil. Ono když by se tento doplněk použil např. pro profesionálního fotografa tak velikost fotek může být tak velká, že se nepodaří nahrát což v případě FTP nehrozí. Členění může být řešeno DB a fotky mohou být na stejném místě.

ras
Člen | 135
+
0
-

Co bych ocenil ja je:

  • prehled vsech vlozenych fotek, vcetne titulku (tj. jednoduse zjistit, kde chybi + moznost nahradit prazdny defaultnim titulkem)
  • jednoducha moznost editace titulku (obzvlast v kombinaci s vlozenim pres FTP = ja bych se za nej taky primlouval), tj. nemuset to delat po jedne fotce
  • moznost smazat vsechny (ci jen zvolene) nahledy (= uklid, ktery se jednou za cas hodi)
  • moznost prirazeni tagu k fotkam (aby v tom nebyl bugr, tak jen tech co si nekde predefinuji)
  • moznost ponechat na serveru originaly, ikdyz budu chtit nabizet k zobrazeni jen zmenseniny (napr. 800×600 velike fotky + 175×131 nahled, pricemz original je 4000×3000 pixelu)
  • jednoducha obsluha sablon k fotogaleriim
joeyGTR
Člen | 19
+
0
-

Zdravím, je tento plugin už hotový? ďakujem

stekycz
Člen | 152
+
0
-

Doplňku chybí ještě pár drobností, které bych rád dodělal před jeho „dokončením“. Bohužel v semestru se mi nedaří najít mnoho času na tent doplněk. Každopádně počítám, že během ledna nejpozději bude hotový.

Darkry
Člen | 101
+
0
-

Jak to vypadá s tímhle doplňkem? Je mrtvý nebo máme jen čekat? :-)

stekycz
Člen | 152
+
0
-

Na poslední Poslední Sobotě jsem se k němu zase konečně dostal. Předně teď upravím kódy pro nejnovější verzi Nette. Pak už jen demo aplikace a hodím odkaz.
Pak nejspíš chvíli počkám na feedback a reakce, abych věděl, jakým směrem vést plugin dál.

stekycz
Člen | 152
+
0
-

Tak konečně jsem se rozhodl, že provozuschopná a zveřejnitelná verze je na světě :-) Kódy jsou k nalezeení na GitHubu. Připojen je i upravený doplněk ImageHelper doporučený xxxObiWan-em. Nezapomněl jsem ani na demo.

Musím říci, že tam je určitě prstor pro zlepšování a doplňování možností. Nicméně v podobě, v jaké je to teď je možné doplněk používat pro jednoduché galerie naprosto bez problémů.

A jak s doplňkěm pracovat? Projdeme si jednotlivé části:

Konfigurace

parameters:
    imageHelper:
        baseUrl: http://example.com/ # URL webu
        tempDir: files/temp # cesta k adresáři se zmenšeninami fotek relativne k WWW_DIR

    gallery:
        basePath: %wwwDir%/files/gallery # absolutní cesta ke složce pro ukládání fotek

services:
    imageHelper:
        class: \ImageHelper(@cache, %imageHelper.baseUrl%,  %imageHelper.tempDir%)

    galleryDataProvider:
        class: \steky\nette\gallery\DataProvider\Dibi(@database)

    galleryItemModel:
        class: \steky\nette\gallery\models\Item(@galleryDataProvider, %gallery.basePath%)

    galleryGroupModel:
        class: \steky\nette\gallery\models\Group(@galleryDataProvider, %gallery.basePath%)

Přidávání/update galerie

$groupModel = $this->context->galleryGroupModel;
if ($data['gallery_id']) {
	$groupModel->update($data); // Předáváme pole dat s informacemi o galerii a s polem fotek
} else {
	$groupModel->create($data); // Předáváme pole dat s informacemi o galerii a s polem fotek
}

Použití kontolek
Bohužel se mi nepodařilo (zatím?) najít lepší řešení vytváření kontrolek než toto přímo v action metodě presenteru.

$control = new GroupControl($this, 'galleries',
	$this->context->imageHelper,
	$this->context->galleryGroupModel,
	$this->context->galleryItemModel,
	$this->context->galleryDataProvider->namespaces,
	'Homepage:gallery'
);
$control->setAdmin(true, 'Homepage:editGallery');
if ($id) {
	$control->useNamespace($id);
}
new ItemControl($this, 'photos',
	$this->context->imageHelper,
	$this->context->galleryGroupModel,
	$this->context->galleryItemModel,
	$id
);

A tohle je v podstatě všechno!
Doporučuju projít si metody a API jednotlivých services a kontrolek. Snažil jsem se o maximální jednoduchost použití a zároveň možnost vlastních úprav. Největší úpravy by se měly odehrávat v šabloně.

Případné komentáře, nápady, názory, připomínky nebo jakékoli reakce zpracuji a budu se snažit, aby se odrazily v doplňku.

Editoval Gruw (11. 10. 2012 19:04)

Jan Endel
Člen | 1016
+
0
-

Vypadá hodně luxusně, určitě vyzkouším.
+1

lysua
Člen | 6
+
0
-

Vypadá to velmi dobře. Pokud používám Nette\Database tak musím asi přejít na dibi v případě, že bych to chtěl vyzkoušet že?

Lawondyss
Člen | 106
+
0
-

Vyzkoušel jsem si demo a potěšilo mě. Tedy až na jednu „pětistovku“. Po nahrání mého obrázku se namísto něj zobrazuje chyba 500. Předpokládám, že to asi bude tím, že pro demo se soubory neukládají ale do DB se zapíší. Možná by stačil nějaký skript na cronu, který pravidelně bude vracet demo do původního stavu.

stekycz
Člen | 152
+
0
-

lysua napsal(a):

Vypadá to velmi dobře. Pokud používám Nette\Database tak musím asi přejít na dibi v případě, že bych to chtěl vyzkoušet že?

Není potřeba přecházet na dibi. Nette\Database je možné také použím, ale bohužel jsem zatím pro něj nenapsat DataProvider. Stačí implementovat rozhraní IDataProvider. Pokud bude někdo aktivní a pošle mi kód nebo Pull Request na GitHubu, budu rád :-)

Lawondyss napsal(a):

Vyzkoušel jsem si demo a potěšilo mě. Tedy až na jednu „pětistovku“. Po nahrání mého obrázku se namísto něj zobrazuje chyba 500. Předpokládám, že to asi bude tím, že pro demo se soubory neukládají ale do DB se zapíší. Možná by stačil nějaký skript na cronu, který pravidelně bude vracet demo do původního stavu.

O nějakých chybkách v demu vím. Bohužel je nestíhám opravit a i samotná práce na pluginu mi teď stojí :-/ Do konce března snad vše bude bez problémů. Každopádně díky za tip na crona :-)

Ivorius
Nette Blogger | 119
+
0
-

Demo má server error :(

stekycz
Člen | 152
+
0
-

Ivorius napsal(a):

Demo má server error :(

Už to zase běží. Při drobném updatu dema jsem zapomněl něco upravit :-/ A dostal jsem se k tomu bohužel až teď.

wb2009
Člen | 125
+
0
-

Prosím o relink githubu…moc děkuji

Kranox
Člen | 9
+
0
-

Link na github sa zmenil zo steky na stekycz github

mordare
Začátečník | 117
+
0
-

Dobrý den nemá to náhodou někdo upravené pro Nette database?

Re4DeR
Člen | 71
+
0
-

http://nette-gallery.steky.cz/…dmin-list/68 chyba 500.

nette databse by se mi taky libil.