carrooi/images-manager

Nette 框架的图片管理器

4.0.0 2017-05-18 16:01 UTC

This package is auto-updated.

Last update: 2024-09-06 03:23:40 UTC


README

Build Status Donate

一个简单易用的上传图片管理工具。

BC 断裂!

请注意,3.0 版本已完全重写。

如果您仅使用 latte 模板并上传图片,只需将 basePathbaseUrl 配置移至 storage 部分。

安装

$ composer require carrooi/images-manager
$ composer update

config.neon

extensions:
	images: Carrooi\ImagesManager\DI\ImagesManagerExtension
    
images:
	storage:
    	basePath: %appDir%/../www/uploads
        baseUrl: http://www.site.com/uploads

命名空间

在您的网站上,您可以拥有许多不同类型的图片。例如用户图片、文章图片等等。但您也希望将它们分开,这就是命名空间产生的原因。

命名空间实际上只是选择路径中的一个目录(在我们的例子中 %appDir%/../www/uploads

这意味着用户的图片将保存在这里:%appDir%/../www/uploads/user

您需要做的只是创建这个目录。

保存图片

有一个自动注册的“manager”服务用于处理所有图片操作,因此让我们包含它并使用它(本例中将使用 presenter)

use Nette\Application\UI\Presenter;
use Nette\Application\UI\Form;

class ImagesPresenter extends Presenter
{


	/** @var \Carrooi\ImagesManager\ImagesManager @inject */
	public $imagesManager;
	
	
	/**
	 * @return \Nette\Application\UI\Form
	 */
	protected function createComponentForm()
	{
		$form = new Form;
		
		$form->addUpload('image', 'Image')
			->addRule(Form::IMAGE);
			
		$form->addSubmit('save', 'Upload');
		
		$form->onSuccess[] = [$this, 'uploadImage'];
		
		return $form;
	}
	
	
	/**
	 * @param \Nette\Application\UI\Form $form
	 * @param mixed $values
	 */
	public function uploadImage(Form $form, $values)
	{
		if ($values->image->isOk()) {
			$image = $values->image->toImage();
			$namespace = 'users';
			$name = 'david.jpg';
			
			$this->imagesManager->upload($image, $namespace, $name);
			
			// @todo: show flash message and redirect
			
		} else {
			// @todo: show error
		}
	}

}

如你所见,并不复杂,只需调用带有所需图片、命名空间和最终名称的 upload。就是这样 :-)

但请注意,如果 users 命名空间中已存在名为 david.jpg 的图片,它及其所有缩略图将被删除。

Latte 模板

这一步也非常简单,因为已经为您准备了一些 Latte 宏。

这个包的好处是您不需要担心浏览器的缓存。版本号的增加会自动附加到所有 URL 上,所以当您更改它时,浏览器总是会尝试加载新图片。

原始图片

<img n:src="users, 'david.jpg'">

带宽度的缩略图

<img n:src="users, 'david.jpg', 150">

带宽度和高度的缩略图

<img n:src="users, 'david.jpg', '150x150'">

使用不同缩放方法的缩略图(默认为 fit

<img n:src="users, 'david.jpg', 150, 'shrinkOnly|stretch'">

您甚至可以使用没有文件扩展名的名称,image-manager 将为您找到它

<img n:src="users, david, 100">

找到的文件扩展名将被缓存,所以如果您以除 ImagesManager 之外的其他方式更改某些图片,您必须自己删除缓存。

其他 Latte 宏

image

<strong>Image path:</strong> <i>{image users, 'david.jpg', '50x50'}</i>

is-image(别名 isImage)

<img n:is-image="users, 'david.jpg'" n:src="users, 'david.jpg', 50">

is-not-image(别名 isNotImage)

<div n:is-not-image="users, 'david.jpg'" class="alert alert-danger">
	Upload your image now!
</div>

默认图片

您可能需要一些默认图片。用户是另一个很好的例子,因为通常会有一些默认头像。默认图片名称为 default.jpg,并且它需要放在所需的命名空间目录中。

images:
	default: default.png

占位符图片

当甚至默认图片不存在时,您可以显示一些占位符图片(如可爱的小猫)。这是由于 lorempixel 服务的存在。

dummy:
	enabled: true
    category: cats
    fallbackSize: [800, 600]
    chance: 100
  • fallbackSize:在 latte 模板中没有给出大小时的图片分辨率
  • chance:在没有图片的情况下看到可爱猫的机会百分比

实体、DTO 等代替字符串名称

默认设置下,您必须使用类似 david.jpg 的字符串名称。但对于用户来说,使用他们的实体直接会更好。您只需配置具有自己的名称解析器的自定义命名空间设置。

use Carrooi\ImagesManager\INameResolver;
use App\Model\Entities\User;

class UserEntityNameResolver implements INameResolver
{


	/**
	 * @param \App\Model\Entities\User $user
	 * @return string
	 */
	public function translateName($user)
	{
		if (!$user instanceof User) {
			throw new \Exception;		// todo: better exception
		}
		
		return $user->getId();		// just like with string names
	}


	/**
	 * @param \App\Model\Entities\User $user
	 * @return string
	 */
	public function getDefaultName($user)
	{
		if (!$user instanceof User) {
			throw new \Exception;		// todo: better exception
		}
		
		return $user->getGender()->getName();
	}

}

配置

images:
	namespaces:
		user:
			nameResolver: App\Images\UserEntityNameResolver

图片质量

jpg 和 png 图片的质量可以自定义。这可以通过为所有图片命名空间全局或为每个图片命名空间单独完成。

images:
	quality: 90
    namespaces:
    	user:
        	quality: 100

预设

如果您经常使用特定的图片尺寸,创建预设是一个好主意。您可以将所有图片的尺寸保存到配置中,并使用这些名称。

这非常方便,当您将来需要更改某些尺寸时,只需在配置中进行更改即可。

配置

images:
	namespaces:
		user:
			presets:
				small: 10x20(shrinkOnly, stretch)
				medium: 40x50(fit)
				large: 400x500

模板

<img n:src="users, 'david.jpg', small">

等同于

<img n:src="users, 'david.jpg', 10x20, 'shrinkOnly|stretch'">