Manipulace s obrázky [Nový ImageStorage]

@JanMikeš Napadlo mě udělat parametrizované aliasy, aby se zamezilo duplicitě.

images:
	local:
		aliases:
			resizeExact: "resize:$1,$2"

{img "image.jpg", "resizeExact:150,150"}

Originální cesta je original/image.jpg
A nejspíše by se vytvořila tato cesta resizeExact/150.150/image.jpg

Tady by mohl nastat velký nepořádek v případě mnohonásobných namespace, řešením by bylo mít jen jedno namespace nebo převést namespace1/namespace2 na složku namespace1.namespace2 a nebo si dávat pozor na název aliasů a namespace.

Aliasy chci zachovat, protože u složitějších funkcí, zvláště u cloudinary a jejich vnořených funkcí, je velmi těžké generovat správný název složky.

Editoval Martk (1. 2. 2017 12:47)

@mordare makro {img} ti nevytvoří tag <img> „pouze“ vypíše tu cestu, což sám popisuješ, správně tedy je:

<img src="{img ...}">

Ps. pokud by makro vykreslovalo i tag <img>, bylo by to pak nepoužitelné například pro styles="background: url({img ...})"

Editoval Jan Mikeš (8. 2. 2017 13:36)

@mordare Přemýšlel jsem spíše, jestli mám v tomto balíčku podporovat i jiné úložiště než lokální. Pokud používáš nejnovější verzi, tak tam není nic na pevno. Stačí si vytvořit novou třídu a tu podědit od WebChemistry\Images\Storage.

Základní šablona asi tady:

<?php

namespace WebChemistry\Images\Storages;

use WebChemistry\Images\Modifiers\ModifierContainer;
use WebChemistry\Images\Resources\IFileResource;
use WebChemistry\Images\Resources\IResource;
use WebChemistry\Images\Resources\Transfer\ITransferResource;
use WebChemistry\Images\Storage;
use WebChemistry\Images\Storages\Cloudinary\CloudinaryFacade;

class CloudinaryStorage extends Storage {

	private $modifierContainer;

	public function __construct(ModifierContainer $modifierContainer, array $config) {
		$this->modifierContainer = $modifierContainer;
	}

	public function link(IFileResource $resource) {
		// vsude budes potrebovat asi tohle
		$resource->getId(); // identifikator obrazku
		$resource->getAlises(); // pole aliasu
		$this->modifierContainer->modifiersFromResource($resource); // ktere modifikace po nas uzivatel chce, extrahovany z aliasu
	}

	public function save(IResource $resource) {
		if (!$resource instanceof ITransferResource) {
			return $resource; // or throw exception?
		}
		$resource->setSaved();


		return; // Vratit IFileResource
	}

	public function copy(IFileResource $src, IFileResource $dest) {

	}

	public function move(IFileResource $src, IFileResource $dest) {

	}

	public function delete(IFileResource $resource) {

	}

}

Předpokládám, že všechny změny probíhají na externím serveru, jinak by to bylo o něco málo složitější.

Jo to by neměl být problém dodělat, máš-li čas můžeš se klidně postarat o pr :)

<img n:img="'image.jpg'|noImage:'noimage.jpg'">mi vyhazuje parse error na dvojtečku. Neví někdo jak to nastavit?

Pokud to použiji s doctrine entitou, vrací mi WebChemistry\Images\Resources\FileResource což nechce vzít n:img. Je nějaká jiná cesta než to zapsat jako

<img n:img="$user->image->getName(),mini">

Zdravím, já už vážně nevím jak dál.
S uploadem jsem neměl sebemenší problém, ale při vykreslování stále dostávám hlášku „Namespace is not valid.“
Tak jsem si na basePresentru jeden obrázek přes $this->storage->createResource() dumpnul a vážně nemá přidělený žádný namespace (namespace ⇒ null).

Ale když si udělám dump po uploadu, tak obrázek namespace přidělený má.

Upload mám řešený přes jzechy/jQuery-FileUpload

public function save(\Nette\Http\FileUpload $file, array $params = []) {
    $resource = $this->storage->createUploadResource($file);
    $resource->setNamespace($params['namespace']);
    $result = $this->storage->save($resource);
    return $file->getSanitizedName();
}

Na šabloně potom

<img class="img img-fluid" src="{img 'ds/original/22467334-1984457505212953-7025201851310817024-o.jpg'}">

Děkuji za každou radu.

Martk napsal(a):

@Ivorius Nyní se to nastavuje v aliasech, bohužel se na to vytváří speciální složka, kterou ještě opravím.

