README

自适应图像的附加组件

允许通过自动创建代表相同图像的不同资源来支持高分辨率显示。它通过在 img 元素中添加 srcset 属性来指定位图图像，如 W3C 草案 http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/ 所述

默认情况下，模板中会自动执行，WYSIWYG 需要修改你的 getCMSFields() 方法。

旧浏览器需要 polyfill。所有现代浏览器都支持此标签

仅缩放图像 将生成自适应图像，例如 $Image.paddedImage(50)。对原始图像进行放大没有意义，但你可以通过在 RetinaImage.php 中的 $forceretina 上更改布尔值来强制缩小图像。注意这将使每个未缩放的图像的大小减半。

使用方法

安装附加组件
在你的页面上运行 ?flush=1
完成！喝杯啤酒吧

WYSIWYG 支持

你需要修改你的 getCMSFields() 函数。用 create() 创建一个 \HtmlEditorField 而不是使用 new，有一个自定义类将修改其行为。在大多数情况下，你只需要在你的 Page.php 文件中做一次。

$fields->removeFieldFromTab('Root.Main', 'Content');
$fields->addFieldToTab('Root.Main', 
	HtmlEditorField::create('Content', _t('SiteTree.HTMLEDITORTITLE', 'Content', 'HTML editor title')),
	'Metadata'
);

工作原理

创建生成图像时，它会创建三个不同大小的图像，分别放大到以下因子：1.0x、1.5x 和 2.0x。默认生成的图像也会创建，用作 src 属性。然后这些图像的 URL 将被放置到 srcset 标签中。

调整变量

yml 配置有两个变量，qualityDegrade 和 qualityCap。qualityDegrade 是随着图像变大而降级的百分比比率。30% 的 qualityDegrade 将使 2x 图像降级 30%（默认质量为 75%，则将降级为 45%）。qualityCap 用于确保不会降级太多。

有很多在线资源描述了为什么随着图像的增大降低质量是一个好主意。

srcset Polyfills

https://github.com/borismus/srcset-polyfill/ https://github.com/culshaw/srcset http://jimbobsquarepants.github.io/srcset-polyfill/

chitosystems / silverstripe-retina-images

维护者

详细信息