Add Image Alt Tags to Virtuemart

Details: Created: Monday, 09 January 2012 23:10

A customer recently approached me with a very important "oversight" on the developers side for Virtuemart < 1.1.8. It seems that there is no way to add custom image alt tags to product images. By default, Virtuemart does add alt tags automatically, them being the product name. The problem is that sometimes if your products have punctuation in their names, then the alt tags don't display properly. Or maybe more important, if you are pursuing search engine optimization with your Virtuemart website. So I did some digging into the Virtuemart forums and found that no one had a good fix for adding custom alt tags to product images. So here is my latest gift:

How to add alt tags to images in Virtuemart

The plan is that we are going to add a new field to the product administrative form and then display that fields result within the product page. You may add it wherever you want it.

Step 1:

Create new field in database / table jos_vm_product (for example by phpMyAdmin). In the example I will call image_alt. If you choose any other name, change it everywhere in the codes listed below.

Step 2:

For this field to visualize, in administrator / components / com_virtuemart / html / change file product.product.form.php

After (around line 1185)

  <tr class="row0">
            <td width="21%" ><?php echo $VM_LANG->_('URL')." (".$VM_LANG->_('CMN_OPTIONAL')."!)&nbsp;"; ?></td>
            <td width="79%" >
              <?php
              if( stristr($db->f("product_full_image"), "http") )
              $product_full_image_url = $db->f("product_full_image");
              else if(!empty($_REQUEST['product_full_image_url']))
              $product_full_image_url = vmGet($_REQUEST, 'product_full_image_url');
              else
              $product_full_image_url = "";
              ?>
              <input type="text" class="inputbox" size="50" name="product_full_image_url" value="" onchange="if( this.value.length>0) document.adminForm.product_full_image_action[1].checked=false; else document.adminForm.product_full_image_action[1].checked=true; toggleDisable( document.adminForm.product_full_image_action[1], document.adminForm.product_thumb_image_url, true );toggleDisable( document.adminForm.product_full_image_action[1], document.adminForm.product_thumb_image, true );" />
            </td>
          </tr>

Insert:

<tr class="row1"> 
      <td width="21%" ><div style="text-align:right;font-weight:bold;">Image Alt Tag:</div>
      </td>
      <td width="79%" height="2"> 
        <input type="text" class="inputbox"  name="image_alt" value="<?php $db->sp("image_alt"); ?>" size="32" maxlength="64" />
      </td>
    </tr>

Step 3:

To enable this field to update with database, in administrator / components / com_virtuemart / classes / change file ps_product.php in two places.

After (around line 360)

// Insert into DB $fields = array ( 'vendor_id' => $vendor_id, 'product_parent_id' => vmRequest::getInt('product_parent_id'), 'product_sku' => vmGet($d,'product_sku'),

Insert

'image_alt' => vmGet($d,'image_alt'),

And do the same in function: * Function to update product $d['product_id'] in the product table

Step 4

In the file /administrator/components/com_virtuemart/html/shop.browse.php

After (around line 450):

$products[$i]['product_name'] = shopMakeHtmlSafe( $product_name );

Insert:

$products[$i]['image_alt'] = $image_alt;

After (around line 410):

$product_details = $VM_LANG->_('PHPSHOP_FLYPAGE_LBL');

Insert:

$image_alt = $db_browse->f("image_alt");

Step 5:

In the file /administrator/components/com_virtuemart/html/shop_browse_queries.php

Inside $fieldnames on/around line 37, add `image_alt`, after any of the other fields

Step 6:

In the file /components/com_virtuemart/themes/default/theme.php

Replace on/around line 46:

$img_attributes= 'alt="'.$product['product_name'].'"';

With:

if( empty($product['image_alt'] ) ) { $img_attributes= 'alt="'.$product['product_name'].'"'; } else { $img_attributes= 'alt="'.$product['image_alt'].'"'; }

That's it and that's all! There might be other places that you want to add this field. Just add the "image_alt" variable to where you want it in your Virtuemart files and you should be rocking.

Please leave a comment with any suggestions or comments. I hope this helps some lost people out there!