images:
	local:
		aliases:
			article_default: 'defaultImage:noimage.jpg'

<img n:img="'image.jpg', article_default">

Mohl bys mi prosím ukázat, jak to tedy má vypadat, když chci zmenšené obrázky – mini a zároveň použít defaultní obrázek, pokud není nastaven?

		aliases:
			user_default: "defaultImage: noimage.jpg"
			mini: "resize:30,30,exact|sharpen"
			small: "resize:120,120,exact|sharpen"

<img n:img="'image.jpg', user_default,mini">

asi není to správné

@flamengo Musíš si to předat do šablony. Např. $this->template->_imageFacade = $this->imageFacade;

Protože externí úložiště jako Cloudinary nebo S3 nemůžou mít resourceLocation. Přidal jsem do všech úložišť metodu getImageSize, která vrací objekt ImageSize.

Zdravím,

máte někdo zkušenost s napojením na https://github.com/…y-FileUpload ? Ať dělám, co dělám, nedaří se mi to.

namespace App\Model;

use Nette\SmartObject;
use Nette\Utils\FileSystem;
use Zet\FileUpload\Model;
use WebChemistry\Images\IStorage;


class UploadFilesRepository implements \Zet\FileUpload\Model\IUploadModel {
    use SmartObject;


	/** @inject @var WebChemistry\Images\IStorage */
	public $storage;
	/** @inject @var Nette\Utils\Upload */
	public $upload;


    /**
     * Zpracování požadavku o smazání souboru.
     * @param $uploaded Hodnota navrácená funkcí save.
     */
    public function remove($uploaded) {
    }

    /**
     * Zpracování přejmenování souboru.
     * @param $upload Hodnota navrácená funkcí save.
     * @param $newName Nové jméno souboru.
     * @return mixed Vlastní návratová hodnota.
     */
    public function rename($upload, $newName) {
        Nette\Utils\FileSystem::rename($upload,"../www/advert_pics/".$newName);
    }

    /**
     * Uložení nahraného souboru.
     * @param \Nette\Http\FileUpload $file
     * @param array $params Pole vlastních hodnot.
     * @return mixed Vlastní navrátová hodnota.
     */
    public function save(\Nette\Http\FileUpload $file, array $params = []) {
		// vytvorime zdroj pro obrazek
		$resource = $this->storage->createUploadResource($upload);
		// pridame namespace
		$resource->setNamespace('namespace');
		// ulozime
		$result = $this->storage->save($resource);
		// zobrazime url adresu
		echo $this->storage->link($result);
    }

Vyhazuje mi to: Call to a member function createUploadResource() on null

Je mi jasné tedy, že $this->storage je null, nevím si rady jak si předat ten soubor.

Díky

Mysteria napsal(a):

Inject anotace fungují jenom v presenterech, předej si ty závislosti normálně přes konstruktor.

Díky. Bohužel ani to se mi nedaří, asi to dělám úplně špatně.

namespace App\Model;

use Nette\SmartObject;
use Nette\Utils\FileSystem;
use Zet\FileUpload\Model;
use WebChemistry\Images\IStorage;


class UploadFilesRepository implements \Zet\FileUpload\Model\IUploadModel {
    use SmartObject;


	public $storage;
	public $upload;


    public function __construct () {
        $this->storage = new \WebChemistry\Images\IStorage;
        $this->upload = new \Nette\Utils\Upload ;
    }

	# další metody třídy
}

vyhazuje mi to

Class 'WebChemistry\Images\IStorage' not found

Martk napsal(a):

namespace App\Model;

use Nette\SmartObject;
use Nette\Utils\FileSystem;
use Zet\FileUpload\Model;
use WebChemistry\Images\IStorage;


class UploadFilesRepository implements \Zet\FileUpload\Model\IUploadModel {
    use SmartObject;


    public $storage;
    public $upload;


    public function __construct (IStorage $storage, Upload $upload) {
        $this->storage = $storage;
        $this->upload = $upload;
    }

    # další metody třídy
}

config.neon

services:
	- App\Model\UploadFilesRepository

presenter:

class CustomPresenter {

	/** App\Model\UploadFilesRepository @inject */
	public $repository;

}

cokoliv jiného, musíš to zaregistrovat jako UploadFilesRepository do configu:

class CustomService {

	public function __construct(App\Model\UploadFilesRepository $repository) { ... }

}

namespace App\Model;

use Nette\SmartObject;
use Nette\Utils\FileSystem;
use Zet\FileUpload\Model;
use WebChemistry\Images\IStorage;


class UploadFilesRepository implements \Zet\FileUpload\Model\IUploadModel {
    use SmartObject;

