LiipImagineBundle评论图片的自动裁剪-Symfony5全面开发

您需要登录后才可观看此视频

为了更好的为您提供服务,请您登录后再查看本课程。

立即登录 注册账号

要想在评论列表中显示所有上传的图像,我们可以在模板中对comment对象的files属性进行遍历。回到项目,我们打开templates目录下的macro.html.twig文件。在回复按钮button标签上方,我们添加循环遍历: {% for file in comment.files %} {% endfor %}

现在我们查看一下file变量,输入dump(file),刷新。file变量是FileManaged对象,我们将来会限制用户只可以上传图片文件。我们在循环体中输入img标签,输入asset(),path就是file变量的path属性。添加一个样式类,样式类我们叫做img-thumbnail,结束标签。添加一个alt属性,alt属性的值就是file对象的原始名称。复制一下。

回到浏览器刷新,我们评论列表的图像就显示了,但是图像显示的很大。我们希望我们图像可以只显示一个小小的缩略图。为了提升加载速度,我们希望这个缩略图并不是通过修改img标签的宽和高属性来设置的,我们希望上传的图片可以在显示时进行自动的裁切。

搜索liipimaginebundle,打开symfony.com这个链接。LiipImagineBundle为Symfony项目提供了一个图像处理的抽象工具包,我们可以通过配置,为图像创建图或者缩放或者水印等等功能。

我们来往下看,这里有个创建缩略图的基本使用方法,点击。通过在配置文件中配置一些filter,就可以实现图片的处理,我们来安装一下这个包,后退一步,打开安装文档,复制一下命令行。

composer require liip/imagine-bundle

回到项目,打开控制台粘贴,输入yes执行recipe。现在命令行提示我们进行一些配置,我们打开config目录下的配置文件,我们默认使用gd库作为图片处理库,然后在配置文件中我们复制一下文档的代码。

后退,复制代码,粘贴代码。在filter_sets配置键下,我们创建了一个my_thumb过滤器名称,图片的质量75我们调高一点调到85。过滤器我们使用缩略图过滤器,图片的大小我们设置为100乘以100,剪切模式使用outbound。

#config/packages/liip_imagine.yaml

liip_imagine:
    # valid drivers options include "gd" or "gmagick" or "imagick"
    driver: "gd"

    filter_sets:
        cache: ~

        # the name of the "filter set"
        my_thumb:

            # adjust the image quality to 75%
            quality: 85

            # list of transformations to apply (the "filters")
            filters:

                # create a thumbnail: set size to 120x90 and use the "outbound" mode
                # to crop the image when the size ratio of the input differs
                thumbnail: { size: [ 100, 100 ], mode: outbound }

回到macro.html.twig文件,在图片地址这里我们可以使用LiipImagineBundle提供的一个过滤器。对图片进行过滤,过滤器的参数就是我们刚刚设置的过滤器名称,复制粘贴,回到浏览器刷新。

现在图像就自动的为我们进行了裁剪,我们希望在点击缩略图时可以显示一张大图。在下节课我们将安装lightbox2JS库来实现这个效果。

课程讨论

当前内容评论功能已关闭。