使用Liferay DXP创建图片播放

Liferay DXP本身带有一个Carousel的模板，但是这个模板使用的是旧的AUI的模板。现在因为Liferay DXP是基于Lexicon和Bootstrap 3的，创建一个响应式的图片播放非常简单。

基本需求:

图片播放基本功能

屏幕尺寸变化后，图片不变型

修改图片不需要修改代码

不需要部署插件

可复用

分析:

可以利用Bootstrap 3的carousel插件实现图片播放基本功能。

(https://www.w3schools.com/bootstrap/bootstrap_carousel.asp)

可以利用Lexicon的Image Aspect Ratios保持图片的长宽比

(http://liferay.github.io/lexicon/content/images-and-thumbnails/#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%）。

这样一个响应式的图片滚动插件就完成啦。

希望你能喜欢。