Manipulace s obrázky [Nový ImageStorage]

@flexroad Vypadá to, že v nejbližší době si k tomu zase sednu a něco napíšu.

$upload = $this->imageStorage->saveUpload($fileUpload, 'namespace', FALSE); // FALSE - Neuloží se automaticky ve funkci

$upload->setName('myName.jpg'); // Ještě přibude setter na příponu.
$upload->save();

@Lexi hastag se nastaví, pokud obrázek noimage neexistuje nebo proměnná není nastavena viz. https://github.com/…ge/Image.php#L68

Editoval Antik (31. 7. 2015 22:07)

@Lexi jestli myslíš konkrétní soubor .gitginore, tak ano, používám to takhle.

@flexroad V master verzi lze použít tvoje řešení bez potíži, ale musíš počítat, když bude argument $save true, tak se nahraná hodnota do originální složky.

Pro ostatní: přemýšlel jsem, že bych mohl nahodit kompresi obrázků pro originální soubory (už to mám rozdělané, ale chci slyšet názor ostatních).

1. Buďto použít api od: https://tinypng.com/ (Kompresi 500 obrázků zdarma)
2. Použít https://pngquant.org/
3. Komprese obrázku zabírá někdy hodně, takže by se mohli obrázky ukládat do tempu (soubor se seznamem obrázků) a následně cronem se ty obrázky komprimovat (možná bude nějaký limit obrázky, kdy to ukládat do tempu, při uploadu, aby se to dlouho nekomprimovalo?). Když se dosáhne limitu 500 obrázků (nebo nastaveného limitu), tak se obrázky automaticky budou do tempu. Promyšlené do detailu to mám jak bych to udělal, aby to bylo uživatelský příjmné, ale zajímá mě názor zda to tam chcete mít nebo vytvořit zvláštní extension nebo to vynechat.
4. Tady není snad co dodat.

Editoval Antik (6. 8. 2015 12:22)

Ahoj,

nejaky napad, jak totu skvelou komponentu napojit na nejaky cloud storage, napriklad Amazon S3?

@flexroad

Ahoj, narazil jsem ve verzi 1.4.3 na pár problémů s komponentou MultiUploadControl.

1. je potřeba kdyby/forms-replicator, ale není uvedený v composer.json, takže je pak potřeba doinstalovat ručně
2. odeslání formuláře končí Call to a member function isOk() on a non-object v souboru /vendor/webchemistry/images/src/Addons/UploadControl.php:79 zkusil jsem to nějak debugovat a vypadá to, že $upload obsahuje pole

Jinak super komponenta, která ušetří hodně času. Díky

@Antik Ok, díky za info.

@Croc Komponenta je dostupná tady: https://github.com/…dControl.php , ale nedoporučuji používat, protože neobsahuje testy a bude se rozdělovat na jiný balíček.

Instalace je přes trait v základní formuláři. Staticky jsem to zamítl, kvůli našeptávání v ide.

class MyForms extends Nette\Application\UI\Forms {

    use WebChemistry\Forms\Controls\TForm;
}

Použití:

$form = new MyForms;

$form->addDate('date', 'Datum'); // atd.

Editoval Antik (17. 11. 2015 14:17)

Přepsal jsem tento doplněk od základu a vyházel jsem věci, které jsem ještě nepoužil, kdyby vám něco chybělo z minulého doplňku můžete poslat pull nebo požádat a já se na to podívám.

Editoval Antik (4. 2. 2016 12:35)

@Lexi Byla to chyba, která už je opravena. Checkbox je odstraněn u povinné položky, díky.

V dev verzi je to zahrnuto. Zatím to neumí replikaci.

@flamengo v composer.lock máš u všech balíčků uvedené nainstalované verze.

@CZechBoY díky díky. Tak asi verze 2.3 to vypadá.

@Antik díky díky, toho jsem si vůbec nevšiml :)

@Antik

Mám pár dotazů:

1/ Při pokusu o:

