Liferay DXP本身带有一个Carousel的模板,但是这个模板使用的是旧的AUI的模板。现在因为Liferay DXP是基于Lexicon和Bootstrap 3的,创建一个响应式的图片播放非常简单。
基本需求:
图片播放基本功能
屏幕尺寸变化后,图片不变型
修改图片不需要修改代码
不需要部署插件
可复用
分析:
可以利用Bootstrap 3的carousel插件实现图片播放基本功能。
可以利用Lexicon的Image Aspect Ratios保持图片的长宽比
可以利用Web Content来实现内容存储和模板化,同时可复用。
不需要额外的OSGi插件开发。JSON格式的structure和FTL格式的模板移植起来很容易。
1. 创建Web Content Structure
可以简单的创建一个web content structure。其中包含一个文本字段,用于设置长宽比,一个可重复的图片字段。
2. 创建对应的模板
我们可以直接为刚刚创建好的carousel structure创建一个模板。
3. 定义图片长宽比
参考Lexicon的文档,可以通过css为图片播放定义一个固定的长宽比。在我这里,长宽比可以通过structure设置,针对移动设备响应式的比例为了简单,我就直接写在模板中了。
<style> #carousel-<@portlet.namespace /> .aspect-ratio-custom { padding-bottom: ${aspectRatio.getData()}; } @media (max-width: 799px) { #carousel-<@portlet.namespace /> .aspect-ratio-custom { padding-bottom: 67%; } } </style> |
4. 实现Bootstrap的carousel和Lexicon的固定比例
可以直接参考Bootstrap的carousel的实现方式写HTML,CSS,并且通过freemarker循环写入图片。在图片所在的div中定义class为aspect-ratio和aspect-ratio-custom。
<#if image.getSiblings()?has_content> <section class="carousel-container"> <div class="carousel slide" data-ride="carousel" id='carousel-<@portlet.namespace />'> <ol class="carousel-indicators hidden-sm hidden-xs"> <#list image.getSiblings() as cur_img> <li class="${(cur_img?counter == 1)?then('active', '')}" data-slide-to="${(cur_img?counter == 1)?then(0, (cur_img?counter - 1))}" data-target='carousel-<@portlet.namespace />'></li> </#list> </ol> <div class="carousel-inner" role="listbox"> <#list image.getSiblings() as cur_innerImage> <div class="${(cur_innerImage?counter == 1)?then('active', '')} item"> <div class="aspect-ratio aspect-ratio-custom aspect-ratio-middle"> <img alt="${cur_innerImage.getAttribute("alt")}" src="${cur_innerImage.getData()}"> </div> </div> </#list> </div> <a class="left carousel-control" href='#carousel-<@portlet.namespace />' role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href='#carousel-<@portlet.namespace />' role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </section> </#if> |
5. 上传图片,添加web content
可以在Document and Media中新建个文件夹,然后上传一些图片
利用我们刚刚创建好的structure和template创建web content。在我这里我的Aspect Ratio是26%,即长度大概是宽度的4倍。
也可以使用Liferay内置的图片编辑器添加一些滤镜效果。
6. 预览并发布
创建完成之后,就可以发布了,然后可以使用Web Content Display portlet在页面上显示了。
你可以尝试改变浏览器尺寸,试试插件是否保持长宽比。
也可以使用Simulation工具来预览我们设置的响应式尺寸是否正常(67%)。
这样一个响应式的图片滚动插件就完成啦。
希望你能喜欢。