README

Timber for Wordpress 或其他Twig项目
Sass (SCSS)

安装

composer require wearebase/web-images

配置软件包安装位置

如果您想安装到除了 vendor 以外的位置，请在您的 composer.json 中添加以下内容

"extra": {
  "installer-paths": {
    "wp-content/themes/timber/packages/{$name}": ["wearebase/web-images"]
  }
}

包含内容

blazy，由Bjørn Klinggaard创建，使用MIT许可证。
- 文档在这里.
- (这些文件存储在这个仓库中是为了简单起见，因为bLazy不在Composer上可用，从npm或Bower拉取它将增加一个依赖项。)
- 我还包括了一份数据文档，因为它存储在一个可能不可用的私有网站上。
lazyLoad标记和scss以允许全尺寸背景、图像和TimberImages
background-size.min.htc以允许向后兼容 background-size: cover;

用法

启用视图

首先，您必须将视图文件夹添加到您的Twig模板加载路径中。

如果您不使用Timber，则只需使用 lazyImages.twig 作为通用的Twig文件。

Timber

将加载路径添加到您的 functions.php。您还必须在此处重新添加默认主题视图文件夹，因为它可能会覆盖Timber视图文件夹。

如果您使用Timber，则使用 timberImages.twig。

启用宏

在您的布局文件中，或者在单个宏或组件中

{% import 'lazyImages.twig' as base_image %}

或者如果您使用Timber，

{% import 'timberImages.twig' as base_image %}

启用Sass

将Sass添加到您的构建路径中。如果您使用Compass，请将其添加到您的config.rb中

 add_import_path "vendor/wearebase/web-images/scss"

@import "autoload"。以获取您所需的一切。
在您的项目变量中，您可以选择添加以下内容以覆盖默认值
- $base-lazy-transition-speed (500ms)

启用JS

将JS文件添加到您的页面中。

启用背景大小

背景大小默认禁用。要使用它，请将 background-size.min.htc 文件放到您的网站根目录。

您还需要在自己的代码中添加CSS规则来使用它。

引用htc文件时必须使用绝对路径。

懒加载

在您的页面上使用var bLazy = new Blazy();激活bLazy。为了获得最佳效果，请在其内部触发$(window).load()。
在调整大小等操作中，使用bLazy.revalidate();重新验证bLazy。
将b-lazy用作任何具有data-src的div或img的类以进行懒加载。最好使用此包中包含的宏来启用以下功能
- 懒加载图像，可选支持视网膜
- 懒加载TimberImages，可选支持视网膜
- 懒加载背景，可选支持视网膜
所有包含的功能都为非JS用户提供了<noscript>版本。

宏

标准懒加载图像。给它以下变量

1x和2x图像URL的数组，或者1x图像的字符串
Alt：用作alt标签的字符串，可选（如果为空，则使用空的alt标签，这将强制屏幕阅读器不读取图像）
Classes：要添加到图像中的任何附加类，作为字符串，可选
Width：整型，可选
Height：整型，可选

如果您需要将懒加载图像切换到普通图像标签，还有一个标准的'img'宏。

如果您知道图像的ID，这是一个更受欢迎的函数。

这在大多数情况下都很棒，但特定场景可能是在您的Wordpress图像中设置了一个“横幅”图像大小。然后您可以为帖子请求大小为“横幅”的“特色图像”。或者，如果您想做得更精致，添加一个“banner-2x”并请求['banner', 'banner-2x']以获取该横幅的视网膜尺寸。

传递以下变量给此函数

图像ID（推荐）或者当您想要使用不同的2x图像时的ID数组（不推荐）
Alt：用作alt标签的字符串。可选（如果为空，则使用Wordpress中设置的图像“标题”）
Classes：要添加到图像中的任何附加类，作为字符串。可选
Sizes：字符串或字符串大小的数组。如果为空，则使用'full'。可选

使用包含的背景宏轻松创建全尺寸懒加载背景。默认情况下，这些将淡入，但您可以通过在触发宏时将b-no-fade类添加到背景中来禁用此功能。
全尺寸背景的父元素必须设置为position:relative，或者使用bg-parent类。

传递以下变量给此函数

用作背景的图像的URL字符串
您想要使用的任何附加类，作为字符串

wearebase / web-images

维护者

详细信息