README

根据屏幕分辨率（Bootstrap 网格模式）动态调整/裁剪图像。

先决条件

Imagick (ImageMagick) PHP 扩展
PHP 版本 >= 5.5
Laravel 框架 4 及以上版本

安装

首先，您需要将以下行添加到 composer.json 文件中

{
  "require": {
       "izupet/laravel-flyimages" : "^1.0.0"
    }
}

从终端更新 composer

$ composer update

在 app.php 文件中添加服务提供者

Izupet\FlyImages\FlyImagesServiceProvider::class

Composer 完成工作后，运行此 artisan 命令以生成配置文件

$ php artisan vendor:publish

将此行 JavaScript 代码放入模板的 <head> 标签中。

<script>document.cookie='resolution='+Math.max(screen.width)+'; path=/';</script>

您已完成。

用法

在 flyimages.php 配置文件中自定义路由。此路由将用作模板中图像的路径。

现在，对于您要优化的每个图像，您应将查询字符串附加到路径。可能的参数包括

lg-w lg-h md-w md-h sm-w sm-h xs-w xs-m

此参数的有效值包括

像素（整数）数量
文本（字符串）auto - 根据相对尺寸自动计算此尺寸（保持比例）

如果屏幕分辨率等于或高于 1200px，则使用 lg 前缀的参数。

如果屏幕分辨率等于或高于 992px 且小于 1200px，则使用 md 前缀的参数。如果没有，则使用最近的父级参数（lg）。

相同的层次结构模式也用于 sm 和 xs 前缀的参数。

为了使一切正常工作，必须为某些前缀参数同时提供宽度和高度。如果没有两者都存在，则将提供原始图像。

####示例

<img src="/optimize/test.jpg?lg-w=400&lg-h=400&md-w=300&md-h=300"/>
<img src="/optimize/test.jpg?lg-w=auto&lg-h=700"/>
<img src="/optimize/test.jpg?sm-w=400&lg-h=400&md-w=300&xs-h=300"/> Wont work
<div style="background-image:url('/optimize/test.jpg?sm-w=256&sm-h=256');"></div>

##缓存

通过 ETAg 头部提供浏览器缓存。不使用服务器端缓存。建议对于非常受欢迎的网站使用反向代理缓存服务器或 CDN。

izupet / laravel-flyimages

维护者

详细信息

README

先决条件

安装

用法