	public $storage;
	public $upload;


    public function __construct (WebChemistry\Images\IStorage $storage, Upload $upload) {
        $this->storage = $storage;
        $this->upload = $upload;
    }

Mi teď pro změnu vyhazuje

Service '36_App_Model_UploadFilesRepository' (type of App\Model\UploadFilesRepository): Class App\Model\WebChemistry\Images\IStorage needed by App\Model\UploadFilesRepository::__construct() not found. Check type hint and 'use' statements.

Není někde nějaký sandbox kterým bych se mohl inspirovat?

Díky

Problém byl v tom, že nic jako WebChemistry\Images\IStorage které se uvádí v dokumentaci neexistuje, jmenuje se to WebChemistry\Images\IImageStorage.

Editoval cafesk8 (26. 6. 2018 14:15)

$this->template->image = $this->imageStorage->createResource(...);

nebo rovnou

{img 'moje_slozka/soubor.jpg', resize(20,30,shrink)}

Dokumentaci opravím, díky.

Editoval Martk (27. 6. 2018 10:17)

flamengo napsal(a):

@Martk Ahoj, neměl by jsi někde nějaký ukázky, jak přejít z verze 2.1.4 na aktuální? V minulsoti jsme zkusil aktivovat > S aktuální jsme začal takto:

$resource = $this->imageStorage->createResource($image);

A hned jsem skončil:

Error
Call to undefined method WebChemistry\Images\Template\ImageFacade::createResource()

@flamengo ImageFacade nemá metodu createResource(). Avšak vypadá to, že má metodu create(), která interně createResource() nad storage volá.

Takže v prvním kroku bych vyzkoušel přepsat to na

$resource = $this->imageStorage->create($image);

a uvidíš, co se stane.

Díky moc klucí, pomohlo :) A taky hodně díky za rychlou reakci.

@mordare Ano, je to tak jak píšeš.

@nightfish Udělal jsem to jak píšeš. Potřebuji toho volat více (např. createUploadResource()) a takto to funguje parádně.

@jurajvt Jak přesně nastavuješ setDefaults?

Proč v handle metodě?

Nette může volat jen jeden handle a formulář je taky handle, takže při odeslání formuláře se kód nevykoná.

Jsou jen 2 možnosti kde nastavovat správně setDefaults:

1. V továrničce
2. V metodě createComponent*

Kdekoliv jinde se to nevykoná při odeslání formuláře.

Budeš muset udělat tohle:

1. Továrnička:

class Factory {

	...

	/** @var FileResource|null */
	private $picture; // + setter

	...

	public function create() {
		...

		$form->addImagePreviewUpload('picture', 'Picture')
			->setDefaultValue($this->picture)
		...
	}

}

a v presenteru:

$this->factory->setPicture($this->storage->createResource($record['picture']));

před tím, než zavoláš $this['myForm'] nebo $this->getComponent('myForm')

Editoval Martk (26. 2. 2020 10:20)

Ahoj @Martk , narazil jsem na problém u verze 3.0, neumí pracovat s EXIF vs. Orientation, takže některé fotky pořízené mobilem to nezpracuje správně. Nemáš v rukávu nějakou rychlou záplatu na tuto verzi? Koukal jsem, že ve verzi 4.1.8 to řešeno je. Klidně si upravím knihovnu ve vendoru, což jsme už zkoušel:

• do BaseModifiers jsem doplnil fixOrientation
• Upravil jsem alias v configu:

aliases:
adm-thumb: ‚resize:400,400,shrink_only,fixOrientation‘

Ale hlásí mi to: Flag ‚fixOrientation‘ not exists.
Předem díky za nakopnutí.

@Martk Díky za odpověď. No bohužel jsem to stejně nerozchodil, chce to $path = $param->getLocation(); a to nevím, kde sebrat :(

@kralik a z té chyby jsi nepochopil co? implementuješ metodu load a ta musí mít stejný signature jako její definice, tedy:

public function load(WebChemistry\Images\Modifiers\IModifiers $modifiers): void;

@kralik Budeš muset hledat na google php gd blur, používá to totiž nette/image, které používá knihovnu gd.

Už delší dobu připravuji lepší verzi (https://github.com/…mage-storage + další balíčky), která umí použít jak gd, tak imagick nebo gmagick (u imagick stačí na blur použít $image->blurImage()). Dá se to použít standalone, na nette nebo symfony. Teď to používám v kombinaci nette/symfony + google cloud + gumlet + doctrine, tohle nešlo u tohoto balíčku snadno udělat.

Editoval Martk (17. 11. 2020 22:46)