README

这是一个提供一些有用Twig函数以供在项目中使用的Symfony扩展包。

HTML和CSS由Gemma Casals提供。

安装

步骤 1：下载扩展包

打开命令行控制台，进入您的项目目录，并执行以下命令以下载该扩展包的最新稳定版本

$ composer require rrb/twig-utils-bundle "*"

此命令需要您全局安装Composer，如Composer文档中的安装章节所述。

步骤 2：启用扩展包

然后，通过将其添加到项目的app/AppKernel.php文件中注册的扩展包列表中来启用扩展包

<?php
// app/AppKernel.php

// ...
class AppKernel extends Kernel
{
    public function registerBundles()
    {
        $bundles = array(
            // ...

            new Rrb\TwigUtilsBundle\RrbTwigUtilsBundle(),
        );

        // ...
    }

    // ...
}

用法

延迟加载图片

该扩展包提供了基于此视频（Polymer项目）中展示的解释的延迟加载图片的定制实现。

想法是在图片加载时渲染一个低分辨率图片，这样用户就可以开始阅读内容，而无需等待所有图片加载完毕。

策略是将低分辨率图片作为base64编码的图片显示，以便浏览器可以立即渲染它，避免新的请求。因此，低分辨率图片的宽度不应超过10像素，高度不应超过10像素。

低分辨率图片作为包含<img>标签的<div>的背景来渲染。

您可以在这里看到一个演示。

lazy_image_render

{{ lazy_image_render(imageUrl, imageBase46, title='', alt='') }}

imageUrl：要加载的图片的URL。

类型： string

imageBase64

类型： string

title （可选）

类型： string 默认： ''

alt （可选）

类型： string 默认： ''

渲染一个包裹在<div>中的<img>标签，其背景为base64编码的图片。它可选地接受图片的title和alt。

渲染的HTML如下

<div class="lazy-image-wrapper" style="background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRg...');">
    <img class="lazy-image"
         title="title of the image"
         alt="alt of the image"
         src="http://www.example.com/image1.png"
         onload="this.style.opacity = '1'"
    />
</div>

lazy_image_css

{{ lazy_image_css() }}

渲染用于使延迟加载图片工作的样式表。您只需在<head>标签中调用此函数一次。当然，如果您想自定义样式，也可以将样式添加到自己的样式表中。

样式表包含的CSS内容如下

.lazy-image{
    opacity:0;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    max-width: 100%
}
.lazy-image-wrapper{
    background-size: cover;
    background-repeat: no-repeat;
}

rrb / twig-utils-bundle

维护者

详细信息