README

安装

composer install agentsquidflaps/picture

要求

PHP 7.0 或更高版本
GD
Symfony HTTP 基础 2 或更高版本
Intervention image 2.5.1 或更高版本

文档

请见下方基本用法或访问 https://agentsquidflaps.github.io/picture/#/ 获取更多信息。

用法

基本用法...

new Picture([
    (new PicSum())->setSize(200, 200)
])->setDescription('Your resized image')

...这将生成以下输出...

<picture>
    <source srcset="https://picsum.photos/200/200?random 1x, https://picsum.photos/400/400?random 2x">
    <img src="https://picsum.photos/200/200?random" alt="Your resized image">
</picture>

这是在做什么呢？

它创建了一个标准版本和视网膜版本，为不支持 picture 元素的浏览器提供了一个回退的 img 元素。

需要更多吗？

比如 WebP、视网膜和懒加载图片！只需执行以下操作（或使用允许 WebP/视网膜/懒加载的适配器进行类似操作）...

(new Agentsquidflaps\Picture\Picture([
	(new Agentsquidflaps\Picture\Adapter\Intervention())->setSize(200, 200)
]))
->setPath('test.jpg')
->setDescription('Your resized image')
->setRetina(true)
->setWebp(true)
->setLazyLoaded(true)

...这将生成以下...

<picture>
    <source srcset="data:image/svg+xml, --placeholder svg for lazy loaded images--"
            data-srcset="/thumbnails/f924053728ca5c6cb1a65902ccc2953f.webp 1x, /thumbnails/23430d514c3a226c3a514db1cadf681b.webp 2x"
            type="image/webp">
    <source srcset="data:image/svg+xml, --placeholder svg for lazy loaded images--"
            data-srcset="/thumbnails/9e7411e3ee6341902aece38a530bfada.jpg 1x, /thumbnails/7a03f89e60377bd0b4696f8563adf14e.jpg 2x"
            type="image/jpeg">
    <img src="data:image/svg+xml, --placeholder svg for lazy loaded images--"
         data-src="/thumbnails/9e7411e3ee6341902aece38a530bfada.jpg" class="lazyload" alt="Your resized image">
</picture>

以上内容的一些注意事项

设置环境变量

首先，任何本地源适配器（例如任何从单个服务器获取文件的适配器，如 Intervention）都需要知道图片的路径。包括指向您面向网页的文件夹的绝对路径以及从面向网页的路径到您希望缓存的图片所在位置的相对路径。

您需要设置以下变量...

PICTURE_WEB_ROOT
PICTURE_CACHE_RELATIVE_PATH

...并将它们放置在您的 .env 文件中，如下所示...

PICTURE_WEB_ROOT=/var/www/html/public
PICTURE_CACHE_RELATIVE_PATH=/thumbnails

GD 库

尽管 WebP 在小于 2.3 的 GD 库版本上也可以工作（假设已启用 WebP），但它可能会产生奇怪的结果。因此，建议您使用 2.3 或更高版本以获得最佳效果。GD 库 2.3 可从 Ubuntu 18 及以上版本获得。

懒加载

有关更多信息，请参阅 lazyloading。

抽象层

强烈建议您使用某种形式的抽象层。例如，使用 Laravel，您可能会...

$app->bind(Source::class, function() {
    return new Intervention();
})

...这样，您就可以更改全局的图片或添加默认值，如下所示...

$app->bind(Source::class, function() {
    return (new Intervention())->setFormat('webp');
})

...然后按如下方式使用它...

new Picture([
    $app->make(Source::class)->setSize(200, 200)
])->setDescription('Your resized image')

Laravel 函数

对于使用 Laravel 包的人来说，即任何可以全局调用 app() 函数的人，有辅助方法可以简化上述操作。它们是 picture()、source() 和 mediaQuery()。可以按如下方式使用它们...

picture([
    source()->setPath('path to image')->setMediaQuery(mediaQuery()->setMinWidth('sm'))
])->setDescription('img description')

agentsquidflaps / picture

维护者

详细信息