Image alt and title

[Claudia]

I just noticed on my store and the demo that if a product has only one image then the image alt and image title does not show.  Is this by design? If not how can I change this.  Thanks as always

[bsmither]

Please confirm that, when viewing the product details, for the product that seems to not show any 'alt' or 'title' content, that there has been detail added to that image in admin, Images, Edit Image.

 

[Claudia]

Yes, I just added them the cleared cache before I submitted this

[bsmither]

Please make this short-term edit:

In the skin template, content.product.php, at the very end, add:

{if $smarty.server.remote_addr eq "a.b.c.d"}{debug}{/if}

where a.b.c.d is your local IP address (www.showmyip.com) -- in quotes.

This will show a Smarty debug popup (hopefully for you only). The popup will show the contents of the array $PRODUCT, and should contain the sub-array 'image_tags'. Verify that there exists in 'image_tags' the sub-array 'medium', and within 'medium', the elements 'alt' and 'title'.

Edited September 13, 2023 by bsmither

[Claudia]

I will do that of course.  But I wanted you to see my custom code (I made products stuff all one file) to see if I messed something up.

Link to example page

Where the large photo goes at the top left of the product page:

<div class="row">
      <div class="small-12 medium-7 large-7 columns horizontal marg-bottom">
   <span class="font11 red pad-left"> Click on large image for largest size photos</span>
      {if count($GALLERY) > 1}
         <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>
 {else}
         <div data-clearing><a href="{$PRODUCT.source}"><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>
      {/if}
      </div>

Where the thumbnails go right above the description:

<div class="row">
 
      {if count($GALLERY) > 1}
    <!--  <span class="font11 red pad-left"> Click on image for largest size photos</span> -->
      <ul class="clearing-thumbs small-block-grid-5 medium-block-grid-6 large-block-grid-10" 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="{if !empty($image.image_tags.title)}{$image.image_tags.title}{else}{$PRODUCT.name}{/if}" 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>
      {/if}
      </div>
<div  class="thinmarg-top" style="font-size:1rem; font-weight:bold; border-top: 1px solid #C0C0C0;border-bottom: 1px solid #C0C0C0"> Description </div>
         {if ($PRODUCT.description)}
              <div>
     {$PRODUCT.description}
             </div>   
              {/if}

 

 

 

[Claudia]

I have the debug info for the product with only one image, but I can't find what you are looking for.  The Cubecart demo store doesn't show the img alt or title for a one image product either

[bsmither]

I am using Firefox, and I see a title: Scented Tarts Wax Melts (4) Four Pc Packs - Lot 1

I also see the alt content in the HTML code. So I know CubeCart and your skin is operating correctly:

"Scented tart 4 squares to a pack. One pack each: Apple pie, sugar cookie, snickerdoodle, peanut butter crunch"

Edited September 13, 2023 by bsmither

[bsmither]

Correction: the short-term edit shown above should be:

In the skin template, content.product.php, at the very end, add:

{if $smarty.server.REMOTE_ADDR eq "a.b.c.d"}{debug}{/if}

Note that REMOTE_ADDR must be in all-caps.

[Claudia]

I'm using Firefox too and this is what it shows when you click the main image to get the largest image. No title, nothing underneath image. If the product has more images thumbnails will show with the title above them

 

 

[Claudia]

"This will show a Smarty debug popup (hopefully for you only). The popup will show the contents of the array $PRODUCT, and should contain the sub-array 'image_tags'. Verify that there exists in 'image_tags' the sub-array 'medium', and within 'medium', the elements 'alt' and 'title'. "

I can't find that in the revised debug for any product

[bsmither]

CubeCart is coded, when there is only one image for the product, that the main image has a direct link to the actual source image (/images/source/image.png).

When there is more than one image for this product, Cubecart has code to show a "Colorbox" showing that image along with a scroller of thumbnails along the bottom edge.

The Colorbox is coded to show the image attributes.

But, when the browser fetches an actual image without benefit of any HTML code around it (such as within an <img> tag), there is nothing to show but the raw image. Please note the browser's address bar showing the URL of the actual image's location.

A 'Feature Request' can be made in the Github to show the largest size image in a Colorbox for the case where there is only one image assigned to a product.

(Let's ignore the popup issue for the moment. You say the "debug info". This may be CubeCart's debug info. If so, then Smarty's debug window might be located at the same location at the same size as CubeCart's debug window. If so, move or close CubeCart's debug window to see Smarty's debug window.)

[Claudia]

I'm not sure how to make a Feature Request in the Github. Will you do it please?

[bsmither]

Let's try this - your skin code may be very slightly different, especially the classes.

In the skin CSS file cubecart.helpers.css, at the end, add:

.hide-important {
  display:none!important;
}

The skin template element.product.horizontal_gallery.php, replace all the code with:

<div class="row">
   <div class="small-5 medium-7 columns horizontal">
         <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>
      <ul class="{if !is_array($GALLERY) || count($GALLERY) < 2}hide-important {/if}clearing-thumbs small-block-grid-3 medium-block-grid-5 marg-top" 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>
   <div class="small-7 medium-5 columns">
      {include file='templates/element.product.options.php'}
      {include file='templates/element.product.review_score.php'}
      {include file='templates/element.product.call_to_action.php'}
   </div>
</div>

The skin template element.product.vertical_gallery.php, replace all the code with:

<div class="row">
   <div class="medium-1 columns thinpad-right off-canvas-for-small vertical">
      <div id="scrollUp" class="scroller"><svg class="icon"><use xlink:href="#icon-angle-up"></use></svg></div>
      <ul class="{if !is_array($GALLERY) || count($GALLERY) < 2}hide-important {/if}clearing-thumbs small-block-grid-1" id="scrollContent" 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 id="scrollDown" class="scroller"><svg class="icon"><use xlink:href="#icon-angle-down"></use></svg></div>
   </div>
   <div class="small-5 medium-6 columns text-center nopad">
         <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>
         <p class="show-for-small-only">{if is_array($GALLERY) && count($GALLERY) > 1}{$LANG.catalogue.tap_gallery}{else}{$LANG.catalogue.tap_enlarge}{/if}</p>
   </div>
   <div class="small-7 medium-5 columns thinpad-left">
      {include file='templates/element.product.options.php'}
      {include file='templates/element.product.review_score.php'}
      {include file='templates/element.product.call_to_action.php'}
   </div>
</div>

What this does is to make use of the same code when: there is only one assigned image (so, normally the gallery is not shown), or several assigned images. And this code will show the "colorbox" - again, whether or not the gallery has more than one image to be shown.

You said your content.product.php template file has all of the {includes} included already, but you should be able to easily find where to make the edits.

After editing the CSS file, be sure to have CubeCart clear its internal cache so that the edited file can be included in a new cached "squeezed" master CSS file.

Edited September 15, 2023 by bsmither

[Claudia]

The code worked except on the one image products page it shows a thumbnail of that image on the main product page and the enlarged image page. I know that is how it is suppose to work but is there a way to not show the thumbnail?

[bsmither]

We need to find out why the single image gallery is still being shown. (I requested the Scented Tarts page, but it seems you restored the templates to the way it was.)

Did you edit the cubecart.helpers.css file, then had Cubecart clear its internal cache?

 

[Claudia]

Damn!   I did edit the cubecart.helpers.css file but I forgot to upload it.  I'll try that again.

[Claudia]

Isn't it amazing when things work when you follow the directions!  I had to tweak my grids but other than that it works perfectly.  Thank you again Brian