$form->addImageUpload('upload', 'Upload')
	->setNamespace('namespace');

Fatal Error Class ‚WebChemistry\Images\Helpers\Quality‘ not found

File: ...\vendor\webchemistry\images\src\AbstractStorage.php:40
37:        private function extractHelpers(array $helpers) {
38:            foreach ($helpers as $name => $class) {
39:                if (!is_object($class)) {
40:                    $helpers[$name] = new $class;

Bohužel 'WebChemistry\Images\Helpers\Quality ani nic podobného jsme ve zdrojácích nenašel :(

2/ Metoda addMultiImageUpload() je pro hromadný upload pouze obrázků, nebo umí i ostatní soubory (např. PDF)?

3/ Je někde k dispozici funkční demo?

4/ Jen taková poznámka. V dokumentaci je u konfigurace uvedeno image, ale zřejmě by tam mělo být images.

Předem díky za reakce.

Editoval flamengo (30. 6. 2016 10:55)

Ahoj, jak nastavím svůj název obrázku?

Zkusil jsem dle příspěvku výše:

$savedImage = $this->imageStorage->saveUpload($values->image, $this->img_namespace.'/'.$id);
$savedImage->setName($newFilename);
$savedImage->save();

a

Fatal Error
Call to a member function setName() on string

Najdu někde nějaká best practice nebo nějaký ukázkový kód, či seznam možností?
Předem díky za reakci.

Editoval flamengo (5. 8. 2016 20:01)

Používám webchemistry/images 2.1.4

Uvedený kód jsme pouze zkopíroval a výsledek :(

Notice
Undefined property: Nette\Utils\ArrayHash::$image

218: $this->imageStorage->saveUpload($values->image, $this->img_namespace.‚/‘.$id, function ($image) {
219: $image->setName($newFilename);
220: });

Uvádím větší kus kódu (zjednodušený):

protected function createComponentForm(){
	$form = new MyForm;
	$form->setTranslator($this->translator);
	$form->addText('name', 'forms.inputs.name')
		->setRequired('forms.rules.filled');
	$form->addUpload('image', 'forms.inputs.img')
	    ->setRequired('forms.rules.filled')
		->addRule(MyForm::IMAGE, 'forms.rules.image');
	$form->addSubmit('send', 'admin.btn_add');
	$form->onSuccess[] = array($this, 'processAddForm');
	return $form;
}

public function processAddForm(MyForm $form){
	$values = $form->getValues();
	$valuesOriginal = clone $values;
	unset($values['image']);
	$id = $this->model->insert($values);

	$newFilename = $values['name'];
	$this->imageStorage->saveUpload($values->image, $this->img_namespace.'/'.$id, function ($image) {
	  $image->setName($newFilename);
	});

    $this->flashMessage($this->translator->translate('admin.msg.add_success'), 'info');
}

Editoval flamengo (7. 8. 2016 15:23)

S tou chybou jsi měl samozřejmě pravdu, měl jsem tam záměnu $valuesOriginal a $values, díky.

Takže jsem se dostal o kousek dál a opět jsme narazil :(

Ano, jak získám ten obrázek, to bych taky potřeboval vědět.
Původní představa byla, že v editačním formuláři se zobrazí náhled obrázku nějak takto:

$form->addUpload('image', 'forms.inputs.img')
	->setRequired('forms.rules.filled')
	->  // další kód
if($this->getParam('id') && !is_null($this->item->img)){
	$form['image']->setOption('description', Html::el('img')->src($this->item->img)->class('preview'));
}

Takže jsem narazil na to, ja kvůbec vytvořit obrázek bez použití latte a makra.

Našel jsem toto: https://forum.nette.org/…imagestorage#…

$this->imageStorage->create($this->item->img, '200x300', 'flag')
->setNoImage(NULL) // Nebude se generovat no image
->createLink(); // Generace zmenšeného obrázku a vrácení cesty

Fatal Error
Call to undefined method WebChemistry\Images\FileStorage\FileStorage::create()

Dále jsme zkusil toto:

$this->imageStorage->get($this->item->img, '200x200');

Čekal jsem, že v případě, že obrázek o zadané velikosti neexistuje, že se vytvoří. Nestalo se tak. Takže ani toto nemohu použít.

Takže mám pár dotazů:

1. Jak vytvořim tak banální věc, jako je náhled vloženého obrázku a to dřív, než v latte šabloně?
2. Lze z něčeho takovéhoto $this->imageStorage->get($this->item->img, '200x200'); získat relativní adresu obrázku a absolutní adresu?
3. Pokud smažu obrázek $this->imageStorage->delete($this->item->img);, lze nějak nastavit, aby se smazaly i prázdné složky, které zůstanou po obrázku?
4. (EDIT) Lze obrázky nějak přejmenovat, přesunout, zkopírovat?

Předem díky za odpovědi.
PS: Používám Nette 2.4

Editoval flamengo (8. 8. 2016 17:40)

Na nahrávání ti doporučuji použít tuto komponentu pro formuláře, registruje se sám k formulářům, nezakážeš-li to v konfiguračním souboru. Řeší jak odstraňování, tak i nahrávání a náhled obrázků.

Komponentu WebChemistry\Images\Controls\Upload jsem testoval a poté jsem se rozhodl ji nepoužít:

1. V okamžiku, kdy nahrávám soubor, neznám ještě ID vloženého záznamu, který používám pro název složky, do které obrázek potřebuji umístit. Komponenta soubor uloží hned a až potom vložím data do databáze. Zde by se to dalo vyřešit nějakým rename() či move(), má/nemá?
2. Zobrazí náhled? Prosím o příklad. Tak nějak jsem to dle tohoto vlákna pochopil, že by to mělo něco zobrazit, ale při hokusech pokusech se mi to ani jednou nepovedlo.
3. Mám vlastní render na formuláře, kde si vkládám u povinných položek červenou hvězdičku: $this->wrappers['label']['requiredsuffix'] = Html::el('span')->class('required text-danger')->setText(' *')->title('vyžadováno'); U tvého control prvku toto nefunguje.

$form->addImageUpload('image', 'forms.inputs.img')
    ->setRequired('forms.rules.filled')
    ->setNamespace($this->img_namespace)
    ->onBeforeSave[] = function ($image) use ($form) {
        $image->setName($form['name']->getValue());
    };

Použil jsem přesné znění kódu a:
Nette\MemberAccessException
Call to undefined method Nette\Utils\Image::setName().

Tak a zpět k dotazům.

1. Jak mohu vytvářet obrázky bez zavolání makra v šabloně ???
2. Lze obrázky nějak přejmenovat, přesunout, zkopírovat?

A jinak díky moc za trpělivost.

Editoval flamengo (8. 8. 2016 18:56)

@Antik Díky za trpělivost, nyní již funguje. Bez možnosti změnit název se zatím obejdu.

@flamengo klasicky jako kazdou jinou sluzbu zaregistrovanou v DIC, pres constructor nebo inject metodu.

(https://github.com/…resenter.php – pravdepodobne nemas na te komponente povolene injecty)

Editoval Lexi (23. 8. 2016 18:00)

Připravují teď verzi 3.0 (podpora pro cloudinary bude a je implementována) a mám jedno dilema, nastíním:

v nynější verzi se upravuje obrázek krkolomně:

$storage->saveUpload($fileUpload, 'namespace', function ($image) {
	$image->setWidth(100);
	// ...
});

v nové verzi to půjde přes modifikátory (latte syntax), bude možnost napsat jednoduše vlastní.

$res = $storage->createUploadResource($fileUpload);
$res->setNamespace('namespace');
$res->parse('resize:100,200,exact|sharpen');
$result = $storage->save($res);

$result->parse('baseUri');
echo $storage->link($result);

Problém je v tom, že u lokálního úložiště se bude nejspíše vytvářet složka s hashem ⇒ nepřehlednost. Takže jsem zavedl aliasy, které se převedou na modifikátory např.:
konfigurace:

images:
	local:
		aliases:
			thumb: 'resize:20,20,exact'

použití:

$storage->parse('@thumb');

Vytvoří se složka s názvem thumb bez hash, pokud se změní hodnota aliasu, tak se jednoduše smaže složka a vše se nahraje znova.

A teď to dilema:

1. Zakázat modifikátory a používat jen aliasy. (aliasy se budou možná hodně množit)
2. Používat modifikátory a aliasy:

ukázka:

$storage->parse('@thumb|crop:10,10,10,10');

Problém č.1: upřednostňovat alias nebo modifikátor?
Problém č.2: složka se bude generovat jako thumb-s4d545sf45f4s

3. Nekombinovat aliasy a modifikátory.
4. Nepoužívat aliasy.

Editoval Antik (25. 8. 2016 15:15)

Zatím jsem neřešil, protože jsem to nemusel, ale byl jsem jednou odhodlán napsat kód a taky jsem napsal na cleaner, který by toto řešil na stejném principu (mazání obrázku starší než měsíc, zachování např. 5 nejnovějších obrázků, mazání obrázku u kterých byl přístup větší než měsíc), ale už jsem ho nenašel, tak ho někdy napíšu znova :). Potom jsem zaznamenal problém, kdy jsem generoval např. pro produkty miniatury o určité velikosti s helpery, změnil se design a musel jsem všude měnit ty velikosti a mazat složité názvy složek pro invalidaci, tohle by měli řešit aliasy popsaný o 2 příspěvky výše.

Zdravím. Dělám update projektu na Nette 2.4 a dělám update i všech knihoven včetně ImageStorage.
Přesněji sem přešel na verzi 2.2

Akorát teď když použiju Traitu tak mi začne laděnka házet tuto chybu:

Service of type WebChemistry\Images\AbstractStorage used in @var annotation at WebChemistry\Images\TPresenter::$imageStorage not found. Did you register it in configuration file?

Edit: ve chvíli kdy sem dal do Traity jako @inject IImageStorage tak to jede OK

Editoval mordare (15. 9. 2016 13:00)

@erikbalog Budeš muset udělat toto:

<?php
		   $this->imageStorage->delete($this->movie->getId() . '.jpg');
           $this->imageStorage->saveUpload($values->poster, 'poster', function (\WebChemistry\Images\FileStorage\Image\Image $image) {
                $image->setNameWithoutSuffix($this->movie->getId());
                $image->setSuffix('jpg');
            });
?>

Obrázky se nadále upravují jen přes předem definované aliasy ⇒ rychlejší a přehlednější

Toto jsem jednu dobu používal ve svém doplňku a již nikdy více :-) nešla by funkčnost variabilních rozměrů bez potřeby definovat předem alias zachovat?

Typ „image“ pro doctrine

Palec hore!

Komponenta UploadControl umí jen převádět obrázek na objekt

Co to přesně znamená? Bude potřeba ve handlerech formulářů obrázek uploadovat, případně na něm volat ->save()?

Dokáži si živě vybavit 2 situace, kdy mě to vyloženě sralo :-)

1. Dopředu jsem na projektu nikdy nevěděl, jak fotka bude přesně velká, když jsem to zjistil, musel jsem jít a nadefinovat si velikost miniatury, jejich počet narůstal a nepořádek byl veliký, chtěl jsem přijít, zadat rozměry obrázku a fungovat. Rrozměry jsem měl často uložené i v databázi, takže jsem je měl v proměnné – tato situace je neřešitelná, pokud je potřeba si definovat aliasy.
2. Na projektu kde pracuje více lidí a časem aliasů přibývá, nepozorný programátor přidává nový typ miniatury s rozměry, které jsou již definovány, s jiným názvem a vzniká chaous.