README

Nette palette是Nette框架的扩展，允许对图像文件进行简单和高级的修改，包括智能生成缩略图和预览。

图像调色板，例如，允许：更改尺寸、添加水印、高级转换、设置透明度以及大量其他特效过滤器和功能。

安装和集成到Nette

1. 首先使用Composer将Palette安装到项目中。

php composer.phar require pavlista/nette-palette

2. 然后在Nette中将扩展注册到config.neon中。

extensions:
    palette: NettePalette\PaletteExtension

3. 在config.neon中添加扩展设置部分，并正确填写。

palette:
    path: 'files/thumbs/'
    url: 'http://website.com/files/thumbs/'
    signingKey: '%uniqueSigningKey%'
    basepath: '/var/www/website.com/www/files/'

path: 是相对或绝对路径，指向要保存生成的缩略图和图像的文件夹。这个文件夹必须存在，并且必须能够写入！
url: 以斜杠结束的绝对URL地址，指向公开可访问的缩略图文件夹。
signingKey: 用于签署生成缩略图的（http）请求的随机字符串。
basepath: (可选) 网站文档根的绝对路径。
fallbackImage: (可选) 当请求的图像不存在时使用的图像的绝对路径（主要适用于开发）。
fallbackImages (可选) 以名称 => 绝对路径的格式定义命名默认图像，可以在Palette查询中使用FallbackImg。
template: (可选) 以名称 => paletteQuery的格式定义模板字段。可以在palette查询中使用点号来引用模板，例如：.template。
websiteUrl: (可选) 以斜杠结束的应用程序地址，用于在命令行中生成图像的绝对URL地址（例如：https:///）。
pictureLoader: (可选) 实现接口IPictureLoader的服务，可以通过它来修改通过Palette读取和生成图像的逻辑。
handleException: (可选) 在生成图像时如何处理异常？true (默认) - 通过tracy记录异常，false - 抛出异常，string - 通过tracy将异常记录到文件。
webpMacroDefaultQuality: (可选) 对于n:webp宏定义默认质量（1-100）的WebP图像。如果没有指定，将使用100。

4. 最后，将以下规则添加到应用程序的路由规则中，并放在第一位

$router[] = new Route('files/thumbs/<path .+>', 'Palette:Palette:image');

其中 files/thumbs/ 是指向缩略图文件夹的相对公开URL地址。这样，Palette就可以按需生成图像缩略图。

Nette中的应用

在Nette中，palette服务可以通过@palette.service名称访问。

Latte

在Latte中，可以使用以下方法使用palette

n:palette-src宏

可以在HTML标签<img>和<source>中使用宏。
输入必须是文件路径（不是URL地址）和palette查询。

示例

{* Použití v tagu img (src) *}
<img n:palette-src="$image, '300;300;fit'" alt="Image" />

{* Použití v tagu source (srcset) *}
<source n:palette-src="$image, '300;300;fit&Grayscale&WebP'" type="image/webP">

生成的HTML

<img alt="Image" src="/demo/www/nette3.0/thumbs/images/portrait.4087713685.1638810813.jpg">
<source type="image/webP" srcset="/demo/www/nette3.0/thumbs/images/portrait.2202428379.1638810813.jpg.webp">

Palette过滤器

在Latte中，可以使用palette过滤器生成缩略图和不同版本的图像，输入必须是文件路径（不是URL地址）和palette查询。

示例

<img src="{$image|palette:'Resize;100;150&Border;2;2;black'}" />

此代码将生成一个100 x 150px的图像缩略图，周围有2px的黑色边框。

n:webp宏

使用此宏可以生成一组图片，其中第一个版本将是WebP格式的图片版本，如果未启用，则回退到原始文件格式（jpg|png|gif）。该宏只能用于HTML标签<picture>。

在picture标签内必须指定一个img标签，并通过宏n:picture-src定义图片源集。
该宏的参数与宏n:palette-src相同。

在宏中可以指定输出图片的百分比质量（1-100），如果没有指定，则使用配置中的webpMacroDefaultQuality的值。

示例

<div>JPG</div>
<picture n:webp>
    <img n:picture-src="$imageJpg, '300;300;fit'" alt="Image" />
</picture>

<div>JPG - Custom WebP quality (1–100)</div>
<picture n:webp="10">
    <img n:picture-src="$imageJpg, '300;300;fit'" alt="Image" />
</picture>

<div>WebP</div>
<picture n:webp>
    <img n:picture-src="$imageWebp, '300;300;fit'" alt="Image" />
</picture>

结果

<div>JPG</div>
<picture>
    <source srcset="/images/image.3082875972.1638810813.jpg.webp" type="image/webp">
    <source srcset="/images/image.2641037063.1638810813.jpg" type="image/jpeg">
    <img alt="Image" src="/images/image.2641037063.1638810813.jpg">
</picture>

<div>JPG - Custom WebP quality (1–100)</div>
<picture>
    <source srcset="/images/image.1770219929.1638810813.jpg.webp" type="image/webp">
    <source srcset="/images/image.2641037063.1638810813.jpg" type="image/jpeg">
    <img alt="Image" src="/images/image.2641037063.1638810813.jpg">
</picture>

<div>WebP</div>
<picture>
    <source srcset="/images/image.6612593.1638810813.webp" type="image/webp">
    <img alt="Image" src="/images/image.6612593.1638810813.webp">
</picture>

所有可能的过滤器、效果以及如何使用Palette本身的列表，可以在Palette的Github上找到。

pavlista / nette-palette

维护者

详细信息