README

将 imgix 与 silverstripe 集成。

需求

安装

composer require plato-creative/silverstripe-imgix

许可证

见许可证

配置

在您的 site config.yml 文件中定义 imgix 源，如下所示

PlatoCreative\Imgix\Imgix:
  sub_domain: 'example'
  secure_url_token: '1234567891234' # (Optional) Defines the signkey for private sources
  folder_path: 'assets/Banners/' # (Optional) Default path id assets/

设置用于新图片上传的 Imgix 类

SilverStripe\Assets\File:
  class_for_file_extension:
    '*': 'File'
    'jpg': PlatoCreative\Imgix\Imgix
    'jpeg': PlatoCreative\Imgix\Imgix
    'png': PlatoCreative\Imgix\Imgix
    'gif': PlatoCreative\Imgix\Imgix

响应式图片

Imgix.js 是响应式图片所必需的。使用以下方法之一进行安装。

Bower

bower install --save imgix.js

NPM

npm install --save imgix.js

手动下载

有关更多信息，请参阅官方文档

维护者

Gorrie gorrie@platocreative.co.nz

错误追踪

错误在存储库的问题部分跟踪。在提交问题之前，请阅读现有问题以确保您的独特性。

如果问题看起来像是新的错误

创建一个新的问题
描述重现您问题的步骤和预期的结果。单元测试、屏幕截图和屏幕录像可能在这里有所帮助。
尽可能详细地描述您的环境：SilverStripe 版本、浏览器、PHP 版本、操作系统、安装的任何 SilverStripe 模块。

请直接向模块维护者报告安全问题。请勿在错误追踪器中提交安全问题。

开发和贡献

如果您想为此模块做出贡献，请确保您提出一个拉取请求并与模块维护者讨论。

添加到数据对象

以与 "Image::class" 相同的方式将 has_one 或 many_many 关系添加到 "Imgix::class"。以下是一个示例

<?php
use PlatoCreative\Imgix\Imgix;

class MyCustomPage extends Page
{
	private static $has_one = array(
		'Image' => Imgix::class
	);

    private static $many_many = array(
		'Images' => Imgix::class,
	);

	public function getCMSFields()
	{
		$fields = parent::getCMSFields();
		$fields->addFieldsToTab(
			'Root.Main',
			array(
				UploadField::create(
					'Image',
					'Image'
				),
				UploadField::create(
					'Images',
					'Images'
				)
			)
		);
		return $fields;
	}
}

在模板中操作图片

$Image.ScaleWidth(150) // Returns a 150x75px image
$Image.ScaleMaxWidth(100) // Returns a 100x50px image (like ScaleWidth but prevents up-sampling)
$Image.ScaleHeight(150) // Returns a 300x150px image (up-sampled. Try to avoid doing this)
$Image.ScaleMaxHeight(150) // Returns a 200x100px image (like ScaleHeight but prevents up-sampling)
$Image.Fit(300,300) // Returns an image that fits within a 300x300px boundary, resulting in a 300x150px image (up-sampled)
$Image.FitMax(300,300) // Returns a 200x100px image (like Fit but prevents up-sampling)

// Cropping functions
$Image.Fill(150,150) // Returns a 150x150px image resized and cropped to fill specified dimensions (up-sampled)
$Image.FillMax(150,150) // Returns a 100x100px image (like Fill but prevents up-sampling)
$Image.CropWidth(150) // Returns a 150x100px image (trims excess pixels off the x axis from the center)
$Image.CropHeight(50) // Returns a 200x50px image (trims excess pixels off the y axis from the center)
$Image.Fill(150,150).Top // Crop from the top of the image, down
$Image.Fill(150,150).Bottom // Crop from the bottom of the image, up
$Image.Fill(150,150).Left // Crop from the left of the image, right
$Image.Fill(150,150).Right // Crop from the right of the image, left
$Image.Fill(150,150).Faces // If faces are detected in the image, attempts to center the crop to them
$Image.Fill(150,150).Entropy // Automatically finds and crops to an area of interest by looking for busy sections of the image
$Image.Fill(150,150).Edges // Automatically finds an crops to an area of interest by performing edge detection looking for objects within an image
$Image.Fill(150,150).Faces.Top.Right // Will crop to faces, and if there are no faces, then crops to the top, right

// Padding functions (add space around an image)
$Image.Pad(100,100) // Returns a 100x100px padded image, with white bars added at the top and bottom
$Image.Pad(100, 100, CCCCCC) // Same as above but with a grey background

// Responsive functions
$Image.Responsive // Returns an image that is dynamically generated based on the size of the viewport (Only available with imgix.js, see Responsive Images)

// Automatic functions
$Image.Compress // Returns an image using imgix's best-effort techniques to reduce the size of the image
$Image.Enhance // Returns an image with more vibrant appearance
$Image.Format // Imgix chooses the most appropriate file format for delivering your image based on the requesting web browser
$Image.Redeye // Returns an image with red eye removal applied to detected faces

plato-creative / silverstripe-imgix

维护者

详细信息