集成lightbox2库-Symfony5全面开发
我们来搜索lightbox
,打开第二个页面,这里是lightbox2
的案例。第一种是对单独的图片进行大图的显示,第二种是对图片的合集进行大图的显示。我们往下看,我们需要安装一下lightbox2
JS库。
回到项目,打开控制台,我们使用yarn命令来安装。yarn add lightbox2 --dev
,安装完成后,我们需要在资源文件中引入lightbox2
库。
回到项目,打开app.js文件,在js文件最上方,我们使用import关键字引入lightbox2
。然后在app.scss文件中,我们使用@import关键字来引入lightbox2样式文件,现在提示构建成功了。
回到浏览器,我们继续查看文档,对于单个图片我们可以使用这里的代码,对于图片集合,我们需要使用下面的代码。因为我们不限制图片上传的数量,所以我们要使用图片集合的代码。
回到项目,我们打开模板文件macro.html.twig
。在for循环中我们粘贴代码,首先a链接它要指向图片的原地址,然后是lightbox的名称,这里我们可以使用评论的id作为名称。修改代码,指向file.path
。data-lightbox
属性,我们使用comment.id
作为名称。将缩略图添加到a标签中间,结束一下a标签,调整一下格式。
#templates/marco.html.twig
{% macro show_comments(comment, post) %}
{% import _self as macro %}
<div class="media mb-4">
<img class="d-flex mr-3 rounded-circle" src="http://placehold.it/50x50" alt="">
<div class="media-body">
<h5 class="mt-0">{{ comment.author }}</h5>
{{ comment.message }}
<div>
{% for file in comment.files %}
<a href="{{ asset(file.path) }}" data-lightbox="{{ comment.id }}">
<img src="{{ asset(file.path)|imagine_filter('my_thumb') }}" alt="{{ file.originName }}"
class="img-thumbnail">
</a>
{% endfor %}
</div>
<button class="btn btn-sm btn-link js-reply-comment-btn" data-post-id="{{ post.id }}"
data-parent-id="{{ comment.id }}">回复
</button>
{% for childComment in comment.children %}
{{ macro.show_comments(childComment, post) }}
{% endfor %}
</div>
</div>
{% endmacro %}
回到浏览器,我们刷新详情页,点击缩略图,现在缩略图就按照我们预期的样式进行了显示。我们调整一下评论列表的显示,添加一个换行,可以使用div标签,对缩略图进行一下包裹。
刷新现在就可以了,我们打开管理端,点击评论列表。我们看最后一页,我们评论的图片并没有显示,我们需要在列表上显示一下评论的图片,另外还需要调整一下id的显示顺序。在下节课我们来修改管理端的代码。