Within a cloned template, I am using a repeatable region to populate an image slideshow:

Code: Select all

<cms:repeatable name='product_images' label='Product Images' order='3'>
      <cms:editable name='product_image'
                    label='Image (800 x 600 pixel)'
                    type='image'
                    show_preview='1' 
                    preview_width='150'
                    input_width='200' 
                    col_width='300'/>

      <cms:editable name='alternate_text' label='Alternate Text'
                    type='text'/>
  </cms:repeatable>

As I understand the documentation, repeatable regions do not support thumbnails.

In the list view, I am now trying to use the first image from this repeatable region (image is called "product_image") and display it as a small preview:

<cms:pages masterpage='product.php' >

<div class="row row-product-overview">

<div class="l-product-image">

<a href="<cms:show k_page_link />">
<img src="<cms:thumbnail product_image width='150' height='150' enforce_max='1' />" alt="" class="responsive-image">
</a>
</div>

<div class="l-product-description">

<a href="<cms:show k_page_link />">
<h4><cms:show k_page_title /></h4>
</a>

<p><cms:excerptHTML count='25' ignore='img'><cms:show product_description /></cms:excerptHTML>
<br><a href="<cms:show k_page_link />" class="read-more">Read More→</a> </p>

</div>

</div>

</cms:pages>

Unfortunately, this is not working. The thumbnail does not display as expected.

Any idea how to get this working and also add the correct alt-text?

[KK]

Please try the following -

Code: Select all

<div class="l-product-image">

    <cms:show_repeatable "product_images">
        <cms:if k_count='1' >
            <cms:if product_image>
                <a href="<cms:show k_page_link />">
                    <img src="<cms:thumbnail product_image width='150' height='150' enforce_max='1' />" alt="<cms:show alternate_text />" class="responsive-image">
                </a>
            </cms:if>
        </cms:if> 
    </cms:show_repeatable>

</div>

Hope it helps.

That worked. Thanks.