Javascript Perch CMS-从区域列表中获取第一项

我正在使用Perch CMS浏览bxslider的一些标题。我目前有4条标语。因为我在每个bxslider列表项上使用不同的图像，所以我想知道是否有办法提取数组本身的特定索引

<ul class="bxslider">
    <li> <img src="assets/img/banners/hay-banner.jpg"/> </li>
    <li> <img src="assets/img/banners/final-farmhouse-banner.jpg"/> </li>           
    <li> <img src="assets/img/banners/final-tractor-banner.jpg"/> </li>
    <li> <img src="assets/img/banners/property-owners.jpg"/> </li>
</ul>

这是我目前的HTML代码。我希望能够使用

但很明显，这将把所有的标语都拉到标题中，而不仅仅是第一个标语，第二个标语

有没有一种方法可以在perch中实现这一点？理想输出如下

<li> <img src="assets/img/banners/hay-banner.jpg" title="perch_content('Taglines (1))"

---

在perch/templates/content/bxslider.html中为该区域创建模板

假设您希望在上载时将图像渲染为1000x400：

<perch:before>
<ul class="bxslider">
</perch:before>
    <li> <img src="<perch:content id="image" label="Image" type="image" width="1000" height="400" crop="true" />" title="<perch:content id="tagline" label="Tagline" type="text" />" /> </li>
<perch:after>
</ul>
</perch:after>

在页面上，使用创建区域，在浏览器中重新加载页面，转到perch backend，在该页面上设置现在显示的区域滑块以允许多个项目，并使用模板Bxslider-Done

可在上找到更多图像选项