Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

<alt> Tag on Product information site missing !


Nexus1337

Recommended Posts

Hello !

I have a problem with my product info page, my <alt> tags for the product pictures are missing. As i have two large pictures on the page, they are displayed as a galery. As i see in the code (i am not a pro) the large picture is displayed via jquerry so it is not possible to add a <alt> tag for it ? but the two small previews, they have empty alt tags. why ? Is there something wrong in my code, or is this feature missing ?

 

Thank you

 

Daniil

 

P.S.: The code for product_info.php

 

<?php
/*
 $Id$
 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com
 Copyright (c) 2010 osCommerce
 Released under the GNU General Public License
*/
 require('includes/application_top.php');
 if (!isset($HTTP_GET_VARS['products_id'])) {
   tep_redirect(tep_href_link(FILENAME_DEFAULT));
 }
 require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_PRODUCT_INFO);
 $product_check_query = tep_db_query("select count(*) as total from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");
 $product_check = tep_db_fetch_array($product_check_query);
 require(DIR_WS_INCLUDES . 'template_top.php');
 if ($product_check['total'] < 1) {
?>
<div class="contentContainer">
 <div class="contentText">
   <?php echo TEXT_PRODUCT_NOT_FOUND; ?>
 </div>
 <div class="f_right">
   <?php echo tep_draw_button(IMAGE_BUTTON_CONTINUE, 'triangle-1-e', tep_href_link(FILENAME_DEFAULT)); ?>
 </div>
</div>
<?php
 } else {
   $product_info_query = tep_db_query("select p.products_id, pd.products_name, pd.products_description, p.products_model, p.products_quantity, p.products_image, pd.products_url, p.products_price, p.products_tax_class_id, p.products_date_added, p.products_date_available, p.manufacturers_id,  p.products_availability_id from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");
   $product_info = tep_db_fetch_array($product_info_query);
   tep_db_query("update " . TABLE_PRODUCTS_DESCRIPTION . " set products_viewed = products_viewed+1 where products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and language_id = '" . (int)$languages_id . "'");
   if ($new_price = tep_get_products_special_price($product_info['products_id'])) {
  $products_price = '<span class="productSpecialPrice1"><s>' . $currencies->display_price($product_info['products_price'], tep_get_tax_rate($product_info['products_tax_class_id'])) . '</s></span> <span class="productSpecialPrice1">' . $currencies->display_price($new_price, tep_get_tax_rate($product_info['products_tax_class_id'])) . '</span>';
   } else {
  $products_price = $currencies->display_price($product_info['products_price'], tep_get_tax_rate($product_info['products_tax_class_id']));

   }
   if (tep_not_null($product_info['products_model'])) {
  $products_name = $product_info['products_name'] . '<br /><span class="smallText">[' . $product_info['products_model'] . ']</span>';
   } else {
  $products_name = $product_info['products_name'];
   }

$products_availability = $product_info['products_availability_id'];
   $products_availability_info_query = tep_db_query("select e.products_availability_name from " . TABLE_PRODUCTS_AVAILABILITY . " e where e.products_availability_id = '" . (int)$products_availability . "' and e.language_id = '" . (int)$languages_id . "'");
   $products_availability_info = tep_db_fetch_array($products_availability_info_query);
   $products_availability_name = $products_availability_info['products_availability_name'];
?>



<?php echo tep_draw_form('cart_quantity', tep_href_link(FILENAME_PRODUCT_INFO, tep_get_all_get_params(array('action')) . 'action=add_product')); ?>
<div>
 <div class="prod_info_name"><h1><?php echo $products_name; ?></h1></div>
 <div class="prod_info_price" align="right"><h1><?php echo $products_price; ?></h1>
 <?php if ($products_price != '' && $products_price != '<strong><span style="font-size:12px; color: rgb(255, 0, 0);">(z.Z. nicht Lieferbar!)</span></strong>' && $products_price != '<p><strong><span style="font-size:12px; color: rgb(255, 0, 0);">(Preis a. Anfrage)</span></strong></p>') { echo TEXT_MWST; } ?>

 <?php
 if (tep_not_null($products_availability_info['products_availability_name'])) {
 ?>
   <b><?php echo TEXT_AVAILABILITY; ?>: <?php echo $products_availability_name; ?></b>
 <?php
 }
 ?>

 </div>

 <div class="clear"></div>
</div>
<div class="contentContainer">
 <div class="contentText">
<?php
   if (tep_not_null($product_info['products_image'])) {
  $pi_query = tep_db_query("select image, htmlcontent from " . TABLE_PRODUCTS_IMAGES . " where products_id = '" . (int)$product_info['products_id'] . "' order by sort_order");
  if (tep_db_num_rows($pi_query) > 0) {
?>
   <div id="piGal" class="f_right <?php echo ((tep_db_num_rows($pi_query) >5 )? 'min_height_ie8' : 'min_height_normal'); ?>" align="right">
  <ul class="list4">
<?php
    $pi_counter = 0;
    while ($pi = tep_db_fetch_array($pi_query)) {
	  $pi_counter++;
	  $pi_entry = '	    <li><a href="';
	  if (tep_not_null($pi['htmlcontent'])) {
	    $pi_entry .= '#piGalimg_' . $pi_counter;
	  } else {
	    $pi_entry .= tep_href_link(DIR_WS_IMAGES . $pi['image'], '', 'NONSSL', false);
	  }
	  $pi_entry .= '" target="_blank" rel="fancybox">' . tep_image(DIR_WS_IMAGES . $pi['image']) . '</a>';
	  if (tep_not_null($pi['htmlcontent'])) {
	    $pi_entry .= '<div class="display_none"><div id="piGalimg_' . $pi_counter . '">' . $pi['htmlcontent'] . '</div></div>';
	  }
	  $pi_entry .= '</li>';
	  echo $pi_entry;
    }
?>
  </ul>
   </div>
<script type="text/javascript">
$('#piGal ul').bxGallery({
 maxwidth: 300,
 maxheight: 300,
 thumbwidth: <?php echo (($pi_counter > 1) ? '100' : '0'); ?>,
 thumbcontainer: 400,
 load_image: 'ext/jquery/bxGallery/spinner.gif'
});
</script>
<?php
  } else {
?>
   <div id="piGal" style="float: right;">
  <?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image'], '', 'NONSSL', false) . '" target="_blank" rel="fancybox">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), null, null, 'hspace="5" vspace="5"') . '</a>'; ?>
   </div>

<div style="line-height:10px"> </div>
<?php
  }
?>
<script type="text/javascript">
$("#piGal a[rel^='fancybox']").fancybox({
 cyclic: true
});
</script>
<?php
   }
?>

<?php
   $products_attributes_query = tep_db_query("select count(*) as total from " . TABLE_PRODUCTS_OPTIONS . " popt, " . TABLE_PRODUCTS_ATTRIBUTES . " patrib where patrib.products_id='" . (int)$HTTP_GET_VARS['products_id'] . "' and patrib.options_id = popt.products_options_id and popt.language_id = '" . (int)$languages_id . "'");
   $products_attributes = tep_db_fetch_array($products_attributes_query);
   if ($products_attributes['total'] > 0) {
?>
   <p><?php echo TEXT_PRODUCT_OPTIONS; ?></p>
   <p>
<?php
  $products_options_name_query = tep_db_query("select distinct popt.products_options_id, popt.products_options_name from " . TABLE_PRODUCTS_OPTIONS . " popt, " . TABLE_PRODUCTS_ATTRIBUTES . " patrib where patrib.products_id='" . (int)$HTTP_GET_VARS['products_id'] . "' and patrib.options_id = popt.products_options_id and popt.language_id = '" . (int)$languages_id . "' order by popt.products_options_name");
  while ($products_options_name = tep_db_fetch_array($products_options_name_query)) {
    $products_options_array = array();
    $products_options_query = tep_db_query("select pov.products_options_values_id, pov.products_options_values_name, pa.options_values_price, pa.price_prefix from " . TABLE_PRODUCTS_ATTRIBUTES . " pa, " . TABLE_PRODUCTS_OPTIONS_VALUES . " pov where pa.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pa.options_id = '" . (int)$products_options_name['products_options_id'] . "' and pa.options_values_id = pov.products_options_values_id and pov.language_id = '" . (int)$languages_id . "'");
    while ($products_options = tep_db_fetch_array($products_options_query)) {
	  $products_options_array[] = array('id' => $products_options['products_options_values_id'], 'text' => $products_options['products_options_values_name']);
	  if ($products_options['options_values_price'] != '0') {
	    $products_options_array[sizeof($products_options_array)-1]['text'] .= ' (' . $products_options['price_prefix'] . $currencies->display_price($products_options['options_values_price'], tep_get_tax_rate($product_info['products_tax_class_id'])) .') ';
	  }
    }
    if (is_string($HTTP_GET_VARS['products_id']) && isset($cart->contents[$HTTP_GET_VARS['products_id']]['attributes'][$products_options_name['products_options_id']])) {
	  $selected_attribute = $cart->contents[$HTTP_GET_VARS['products_id']]['attributes'][$products_options_name['products_options_id']];
    } else {
	  $selected_attribute = false;
    }
?>
  <div class="product_options_padding"><strong><?php echo $products_options_name['products_options_name'] . ':'; ?></strong></div>
  <div class="product_options_padding"><?php echo tep_draw_pull_down_menu('id[' . $products_options_name['products_options_id'] . ']', $products_options_array, $selected_attribute); ?></div>
<?php
  }
?>
   </p>
<?php
   }
?>

<?php echo stripslashes($product_info['products_description']); ?>

<?php
   if ($product_info['products_date_available'] > date('Y-m-d H:i:s')) {
?>
   <p class="t_center"><?php echo sprintf(TEXT_DATE_AVAILABLE, tep_date_long($product_info['products_date_available'])); ?></p>
<?php
   }
?>


 </div></div>
 <div class="f_left" style="width:80px;//display: none; clear:both">
 <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
 <div class="g-plusone" data-size="medium" data-count="true"></div>
   </div>

   <div class="f_left" style="width:65px">

 <div id="fb-root"></div>
 <script type="text/javascript">
  (function(d, s, id) {
	 var js, fjs = d.getElementsByTagName(s)[0];
	 if (d.getElementById(id)) return;
	 js = d.createElement(s); js.id = id;
	 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
	 fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
 </script>
 <div class="fb-like" data-send="false" data-layout="button_count" data-width="100" data-show-faces="true"></div>

   </div>

   <div class="f_left"><a rel="nofollow" href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="Surok97"></a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>

   <div class="clear"></div>
 <div style="line-height:10px"> </div>
<?php
   $reviews_query = tep_db_query("select count(*) as count from " . TABLE_REVIEWS . " r, " . TABLE_REVIEWS_DESCRIPTION . " rd where r.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and r.reviews_id = rd.reviews_id and rd.languages_id = '" . (int)$languages_id . "' and reviews_status = 1");
   $reviews = tep_db_fetch_array($reviews_query);
?>

<div class="buttonSet">
  <div class="buttonAction">
  <?php if ($product_info['products_price'] != 9999 && $product_info['products_price'] != 8888) {
    echo tep_draw_hidden_field('products_id', $product_info['products_id']) . tep_draw_button(IMAGE_BUTTON_IN_CART, 'cart', null, 'primary');
    } ?></div>
   <?php if ($product_info['products_price'] != 9999 && $product_info['products_price'] != 8888) { echo tep_draw_button(IMAGE_BUTTON_REVIEWS . (($reviews['count'] > 0) ? ' (' . $reviews['count'] . ')' : ''), 'comment', tep_href_link(FILENAME_PRODUCT_REVIEWS, tep_get_all_get_params())); }?>
 </div>


 <!-- Google Code for OSCommerce Product List Conversion Page -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 1013788453;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "iJluCOuW8gQQpd604wM";
var google_conversion_value = 0;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/1013788453/?value=0&label=iJluCOuW8gQQpd604wM&guid=ON&script=0"/>
</div>
</noscript>
<!-- Google Code for OSCommerce Product List Conversion Page -->


<div class="margin-left_1">
<?php
   if ((USE_CACHE == 'true') && empty($SID)) {
  echo tep_cache_also_purchased(3600);
   } else {
  include(DIR_WS_MODULES . FILENAME_ALSO_PURCHASED_PRODUCTS);
   }
?>
</div>
</form>
<!-- Begin Sitemap SEO-->
 <script type='text/javascript' src='javascript/sitemap_seo.js'></script>
 <?php
 if (($product_info['products_price'] != 9999) AND ($product_info['products_price'] != 8888)) {
 require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_SITEMAP_SEO);
 include(DIR_WS_MODULES . FILENAME_SITEMAP_SEO_PRODUCT);
 include(DIR_WS_MODULES . FILENAME_SITEMAP_SEO_CATEGORY);
 include(DIR_WS_MODULES . FILENAME_SITEMAP_SEO_MANUFACTURERS);
 }
 ?>
 <!-- End Sitemap SEO -->
<?php
 }
 require(DIR_WS_INCLUDES . 'template_bottom.php');
 require(DIR_WS_INCLUDES . 'application_bottom.php');
?>

Link to comment
Share on other sites

The second argument to tep_image() is the alt= text. In this code, I see tep_image() called twice:

... tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), null, null, 'hspace="5" vspace="5"') ... 

