moosylvania / silverstripe-responsive-image

SilverStripe 的响应式图片模块。

维护者

详细信息

github.com/Moosylvania/SilverStripe-Responsive-Image

源代码

问题

安装: 20

依赖: 0

建议: 0

安全性: 0

星标: 2

关注者: 5

分支: 1

公开问题: 3

类型：silverstripe-module

dev-master 2016-01-19 20:22 UTC

Requires

MIT eb54c9315bf8fb4a9b954bc81cd2bb1776ddef5a

  • Joe Madde <joe.madden.woop@moosylvania.com>
  • Mitch Viner <mitch.viner.woop@moosylvania.com>

imageresponsivesilverstripe

This package is auto-updated.

Last update: 2024-09-15 04:52:30 UTC

README

SilverStripe 实现底部填充技术的响应式图片模块。

要求

  • SilverStripe 3.1.0+

安装 & 文档

  1. 克隆仓库或使用 Composer 将此模块拉取到您的 SilverStripe 项目中。

  2. 任何使用 ResponsiveImage 数据对象的页面需要在您的网站上包含以下 JS 和 CSS -

     Requirements::javascript('SilverStripe/Responsive-Image/javascript/responsive-img.js');
 Requirements::css('SilverStripe/Responsive-Image/css/responsive-img.css');

  3. 在您的页面上使用 Image Object 类型而不是 ResponsiveImage。例如：

     private static $has_one = array(
     'HeroImage' => 'ResponsiveImage'
 );

  4. 在您的模板内部，为了渲染正确的输出，您将调用 -

     $HeroImage.Responsive

注意

此模块是从以下文档中灵感的，该文档记录了底部填充技巧 -

http://www.smashingmagazine.com/2013/09/16/responsive-images-performance-problem-case-study/