How to display Image Caption in Front Office

[kdash1228]

What do I need to do to show an image's caption within the front office?

[kdash1228]

I want to show the image caption on the product page.

Right now, the product's summary appears under the images.

But, I want the image caption to be shown instead.

I believe I need to edit this line of code in the product-images-modal.tpl file. If I comment out these lines, the summary is not shown.

<figcaption class="image-caption">
{block name='product_description_short'}
<div id="product-description-short" itemprop="description">{$product.description_short nofilter}</div>
{/block}
</figcaption>

I tried to replace the 3rd line with the following but that didn't work:

<div id="product-description-short" itemprop="description">{$image.legend}</div>

product-images-modal.tpl

Edited January 26, 2021 by kdash1228 (see edit history)

[musicmaster]

If you study the code you see this line

{foreach from=$product.images item=image}

That is the line that defines $image and only within this loop is $image defined. It is the equivalent of PHP's foreach($product.images AS $image)

As your figcaption section is far above this loop $image means nothing there. 

[kdash1228]

17 minutes ago, musicmaster said:

If you study the code you see this line

{foreach from=$product.images item=image}

That is the line that defines $image and only within this loop is $image defined. It is the equivalent of PHP's foreach($product.images AS $image)

As your figcaption section is far above this loop $image means nothing there. 

Thank you!

I am not a PHP expert but I did put {foreach from=$product.images item=image} within the <figure> tag and was able to get the image caption to display, but I don't think I had it in the correct location.

I tried the following and it displayed all captions for the product, not just the select image. 

<figcaption class="image-caption">
{block name='product_description_short'}
{foreach $product.images AS $image}
<div id="product-description-short" itemprop="description">{$image.legend nofilter}</div>
{/foreach}
{/block}
 </figcaption>

What would be the correct way to define $image within the <figcaption> section since I don't want a loop?

Edited January 26, 2021 by kdash1228 (see edit history)

[musicmaster]

 

15 hours ago, kdash1228 said:

What would be the correct way to define $image within the <figcaption> section since I don't want a loop?

Sorry, I can only provide limited support here. If you have very specific wishes you should invest time for research or hire someone.

Running the {foreach $product.images AS $image} twice should deliver the same result in the same order in both cases. (I am just puzzled why you chose to use a slightly different syntax the second time).

One option is to restructure the code so that everything fits into one loop. 

Another option (I am not sure whether this works but you can try) is to use indexes. Very likely you can write things like $product.images[0]