README

自动生成并服务适合您的访客视口大小的图片，而无需更改您的主题！

功能

• 响应式图片
• WebP 转换
• 焦点点
• 内联 SVG 辅助函数

响应式图片

工作原理

此插件提供了一个中间件，它将 srcset 和 sizes 属性添加到您的 html 响应中所有本地服务的图片。

它将这个

<img width="500" src="/storage/app/media/image.jpg">

转换成这个

<img width="500" src="/storage/app/media/image.jpg" srcset="/storage/temp/public/be7/4d6/0cc/image__400.jpg 400w, /storage/temp/public/be7/4d6/0cc/image__768.jpg 768w, /storage/temp/public/be7/4d6/0cc/image__1024.jpg 1024w" sizes="(max-width: 500px) 100vw, 500px">

它会自动创建图片的调整大小副本，并为您的访客提供最合适的版本。

所有图片副本都保存在您的公共临时路径中。远程文件系统尚未测试。

图片在第一次页面加载时生成。根据源图片的大小，这可能需要几秒钟。后续页面加载将更快，因为图片只调整一次大小。

配置

默认情况下创建三个图片大小：400、768 和 1024 像素。

您可以通过修改后端设置来更改这些值。

替代 src 和 srcset 属性

如果您想使用替代的 src 属性，您可以通过后端设置页面进行更改。

如果您正在使用像 jQuery.lazyLoad 这样的插件，其中图片最初通过 data-original 属性链接，这很有用。

如果您的插件需要替代的 srcset 属性（如 verlok/LazyLoad），这也可以通过后端设置指定。

全局 class 属性

如果您想为每个处理的图片添加一个类，您可以通过后端设置进行配置。

如果您想在网站上为所有图片添加 Bootstrap 的 img-responsive 类，这很有用。

预生成图片

您可以使用 php artisan responsive-images:generate 命令来预生成响应式图片。该命令使用 October 的 pages.menuitem.* 事件构建所有可用 URL 的列表，并预生成这些页面上使用的所有图片。

测试结果

我在一个包含 20 张 Pixabay 高清壁纸的页面上测试了此插件。

退出处理

如果您出于任何原因想完全忽略此插件中的 img 标签，只需将 data-responsive="ignore" 属性添加到您的标签中即可。

<img src="dont-process-this.jpg" data-responsive="ignore" alt="">

删除调整大小的图片

使用 php artisan responsive-images:clear 命令删除所有调整大小的图片。下次请求页面/图片时，将再次创建调整大小的副本。

WebP 转换

此插件提供了一种选项，如果访问的浏览器表示支持它，则提供 WebP 图片。

在后台设置中启用 WebP 转换。启用此选项将在您的 .htaccess 文件中添加一个规则，该规则检查每个请求的 {filename}.{extension}.webp 图片，并在可用的情况下将其提供给客户端。

将图片转换为 WebP 的控制台命令

插件包含一个方便的控制台命令，您可以在 cronjob 中运行它，该命令遍历您的存储目录并将图片转换为 WebP。

php artisan responsive-images:convert --include=storage/app

此命令需要在您的服务器上安装 cwebp。您可以从 您的操作系统下载它，并使用 --converter-path 选项提供二进制文件的路径。

转换错误

您可以在offline_responsiveimages_inconvertibles表中找到失败的图片转换日志。如果一个文件的转换失败，它将记录在这个表中。对于之前失败的文件将不会重试转换。要强制重试，请从表中删除该文件并再次运行转换命令。

支持Apache以外的服务器

如果您不使用Apache，您必须配置您的服务器以执行以下操作

1. 检查Accepts http头中是否存在image/webp
2. 检查请求的图片是否以jp(e)g或png结尾
3. 检查请求的图片加上一个.webp是否存在
4. 如果存在，请提供它

Apache + .htaccess

如果您使用启用了mod_rewrite的Apache，您不需要手动操作。如果启用WebP支持，插件将自动修补您的.htaccess文件

Nginx

如果您使用Nginx来托管您的October网站，您必须手动修改您的服务器配置。

以下示例应为您提供良好的起点。

