Manipulace s obrázky [Nový ImageStorage]

Vydána verze 1.1

Co je nového?

• Kompletně předělaný kód.
• Změna velikosti noimage podle neexistujícího obrázku.
• Možnost nastavení noimage v makru (4 parameter).
• Vytvoření vlastního image storage s namespace.
• UploadControl: Obrázek se nahrává jenom při úspěšném odeslání formuláře.
• UploadControl: Obrázek se odstraňuje jenom při úspěšném odeslání formuláře.
• Odstraněno responsive makro, nyní je možnost vytvoření pomocí img makra.
• Při přidání // do absolutního jména obrázku se obrázek vygeneruje s $baseUri místo $basePath

Editoval Antik (8. 2. 2015 17:36)

@Beton

Nette\Application\UI\Form::extensionMethod('addImageUpload', function(){});

Editoval echo (9. 2. 2015 14:14)

David Kudera napsal(a):

@echo: myslím, že @Beton se jen ptal, jestli to tam nemá být už od základu. Chyba v jeho zápisu by být neměla, ba dokonce by měl být i lepší. Viz link. Jen teda netuším, od které verze to takto funguje

S tou verzí si také nejsem jist.

Jojo, šlo mi jen o to, jestli se to dělá „někde“ magicky a já píšu něco blbě a jenom ze sebe dělám vola, nebo jestli autorovi utekl kousek dokumentace.

@Beton Jestli se tam objevují dvě metody, tak se omlouvám, přepsal jsem se. Správně je jenom $form->addImageUpload().

Registraci je možno provést buď jak jsi napsal nebo zavoláním:

WebChemistry\Images\Addons\UploadControl::register();

Ovšem jsem zapomněl upravit registrační metodu, takže v další verzi to bude vypadat (Doporučuji zapsat takhle, než provádět automatickou registraci):

Nette\Object::extensionMethod('Nette\Forms\Container::addImageUpload', function ($form, $name, $label = NULL, $namespace = NULL, $defaultValue = NULL) {
	return $form[$name] = new WebChemistry\Images\Addons\UploadControl($label, $namespace, $defaultValue);
});

Edit: Lomítko / by se nemělo používat, protože to je značení pro namespace (Asi jsem to zapomněl ošetřit, alespoň vím co opravit), doporučil bych spíše pomlčku než lomítko.

Editoval Antik (9. 2. 2015 14:42)

Lomítko / by se nemělo používat, protože to je značení pro namespace (Asi jsem to zapomněl ošetřit, alespoň vím co opravit), doporučil bych spíše pomlčku než lomítko.

Rozumím, že používáš / jako delimiter pro namespace, ale co když chci mít „namespaces“ více zanořené, tedy co když chci sázet obrázky do adresářové strukturyavatars/substr(uniqid(), -2, 2)? Tedy nějak takto:

<?php
images/
    avatars/
        ab/
        bc/
        df/
?>

Nebylo by lepší nahradit 87. -X. řádek PropertyAccess něčím takovým:

<?php
preg_match('/(.*)\/([^\/].*)/', $name, $matches);

$this->name = $matches ? end($matches) : $name;
$this->namespace = $matches ? $matches[1] : NULL;
?>

?

A potom ještě poupravit upload, aby se opravil i ten vstupní krok?

Antik napsal(a):

Uvažoval jsem u zanořených složkách (Zatím jsem neměl důvod to používat), problém vytvořit to určitě není a nejspíše to udělám.

Bylo by to perfektní. :)

Uvedu jeden z důvodů:
Pokud by web s velmi velkou návštěvností ukládal všechny obrázky do jednoho adresáře, tak přesto, že filesystemu by to bylo jedno, programátorovi by po zapnutí FileZilly nebo Commandru (Ne že bych používal Win) pokaždé spadl počítač. To je jednoduché – občas prostě na to FTP musím vlézt a něco vzít/smazat/upravit. Nechtěl bych otvírat adresář („složku“), kde jsou miliony obrázků. Pokud to rozdistribuujeme například pomocí posledních pár znaků uniqid(), tak se nám to hezky rozprostře.

