README

此扩展使用picturefill.js v1.2.0作为加载不同图片大小的基座。

用法 1

# ngresponsive.ini
AlwaysResponsive=disabled

# full/article.tpl
...
{attribute_view_gui attribute=$node.data_map.image responsive_image_class=imagefull}
...

此用例需要我们更改模板文件，并设置ngresponsiveimages.ini和image.ini文件。

用法 2

# ngresponsive.ini
AlwaysResponsive=enabled

# full/article.tpl
...
{attribute_view_gui attribute=$node.data_map.image image_class=imagefull [responsive_disabled]}
...

此情况允许你覆盖图片别名，而无需更改模板文件。你所需要做的就是根据你的需求设置ngresponsiveimages.ini和image.ini文件。

选项

• image_class - 标准图片别名。除非将AlwaysResponsive设置为启用，否则此图片不是响应式的。
• responsive_image_class - 响应式图片别名。此图片别名使用picturefill html输出。
• responsive_disabled - 禁用当前属性（不是图片别名）的图片响应式。

ngresponsiveimages.ini

在ngresponsiveimages.ini中，您需要使用媒体查询表达式定义响应式断点。

[Responsive]
MediaQueryExpressions[]
MediaQueryExpressions[desktop]=(min-width: 768)

之后，您需要在ngresponsiveimages.ini文件中为您的eZ Publish安装中要使其响应式的每个图片别名创建组。

在以下示例中，imagefull图片别名将在桌面屏幕上替换为alias_768_3_2，对于移动屏幕，将使用default_alias，因为我们没有指定移动屏幕的映射MediaQueryMappings[mobile]。

[Responsive]
MediaQueryExpressions[]
MediaQueryExpressions[mobile]=(min-width: 480px)
MediaQueryExpressions[desktop]=(min-width: 768)

[imagefull]
DefaultMap=default_alias
MediaQueryMappings[]
MediaQueryMappings[desktop]=alias_768_3_2

这将输出以下针对imagefull别名的HTML：

<span data-picture data-alt="some alt text">
    <span data-src="default_alias.jpg"></span>
    <span data-src="desktop.jpg" data-media="(min-width: 768px)"></span>

    <!-- Fallback content for non-JS browsers. -->
    <noscript>
        <img src="imagefull.jpg" alt="some alt text">
    </noscript>
</span>

其他别名（例如，大、中、小）将保持不变，因为我们没有为它们定义INI组。

安装说明

• 激活扩展

• 将提供的示例image.ini中的图片别名复制并取消注释到您项目扩展中的image.ini。您当然可以使用自己的图片别名而不是示例中的别名。

• 将ngresponsiveimages.ini INI文件复制到您项目扩展中的ngresponsiveimages.ini.append.php，并根据您的需求配置图片别名和响应式断点。

• 如果尚未存在，请将viewport元标签添加到您的页面头部

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

作者

Netgen & Mario Ivančić