user www-data;

http {
  sendfile on;
  tcp_nopush on;
  tcp_nodelay on;

  include /etc/nginx/mime.types;
  default_type application/octet-stream;

  gzip on;
  gzip_disable "msie6";

  map $http_accept $webp_suffix {
    default   "";
    "~*webp"  ".webp";
  }

  # ...

  server {
    charset utf-8;
    listen 80;

    server_name localhost;
    root /var/www/html;
    index index.php;

    location ~ \.(jpe?g|png)$ {
	add_header Vary Accept;
        try_files $uri$webp_suffix $uri/;
    }

    # ...
  }
}

您的mime.types文件还应列出webp mime类型

image/webp  webp;

其他服务器

我们没有为其他服务器软件投资于适当的WebP检测配置。基于上面的.htaccess示例和webp-detect存储库，您应该能够确定所需的配置。

如果您有一个工作示例，请通过PR添加到本README中！

自定义基本目录路径

如果您的应用程序目录位于特殊位置，您可以设置RESPONSIVE_IMAGES_BASE_DIR环境变量来更改源路径。

<IfModule mod_setenvif.c>
    SetEnv RESPONSIVE_IMAGES_BASE_DIR /path/to/your/dir
</IfModule>

焦点点

此功能有两个组件

后端

在后端，文件上传小部件扩展了一个简单的焦点选择器。

要启用此扩展，只需将focuspoint: true设置为插件中的任何文件上传小部件的fields.yaml。此功能默认关闭。

一旦启用，您就可以单击上传的图片来选择焦点。

fields:
    images:
        label: Images
        mode: image
        useCaption: true
        thumbOptions:
            mode: crop
            extension: auto
        span: full
        type: fileupload
        # Enable the focus point selector
        focuspoint: true

前端

您可以在任何File模型上使用新的focus方法来获取焦点图像的源。

focus方法与thumb方法具有完全相同的API，您可以指定height、width和mode。

<img src="{{ image.focus(200, 300, 'auto') }}" alt="">

此调用将生成以下HTML

<img src="/storage/temp/public/a9f/2bd/159/offline-focus_30_400_500_50_50_0_0_auto__400.jpg"
     alt=""
     class="focuspoint-image"
     style="width: 100%; height: 100%; object-fit: cover; object-position: 30% 80%;">

您可以通过插件的后端设置禁用内联样式的注入。

如果您想使用任何现有的焦点点JS库，您还可以定义一个自定义容器，该容器将围绕图片放置。焦点坐标可以作为自定义data-*属性注入。

所有这些设置都可在插件的后端设置页面上找到。

<div class="focuspoint-container" data-focus-x="50" data-focus-y="30">
    <img src="/storage/temp/public/a9f/2bd/159/offline-focus_30_400_500_50_50_0_0_auto__400.jpg"
         alt=""
         class="focuspoint-image"
         data-focus-x="50"
         data-focus-y="30"
     >
 </div>

浏览器兼容性

请注意，在没有使用polyfill的情况下，IE不支持object-fit。

内联SVG图像

此插件注册了一个简单的svg辅助函数，使您能够内联项目中的SVG图像。

<!-- search in theme directory -->
<div class="inline-svg-wrapper">
	{{ svg('assets/icon.svg') }}
</div>

<!-- start with a / to search relative to the project's root -->
<div class="inline-svg-wrapper">
	{{ svg('/plugins/vendor/plugin/assets/icon.svg') }}
</div>

使用变量

除了内联SVG本身外，辅助函数还会将任何变量传递给SVG并使用October的Twig解析器解析它。这意味着您可以轻松创建动态SVG。

<!-- icon.svg -->
<svg fill="{{ fill }}" width="{{ width | default(800) }}"> ...

<!-- You can pass variables along as a second parameter -->
<img src="{{ svg('/plugins/xy/assets/icon.svg', {fill: '#f00', width: '200'}) }}">

错误报告

很可能存在某些特定HTML标记的bug。如果您遇到此类bug，请报告。

未来计划

• 排除/包含过滤器
• 可能有一个组件可以在某些页面上启用中间件