Mimochodem, tvoje extension funguje na zanořené adresáře, pokud uvedu namespace ‚blabla/bubu‘, ale jsou tam zatím ty dva výše zmínění brouci. (Negenerování unikátního prefixu a to druhé, o čem jsem již mluvil a opravil 3 řádkami kódu).

Verze 1.2

• Doplněny podsložky pro namespaces.
• Zabezpečeno odstraňovaní pro podsložky namespaces (Budou odstraněny obrázky patřící pro danou namespace).
• Exception pro obrázek obsahující / ve jméně.
• Upravena registrace UploadControl.
• Opravena chyba pro změnu obrázku s %.
• Možnost zakázání generování změny velikosti obrázku (Hodící hlavně pro generování z Presenteru).
• Dokumentace opravena.
• Další drobné úpravy.

Plány pro další verzi (Budu rád pro každý návrh):

• Multiupload pro UploadControl

Děkuji hlavně uživateli @Beton

Editoval Antik (9. 2. 2015 17:02)

@Antik V prvním příspěvku zmiňuješ „Generace obrázku pomocí url.“ – to funguje jak? Očekával bych že to bude přes nějaký router, ale žádný jsem ve zdrojácích nenašel.

@akadlec :-D A ta je / bude někde na GH nebo ne?

Editoval enumag (10. 2. 2015 9:51)

@Antik

Antik napsal(a):
Plány pro další verzi (Budu rád pro každý návrh):

• Multiupload pro UploadControl

TIP: Pokud by si se rozhodl pro implementaci některého z MultiUploaderu, který využívá v případě nedostupné podpory HTML5 flashovou instanci, tak je třeba myslet na to, že flashové uploady nefungují bez hacku pro aplikace, kde je nutnost přihlášeného uživatele, protože flash pak ruší session – více o workaroundu zde:
https://github.com/…leUpload.php#L92 + plno vláken tady na fóru, kde se to již nespočetně krát řešilo…

Moc rad bych podekoval za skvele rozsireni!!!

Rad bych se zeptal, jestli a jak jde nektere velikosti obrazku generovat ihned po uploadu.

V handle jsem zkousel

$this->imageStorage->create($filename, "1200x");

ale bohuzel se nic nestane.
Jde mi o to, ze soubory uploaduju ajaxem a pote co se mi soubor upne na server, potrebuju neco jako:

<img class="img-responsive" src="'+ data.result.files.medium +'" srcset="'+data.result.files.big+' 1280w, '+data.result.files.medium+' 640w, '+data.result.files.small+' 320w" sizes="100%"/>

Soubor se sice ulozi jak ma do „original“, ale pokud vracim cestu na jeho thumbnail, tak z nejakeho duvodu neexistuje, dokud nerefreshnu celou stranku.

Diky za cokoliv!!!

@Antik tak to bych si dovolil tvrdit že to pomocí traitu neděláš. Ty přece jen upravíš cestu k obrázku tak aby byla relativní a odkazovala tak na umístě v document rootu. Takže obrázek bude vždy na stejné doméně jako celé stránky. U tohoto řešení jsem to měl předěláno tak že jsem si mohl zadefinovat baseUrl takže jsem obrázky mohl poskytovat ze subdomény. A úplně nej je to mít onDemand, a generovat je až na základě požadavku, takže to ještě zrychlí procesování požadavku.

Což je logické že ti to vyhodí pokud máš standartní konstruktor pro komponentu. Ten má pouze dva parametry – name a parent a ty mu předáš jeden. Takže si uprav komponentu.

…staci toto pridat do komponenty?

public function __construct(IContainer $parent = NULL, $name = NULL){

}

Kdyz to pridam, tak funguje, ale nerad bych, aby to do budoucna na necem vyhorelo :)

