Thread: ALT Tags and Image dimensions

I am having an issue where the featured XML package code rendered at the browser level has empty alt tags for the product images, althought we have a value associated to the productSEalttext.

We also would like to add image dimensions (width and height) to the img tag. Even if it's hardcoded

How can we do that?

The package code is:

Code:

<?xml version="1.0" standalone="yes" ?>
<package version="2.1" displayname="Featured Products" debug="false" includeentityhelper="false">

    <!-- ###################################################################################################### -->
    <!-- Copyright AspDotNetStorefront.com, 1995-2009.  All Rights Reserved.					                -->
    <!-- http://www.aspdotnetstorefront.com														                -->
    <!-- For details on this license please visit  the product homepage at the URL above.		                -->
    <!-- THE ABOVE NOTICE MUST REMAIN INTACT.                                                                   -->
    <!--                                                                                                        -->
    <!-- ###################################################################################################### -->

    <query name="FeaturedProducts" rowElementName="Product" >
        <sql>
            <![CDATA[
			
				exec aspdnsf_GetFeaturedProducts @FeaturedCategoryID, 9, @CustomerLevelID					
            ]]>
        </sql>
        <!--<queryparam paramname="@NumHomePageFeaturedProducts" paramtype="runtime" requestparamname="NumHomePageFeaturedProducts" sqlDataType="int" defvalue="6"  validationpattern="" />-->
        <queryparam paramname="@FeaturedCategoryID" paramtype="appconfig" requestparamname="isFeaturedCategoryID" sqlDataType="int" defvalue="0"  validationpattern="" />
        <queryparam paramname="@CustomerLevelID"   paramtype="system"  requestparamname="CustomerLevelID" sqlDataType="int" defvalue="0"  validationpattern="" />
    </query>
	
	<!-- Needed to show variant info -->
  <query name="Variants" rowElementName="Variant">
    <sql>
      <![CDATA[
      SELECT * FROM ProductVariant PV WITH(NOLOCK) 
      WHERE PV.ProductID = @ProductID
      AND PV.Published = 1 AND PV.Deleted = 0      
]]>
    </sql>
    <queryparam paramname="@ProductID" paramtype="request" requestparamname="ProductID" sqlDataType="int" defvalue="0" validationpattern="^\d{1,10}$" />
  </query>
  <!-- Needed to show variant info -->

    <PackageTransform>
        <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
						xmlns:aspdnsf="urn:aspdnsf"
						exclude-result-prefixes="aspdnsf" >
            <xsl:output method="html" omit-xml-declaration="yes" />
            <xsl:param name="CustomerID" select="/root/Runtime/CustomerID" />
            <xsl:variable name="SpecialsCount" select="count(/root/FeaturedProducts/Product)" />
            <xsl:param name="FeaturedCategoryID" select="aspdnsf:AppConfig('IsFeaturedCategoryID')" />
			<xsl:param name="vName" select="aspdnsf:GetMLValue(VariantName)"/>
            <xsl:param name="AltText">
                <xsl:choose>
                    <xsl:when test="aspdnsf:GetMLValue(SEAltText)=''">
                        <xsl:value-of select="aspdnsf:GetMLValue(Name)" />
                    </xsl:when>
                    <xsl:otherwise>
                        <xsl:value-of select="aspdnsf:GetMLValue(SEAltText)" />
                    </xsl:otherwise>
                </xsl:choose>
            </xsl:param>

            <xsl:template match="/" >			
                <xsl:if test="count(/root/FeaturedProducts/Product) &gt; 0">
                    <table width="100%" cellpadding="0" cellspacing="5" border="0" style="text-align:center;">
                        <tr>
                            <td style="text-align:center;text-align:top;" width="100%">
                                <xsl:for-each select="/root/FeaturedProducts/Product" >
								<!--  XML Package 1featuredproducts -->
                                    <div style="float: left; margin: 0px 0px 0px 0px;vertical-align: top;height: 260px;width: 230px;text-align:center;border-bottom:1px solid #666666;margin-bottom:10px;">
                                        
                                            <div class="featuredProductBox">
                                                <div class="featuredProductImage">
                                                    <xsl:value-of select="aspdnsf:LookupProductImage(ProductID, ImageFilenameOverride, SKU, 'icon', 1, $AltText)" disable-output-escaping="yes"/>
                                                </div>

                                                <div class="featuredProductLinks">
                                                    <xsl:value-of select="aspdnsf:ProductLink(ProductID, SEName, 1, aspdnsf:GetMLValue(Name))" disable-output-escaping="yes" />		
													<br /><div style="padding-top:2px;">Sold by: <xsl:value-of select="SkuSuffix"/></div>
                                                </div>
                                                <!--<div class="featuredProductDescription">
                                                    <xsl:value-of select="aspdnsf:GetMLValue(Description)" disable-output-escaping="yes" />
                                                </div>-->												
                                                <div class="featuredProductPrice">
                                                    <xsl:value-of select="aspdnsf:GetVariantPrice(VariantID, number(HidePriceUntilCart), Price, SalePrice, ExtendedPrice, Points, aspdnsf:GetMLValue(SalesPromptName), TaxClassID)" disable-output-escaping="yes" />
                                                </div>

                                                <!--<div>
                                                    <a href="{aspdnsf:ProductLink(ProductID, SEName, 0, '')}">
                                                        <xsl:value-of select="aspdnsf:StringResource('common.cs.33')" disable-output-escaping="yes" />
                                                    </a>
                                                </div>-->
                                            </div>
                                    </div>
                                </xsl:for-each>
                            </td>
                        </tr>						
                    </table>
                </xsl:if>

            </xsl:template>

            
            <xsl:template match="Product" >
                
                    <xsl:value-of select="aspdnsf:GetMLValue(Name)" disable-output-escaping="yes" />
					<xsl:value-of select="SkuSuffix"/>
                    <xsl:variable name="price" select="SalePrice">
                    </xsl:variable>
                    <xsl:value-of select="aspdnsf:GetVariantPrice(VariantID, HidePriceUntilCart, Price, 0, 0, Points, '')" disable-output-escaping="yes"/>
               
            </xsl:template>

        </xsl:stylesheet>
    </PackageTransform>
</package>

Your alt text XSLT parameter is not within scope/loop of the product data... it needs to be within

<xsl:for-each select="/root/FeaturedProducts/Product" >

Also don't forget to change the
<xslaram name="AltText">

to
<xsl:variable name="AltText">

as it will be within the loop context.

For the image sizing, you could just set the dimensions via CSS no? Or, you can use the cart's image resize and re-upload?

Jan,

I was able to get the alt tag to work. The image dimensions should be within the img tag. When I run PageSpeed to improve the speed of the website, it tells me that the dimensions are missing, so it's looking for the width and height values.

Thanks!