small display image title

[Claudia]

On my phone when I look at the enlarged image it shows the title of the product AND the title I gave the image when I added the photo. How do I change this to just show my image title.

Thanks in advance as always!

[bsmither]

Please let us have a web address of a typical product, and how one gets to view the 'enlarged' image on a phone.

 

[Claudia]

https://www.cambargainstore.com/bottle-can-opener-cooks-food-center-tiffin-ohio#

Click on the tumbnail it enlarges.  Judt noticed it happens on my laptop too.

Here's my code for the thumbnails:

<div class="row">
       <ul class="{if !is_array($GALLERY) || count($GALLERY) < 2}hide-important {/if}clearing-thumbs small-block-grid-5 medium-block-grid-6  large-block-grid-10 marg-top thinmarg-side" data-clearing>
         {foreach from=$GALLERY item=image}
<li><a href="{$image.source}" class="th"><img src="{$image.small}" data-image-swap="{$image.medium}" data-caption="{$PRODUCT.name}{if !empty($image.image_tags.title)}: {/if}{$image.image_tags.title}" class="image-gallery" alt="{if isset($image.image_tags.alt) && !empty($image.image_tags.alt)}{$image.image_tags.alt}{else}{$image.name}{/if} - {$LANG.catalogue.click_enlarge}"{if isset($image.image_tags.title)} title="{$image.image_tags.title}"{/if}></a></li>
         {/foreach}
      </ul>
   </div>

Here's my code for the main image:

 <div class="row">
      <div class="small-12 medium-7 large-7 columns horizontal marg-bottom">
   <a href="#" class="open-clearing" data-thumb-index="0"><img src="{$PRODUCT.medium}" alt="{if isset($PRODUCT.image_tags.medium.alt) && !empty($PRODUCT.image_tags.medium.alt)}{$PRODUCT.image_tags.medium.alt}{else}{$PRODUCT.name}{/if}"{if isset($PRODUCT.image_tags.medium.title)} title="{$PRODUCT.image_tags.medium.title}"{/if} id="img-preview"></a>      
  </div>

 

 

[bsmither]

I think the Foundation function 'clearing' (which shows the enlarged images one at a time) gets its 'caption' from the following:

In element.product.HV_gallery.php (where HV is either horizontal or vertical), there is an <img> tag that has:

data-caption="{$PRODUCT.name}{if !empty($image.image_tags.title)}: {/if}{$image.image_tags.title}"

What I see in your product details (of the product I looked at) is that the "title' includes the full product name. Doing this is not wrong, per se, but not optimum.

If this is your consistent approach, then maybe the data-caption attribute needs to be re-written.

data-caption="{if !empty($image.image_tags.title)}{$image.image_tags.title}{else}{$PRODUCT.name}{/if}"

With this, if there is no title, then do show the product name as the caption.