@flexroad

@Antik : Diky moc za upravu.

Je super, ze muzu nastavit velikost obrazku uz pri uploadu!!! O to mi ale v puvodnim dotazu neslo. Spise resim, ze kdyz obrazek uploadnu, tak se ulozi POUZE jeho original do slozky „original“.

Potreboval bych ale, aby se zaroven ulozili nahledy v ruznych velikostech (napriklad … 320×, 768×, 1200×)

Pokud tyto velikosti pouziju v makru:

<img class="img-responsive" src="{img $picture->name, '768x'}" srcset="{img $picture->name, '1200x'} 1280w, {img $picture->name, '768x'} 640w, {img $picture->name, '320x'} 320w" sizes="100%"/>

…a refreshnu stranku, pozadovane velikosti se vygeneruji presne jak potrebuji.

Pokud ale stranku nerefreshnu, pozadovane velikosti se nevygeneruji, cehoz bych prave potreboval dosahnout…

Muj handle muze vypadat nejak takto:

public function handleUpload()
{
    $file = $_FILES['files'];
    $filename = $file['name'][0];
    $type = $file['type'][0];
    $tmp_name = $file['tmp_name'][0];
    $size = (int) $file['size'][0];
    $error = empty($file) ? UPLOAD_ERR_NO_FILE : UPLOAD_ERR_OK;

    $picture = new Picture();
    $picture->name = $filename;

    $filename = $this->pictures->save($picture) . "-" . $filename;

    $fileUpload = new FileUpload([
        'name' => $filename,
        'type' => $type,
        'tmp_name' => $tmp_name,
        'size' => $size,
        'error' => $error,
    ]);

    $upload = $this->imageStorage->fromUpload($fileUpload);
    $info = $upload->save();
	}

pro priklad… ajaxem zavolam vyse uvedeny handle (ktery ulozi pozadovany soubor do slozky „original“) a hned pote v novem okne otevru:
http://server.com/…age.jpg/320x, tak vidim jen puvodni velikost obrazku.

Pokud ale pouziju vyse uvedene makro, obrazky se vygeneruji do pozadovanych velikosti a stejna adresa:
http://server.com/…age.jpg/320x vrati zmensenou velikost, coz je kyzeny vysledek.

Neda se nejak predgenerovat po nahrani k vyse uvedenemu obrazek s sirkou 320× (do slozky 320×), stejne jako se tomu deje pokud pouziju macro primo v prezenteru(handle)? Nebo nemuze volani uvedene routy primo generovat pozadovane velikosti???

Jeste jednou srdecne DIKY,

@flexroad

Zdravím,

už hodinu nemůžu přijít na to, proč se obrázky neuploadují při ajaxovém požadavku. Pokud do formuláře přidám:

<?php
	$form->getElementPrototype()->class = 'ajax';
?>

upload obrázků přestane fungovat, pokud to umažu, formulář chodí.

Nějaké tipy? Díky.

Editoval Beton (11. 2. 2015 16:13)

@Beton Voláš $.nette.init() ?

@Beton Zkus dumpnout upload pole (Za použití normálního uploadu a ajaxového požadavku).

Myslel jsem změnit addUploadImage za addUpload, aby se ukázal dump z Nette\Http\FileUpload. Myslím si, že se totiž vrátí v error kódu 4, což znamená „No file was uploaded.“.

Ach tak, ano, 4.

Byla to chyba nette.ajax.js.

Odkazuji: nette.ajax.js#2.0.0

@akadlec No chyba to byla, nefungovalo to. Ale chápu, nemůžu to dávat za vinu autorovi nette.ajax.js.

Je nejaka jednoducha cesta k tomu, ziskat finalni URL napr v service, jina, nez tato?

$imageSrc = $this->application->getPresenter()->link(":ImageStorage:generate", [$namespaceAndFilename]);

@Antik to je pravda! a diky :)