which defines alt text using the product name, and

 

$pi_entry .= '" target="_blank" rel="fancybox">' . tep_image(DIR_WS_IMAGES . $pi['image']) . '</a>';

(a gallery) which seems to be lacking alt text. The question is, what can we use as alt text? The code above would become

$pi_entry .= '" target="_blank" rel="fancybox">' . tep_image(DIR_WS_IMAGES . $pi['image'], IMAGEALTTEXT) . '</a>';

where we just need to figure out a string to replace IMAGEALTTEXT.

  • $pi['image'] would give the image file name as the text (better than nothing, but still not great).
  • $pi['htmlcontent'] sounds like it might be some sort of caption, but you would need to first strip out any HTML tags, i.e., strip_tags($pi['htmlcontent']). I don't know if there's any point in using this for alt -- someone blind should have the caption (if that's what it is) read to them anyway, and search engines should be able to read the caption. Perhaps 'image with caption: '.strip_tags($pi['htmlcontent']) would work.
  • 'some fixed text'
  • $products_name seems to be available, but would be the same for each image of a product. Maybe 'Image '.$pi_counter.' of '.$products_name would work better.

Play with it a bit and see what works best for you.

 

By the way, you do really mean "alt" text and not a "title", right? alt text only appears when there is no graphic displayed (search engine spiders, screen readers, no-graphics browsers), while title text appears when you hover over an element with the mouse. Technically, alt text is a required attribute of an image tag, and if you don't provide any (not even alt=''), it is up to the browser or other nongraphical display to pick something to use.

Link to comment
Share on other sites

@@MrPhil

 

$pi['htmlcontent'] is for (eg) embedding a Youtube video [example on the samsung product]. But it could (assuming that functionality is not needed, be changed to use as a alt/title system instead (I in fact did do this on my own [now defunct] osc site).

Link to comment
Share on other sites

Good point, monkey man. I wasn't sure what the "htmlcontent" was for. If it's usable for a caption, it still might be usable for the alt attribute. Otherwise they would have to use one of the other methods.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...