Changing Alt Tags

[MattGarys]

Hi, I hope someone here can help with my Alt Tag issues. I'm trying to alter what the default alt tag is to a product field, namely PRODUCT.Name. I know the information is pulling the pictures from here, but I don't know how to enter that alt tag information. If anyone can be of help, I'd greatly appreciate it. This is what part of the templates look like:

<!-- BEGIN MORE INFO IMAGE TEXT TABLE -->
<table width="820" cellpadding="1" cellspacing="3" border="0">
<tr>
<td valign="top"> <center>
[-- IF PRODUCT.MoreInfoImage1 --]<br><b>Wine Label:</b> <a href="#lightbox_content2" class="popup2_url" rel="ibox2">Enlarge</a>[-- END_IF --]
</center>
[-- IF PRODUCT.MoreInformationGraphic --]
[-- PRODUCT.MoreInformationGraphic --]
[-- END_IF --]</td>
<td valign="top">
[-- PRODUCT.MoreInformationText --]
[-- IF PRODUCT.Field7 --]<p><b>[-- STORE.ProductField7 --]</b></p><p>[-- PRODUCT.Field7 --]</p>[-- END_IF --]</td></tr><table>
<!-- END MORE INFO IMAGE TEXT TABLE -->

[Jim]

The Alt tag is an attribute of the image itself. You configure that on the Images > Edit image screen.

There is no way to do a mass change for all images, it has to be done one at a time for each image. There is also no template tag that will return just the alt tag for the image, it is output when the code to place the image on the page is generated.

[MattGarys]

Forgive me if I'm not exactly understanding everything, but I saw this thread:

http://support.shopsite.com/forums/viewtopic.php?f=1&t=9112

And I was under the impression that alt tags could be changed at the template level.

[Jim]

That post give a way to create an alt tag for an image, but it does not "alter what the default alt tag is" as you asked about .

There is a template tag for most images that returns just the image name, based on the path of the image, The tag uses the format [-- IMAGE SomeImageFieldName --] so it could be [-- IMAGE Product.graphic --], [-- IMAGE PAGE.graphic --] etc. But it will not give the proper Size information if the image is in a subdirectory.

Your code doesn't show where the "alt tag" is suppose to be placed. But the only way to get the "alt tag" itself would be to put the content in one of the extra product fields and then use the template tag for that field to output the "alt tag" like alt="[-- product.field1 --].

[MattGarys]

But I would be able to accomplish this if I could find out where in my templates the alt tag is derived from?

[Jim]

The alt tag will be part of what is output when you use the template tag [-- PRODUCT.MoreInformationGraphic --].
You can see exactly what will be output by that tag by going to the Images screen, select the image , click Edit Images and in the text box under Image Tag the exact output for that particular image will be displayed. Note that if the image is suppose to be resized then the Image Tag code under the particular size will be used.

If that code is not what you want to use then you will have to create all of the html in your template to display the image. The 2 template tags that
might help you to create the html are:
[-- PRODUCT.MoreInformationGraphic --] Returns a full <img src> tag for the product More Info Page graphic. This is what you would see using the steps above.
[-- IMAGE Product.MoreInformationGraphic --] Returns the path and file name of the product More Information Page graphic, relative to the store’s media directory.
The template help doesn't mention whether the remove_html parameter can be used with the [-- PRODUCT.MoreInformationGraphic --] but you might try [-- PRODUCT.MoreInformationGraphic remove_html --] which will probably work and would output the same information as the [-- PRODUCT.MoreInformationGraphic --] only without the leading <img src=" and the ending "> . This allows you to add additional attributes to the image when the store is published.

I recommend that you do some simple experiments to see what is going to work for you. Create a product template that has just the image fields defined so that you can see what the tags are outputting. Assign that product template to a product that has the image you are wanting to work with assigned to it. Then publish the page the product is on to see what the out put looks like in the html source.
Here is a simple example of a product template to get you started.

Code: Select all

[-- DEFINE PRODUCT --]
# This define is used to control how the products will look
PRODUCT.MoreInformationGraphic  tag = [-- PRODUCT.MoreInformationGraphic --]<p>
PRODUCT.MoreInformationGraphic  with remove_html = [-- PRODUCT.MoreInformationGraphic remove_html --]<p>
IMAGE Product.MoreInformationGraphic = [-- IMAGE Product.MoreInformationGraphic --] <p>
[-- END_DEFINE PRODUCT --]