README

此存储库是我们所说的“子树拆分”：主存储库中的一个目录的只读副本。它由 Composer 使用，以便开发人员依赖特定的捆绑包。

如果您想报告或贡献，您应该在主存储库中打开问题： https://github.com/Novactive/Nova-eZPlatform-Bundles

文档可通过此存储库中的 .md 文件获得，但还包装在此： https://novactive.github.io/Nova-eZPlatform-Bundles/master/ResponsiveImagesBundle/README.md.html

Novactive eZ Responsive Images 是一款用于管理响应式图片的轻量级 eZ Publish 5.x|6.x 捆绑包。

安装

用法和主要功能

将库添加到您的 composer.json，运行 composer require novactive/ezresponsiveimagesbundle 以更新依赖项。

默认情况下，此捆绑包将使用 picturefill 来加载您的变体版本。

您还可以选择延迟加载图片，在这种情况下，捆绑包将使用 unveil.js 来加载变体别名名称的正确版本。

今天它处理3个版本

移动：视口宽度 < 640px
桌面：默认选择
视网膜：设备像素比 > 1

然后，真正有趣的是理解只有正确的版本才会加载到浏览器中。延迟加载基于视口，如果一个图片在屏幕上不可见，它将被预加载并在滚动操作中加载。

这意味着

通过不加载不可见的图片，它极大地减少了页面的大小和加载时间。
当图片加载时，它确保是适应的版本。

        {{ ez_render_field(content, 'image', {
            parameters: {
                alias: 'blog_post_line_home',
                class: 'img-responsive img-rounded',
                unveiled: true,
            }
        }) }}

Unveiled 表示“延迟加载”

请向下阅读，您需要为每个当前别名再创建两个别名。

使用 Composer

将库添加到您的 composer.json，运行 composer require novactive/ezprotectedcontentbundle 以更新依赖项。

然后，将捆绑包注入应用程序的 bundles.php。

    Novactive\Bundle\eZResponsiveImagesBundle\NovaeZResponsiveImagesBundle::class => [ 'all'=> true ],

创建 _mobile 和 _retina 别名名称

捆绑包要求您为每个正在使用的别名再创建两个别名。例如：

    gallery_full_thumbnail:
        reference: ~
        filters:
            - { name: geometry/scaledownonly, params: [354, 224] }

    gallery_full_thumbnail_mobile:
        reference: gallery_full_thumbnail
        filters:
            - { name: geometry/scalewidthdownonly, params: [175] }

    gallery_full_thumbnail_retina:
        reference: ~
        filters:
            - { name: geometry/scaledownonly, params: [708, 448] }

在页面布局中加载资源

    <head>
        ...
        {% include 'NovaeZResponsiveImagesBundle::novaezresponsiveimages.html.twig' %}
    </head>

novactive / ezresponsiveimagesbundle

维护者

详细信息

README

安装

用法和主要功能

使用 Composer

创建 _mobile 和 _retina 别名名称

在页面布局中加载资源