包简介

Adds lazysizes in the SilverStripe CMS

README 文档

README

Integrate https://github.com/aFarkas/lazysizes and https://github.com/aFarkas/respimage to Silverstripe.

Code heavily inspired by https://github.com/heyday/silverstripe-responsive-images

All-in-one solution for:

Lazy loading images
Responsive images
Placeholder images (using placehold.it)

Respimages is only loaded if the browser does not support native syntax.

Plugins

This modules has already pre built plugins into a consolidated js file.

Plugins available by default are:

Lasysizes:

unveilhooks
print
bgset
include

Respimages:

oldie
intrinsic
mutation

You can also define your own path to the libraries by adjusting the following path

LazySizesImageExtension:
	js_path: 'lazysizes/javascript'

LazyLoading

If you simply want to lazy load your image, you can use any of three default methods which specify no additional sizes.

Example:

$Image.Lazy(720x250)
$Image.LazyCrop(720x250)
$Image.LazyCropFocus(720x250)

Responsive sets

You can define your own responsive sets. You can see the bundled configuration for the ResponsiveDefault set which set 4 breakpoints. You can define your own sets, change sizes, method and default size to be used.

All sets use lazysizes data-sizes="auto" by default, meaning that the width of the parent is used to determine which size needs to be loaded.

Retina is also supported.

Config example:

LazySizesImageExtension:
	ResponsiveDefault:
		sizes: [320x213 320w,640x426 640w,960x639 960w,1280x852 1280w]
	ResponsiveDefaultSquare:
		sizes: [320x320 320w,640x640 640w,960x960 960w,1280x1280 1280w]
	ResponsiveDefaultRetina:
		sizes: [400x300 1x, 800x600 2x]

Usage example in template:

$Image.ResponsiveDefault

Using placeholders

The controller extension provides a helper method to easily create placeholders using PlaceholdIt. You can define a base size and a src set.

Example:

$PlaceholdIt(175x75,'200x100,500x300,800x400')

SrcSet

Sometimes, you just need to output a list of srcset paths (for instance, to define a bgset). The last element of the set is never resized (always using the original image at maximum size). You can prevent this from happening by setting the second argument to false.

Example:

<body id="$ClassName" class="typography lazyload" data-bgset="$SiteConfig.RandomBackgroundImage.SrcSet('480,800')">

Compatibility

Tested with 3.1

Installation

composer require lekoala/silverstripe-lazysizes

Maintainer

LeKoala - thomas@lekoala.be

lekoala/silverstripe-lazysizes 适用场景与选型建议

lekoala/silverstripe-lazysizes 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 136 次下载、GitHub Stars 达 16，最近一次更新时间为 2015 年 03 月 31 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「module」「cms」「silverstripe」「lazysizes」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 lekoala/silverstripe-lazysizes 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 lekoala/silverstripe-lazysizes 我们能提供哪些服务？

定制开发 / 二次开发

基于 lekoala/silverstripe-lazysizes 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发