Help with changing Alt Text for Images

[richnicol]

Hi,

 

I am working on this particular page/category: http://www.rockandst...co.uk/52-paving

 

I am wanting to change the Image Alt Text as i dont want them to be all the same

as the product title. How do i do this?

 

I have never had a client who uses this format before so i am new to Presta.

 

Thanks for your help

Rich

[Dh42]

I don't think you are going to be able to do it easily. Prestashop 1.5x does not have support for what is called image legend. 1.4x and 1.6x do however. 

 

On another note, for alt and title tag purposes the product title is the correct format. 

[richnicol]

Thank you for the reply...

 

They need changing for SEO purposes as certain wording is mentioned far

too much and over optimised,

 

Any solution you can recommend?

 

Thanks

 

Rich

[Dh42]

I cannot really think of an acceptable solution off the top of my head. I do not think there are any modules that handle this, since they would have to edit the template as well. You might be able to custom make a change using the product reference field or something like that. 

 

I wouldn't worry about the keywords being present on the page too much, mostly it is hogwash and more trouble than it is worth. It is natural in an e-commerce shop for them to be that way. 

[richnicol]

As i said i dont have a great knowledge of Presta - How do i edit the product reference field?

 

Yeh i did think that and it cannot really be helped can it when it lists categories etc, they are

called that so they have to be like that i guess. You dont think it will disrupt SEO too much?

[Dh42]

I do not think it will be a problem for SEO at all, in fact I think it will be good for it. Google recommends descriptions that are relevant to the images, and since they are of product names that the images are associated with I would think they are spot on. 

[richnicol]

I better leave them as they are really then! Thank you for that great advice.

[richnicol]

Hi,

 

Was just changing some filenames for images and came across this problem:

 

http://www.rockandstoneyork.co.uk/31-planters

 

It is saying "No Image Available" for Curved Granite Bench but when i click on the

product it shows the image fine on the actual product. What have i done wrong

so it does not list in the categories?

 

Thanks

Rich

[Dh42]

Hmm I don't really know. You might try regenerating your home-default images and see if that helps. 

[richnicol]

Thank you for the help.

 

How do i regenerate these images?

[Dh42]

In the back office go to preferences >> images and you can find it at the bottom of the page.

[richnicol]

I am at the section and i take it you mean "Regenreate Thumbnails"?

 

[richnicol]

Do i need to select Categories? Which format is it?

[Dh42]

Products >> home-default 

[richnicol]

I did what you said and it shows nothing now just white where the thumbnail should be:

 

http://www.rockandstoneyork.co.uk/31-planters

 

Any ideas?

[Dh42]

err opps, regenerate the home images, not the home default. 

[richnicol]

So select Products and Home?

[Dh42]

Correct 

[richnicol]

No it has gone back to saying "No Image Available" now?

[Dh42]

Hmm, you might try duplicating the product and deleting the original product. 

[richnicol]

I will give it a go. Is this easily done?

[richnicol]

Just select Category and Add New?

[richnicol]

I clicked Duplicate and it appeared with the image as a Thumbnail... Strange but its worked like a dream!

 

Thank you so much for all your help!

[Dh42]

Great! 

[richnicol]

Yep very pleased thanks!

 

Last question Re: http://www.rockandstoneyork.co.uk/31-planters

 

The duplicated product is the last link but it is showing as New, how can i change

it so it does not show as New?

 

Thanks

[Dh42]

That is not going to be so easy, you would have to change it in the database. 

[richnicol]

I will leave it as its not such a huge issue

 

Thanks for all your help DH!

[richnicol]

Hey again sorry its me!!

 

Regarding this site - http://www.rockandstoneyork.co.uk/

 

I want to add my website link in the footer just like Bow House have done.

 

How do i do this?

 

Thanks

 

Rich

Edited March 19, 2014 by richnicol (see edit history)

[richnicol]

I am now running through some of the pages i am working on and i am founding this tool: http://www.found.co.uk/seo-tool/ is showing up the images as not having alt tags and height/width not defined correctly.

 

I always thought the alt was used as the image name?

 

Any help would be greatly appreciated.

 

The page i am working on currently is: http://www.rockandstoneyork.co.uk/65-pumps

 

Thanks

 

Rich

[padel]

Maybe there would be a module wich help to put alt in the images, but i dont really know what could help you

[Dh42]

It cannot be done with a module, it has to be done by hand by putting them into the template.

[richnicol]

How do i do it by hand exactly? Where to start?

 

Cheers

[Dh42]

I do this for a lot of clients, the first thing I do is run the site through an auditor like raven tools or seo moz and figure out which tags are missing. Once I have that I can start figuring out what templates or module files are missing the alt tags, or have them configured improperly. It is kind of hard to explain how to do since every template is different, but what I normally use for the alt tag is the product name, not the description or anything else. The name best describes the image in my mind.

[richnicol]

Great advice thank you.

 

Can I add the alt tags through each product type or category? I am pretty sure it's setup so the product name is the alt tag but when I ran it through the Found SEO Tool it says they are missing?

[Dh42]

More than likely what the actual issue is, is that the template is not set up correctly to display them. You will have to edit the individual template files and put the smarty variable in that corresponds to the text you are wanting to show.

[richnicol]

Yes I am sure you are right.

 

Can you give me a brief run down of how to do that please?

[Dh42]

Open your template files and search img tags, then see if there is an alt tag associated with them. If so do nothing, if not, find the variable that you want to be there and something like this should work alt="{$product.name}" just depending on what template you are in. The variables you will access are different in every template file usually.

[richnicol]

I will follow those instructions thank you...

 

Do I need to download those Template files via FTP to get access?

[Dh42]

You do, then edit them and upload them. Be careful editing them, if you have a smarty error in one of them it will break the loading of your shop. 

[richnicol]

I have logged into the FTP area, do i want to be under Themes and then choose the current theme?

[richnicol]

http://www.rockandstoneyork.co.uk/65-pumps

 

The above is the current page i am working on, if you check it out there are 4 images. When i run them through a checker they all state there is no alt tag. 

[richnicol]

The logo has alt text and the code is: 

 

<img class="logo" src="http://www.rockandstoneyork.co.uk/img/logo.jpg?1395423505" alt="Rock and Stone">

 

The other images are something like this: 

 

<img src="http://www.rockandstoneyork.co.uk/305-339-home/2000-litre-pump.jpg" alt="">

 

The alt is there but nothing within it. So its best to somehow set the product name as the alt?

[Dh42]

That is the correct location. While you are in there I would also add title tags to images and links as well. The file you need to edit for that page and those 4 images would be the product-list.tpl Search out the img tag in it, and also search out where the product name is being generated and you can get the variable you need from there.

[richnicol]

I opened that file and this was what i see: 

 

{if isset($products)} {foreach from=$products item=product name=products} {if isset($product.new) && $product.new == 1}{l s='New'}!{/if} {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}{/if} {if isset($product.online_only) && $product.online_only}{l s='Online only!'}{/if} 

 

{$product.name|truncate:26:'...'|escape:'htmlall':'UTF-8'}

 

{$product.description_short|truncate:60:'...'|strip_tags:'UTF-8'}

 

 

 

{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}{l s='On sale!'} {elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}{l s='Reduced price!'} {/if} {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}{if $priceDisplay == 1}{l s='tax excl.'}{else}{l s='tax incl.'}{/if} {/if} 

 

{/if} {if isset($comparator_max_item) && $comparator_max_item} {l s='Select to compare'}

 

{/if} {if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE} {if ($product.allow_oosp || $product.quantity > 0)} {l s='Add to cart'} {else} {l s='Add to cart'} {/if} {/if} {l s='View'} 

 

 

 

{/foreach} 

[Dh42]

Looks about right, except there is no html. I cannot tell if it is because you posted it in the forum directly or because of your editor. Use the  <> in the text editor bar to paste code into the forum. 

[richnicol]

{if isset($products)} {foreach from=$products item=product name=products} {if isset($product.new) && $product.new == 1}{l s='New'}!{/if} {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}{/if} {if isset($product.online_only) && $product.online_only}{l s='Online only!'}{/if}

 

{$product.name|truncate:26:'...'|escape:'htmlall':'UTF-8'}

 

{$product.description_short|truncate:60:'...'|strip_tags:'UTF-8'}

 

 

 

{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}{l s='On sale!'} {elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}{l s='Reduced price!'} {/if} {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}{if $priceDisplay == 1}{l s='tax excl.'}{else}{l s='tax incl.'}{/if} {/if}

 

{/if} {if isset($comparator_max_item) && $comparator_max_item} {l s='Select to compare'}

 

{/if} {if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE} {if ($product.allow_oosp || $product.quantity > 0)} {l s='Add to cart'} {else} {l s='Add to cart'} {/if} {/if} {l s='View'}

 

 

 

{/foreach}

 

{/if}

[Dh42]

Hmm, there should be some html in there as well. 

[richnicol]

That is all when i open the file in Dreamweaver. Can i upload the file somehow?

[richnicol]

{if isset($products)}

<ul id="product_list" class="bordercolor list">

	{foreach from=$products item=product name=products}

	<li class="ajax_block_product bordercolor{if $smarty.foreach.products.iteration is div by 3} product_list-3{/if}">

		<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" /></a>

		<div class="center_block">

			<div class="product_flags">

				{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}!</span>{/if}

				{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}{if ($product.allow_oosp || $product.quantity > 0)}<span class="availability bordercolor">{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}<span class="bordercolor">{l s='Product available with different options'}</span>{else}<span class="bordercolor">{l s='Out of stock'}</span>{/if}</span>{/if}

				{if isset($product.online_only) && $product.online_only}<span class="online_only bordercolor">{l s='Online only!'}</span>{/if}

			</div>

			<h3><a class="product_link" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|truncate:26:'...'|escape:'htmlall':'UTF-8'}</a></h3>

			<p class="product_desc">{$product.description_short|truncate:60:'...'|strip_tags:'UTF-8'}</p>

		</div>																				 

		<div class="right_block bordercolor">

			{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale">{l s='On sale!'}</span>

			{elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="discount">{l s='Reduced price!'}</span>

			{/if}

			{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}

				{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><span class="our_price_display_tax">{if $priceDisplay == 1}{l s='tax excl.'}{else}{l s='tax incl.'}{/if}</span>
				{/if}
				<div class="clear"></div>

						

			{/if}	{if isset($comparator_max_item) && $comparator_max_item}

				<p class="compare checkbox"><input type="checkbox" class="comparator" id="comparator_item_list{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked{/if}/> <label for="comparator_item_list{$product.id_product}">{l s='Select to compare'}</label></p>

			{/if}

			{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}

				{if ($product.allow_oosp || $product.quantity > 0)}

                	

					<a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart.php')}?add&id_product={$product.id_product|intval}{if isset($static_token)}&token={$static_token}{/if}" title="{l s='Add to cart'}">{l s='Add to cart'}</a>

				{else}

					<span class="exclusive">{l s='Add to cart'}</span>

				{/if}

			{/if}

			<a class="button" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>

		</div>

	</li>

	{/foreach}

</ul>

{/if}

Really sorry here it is...

[Dh42]

That looks about accurate. I would suggest using a text editor like notepad++ or sublime text so that Dreamweaver does not add any formatting and mess up the template file. 

[richnicol]

a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" /></a>

I have installed Notepad++, thank you for recommending. 

 

So where it says alt="{$product.legend 

 

Should i change product.legend to product.name?

[Dh42]

Use this, I don't think your version of prestashop supports product legends. 

{$product.name|escape:'htmlall':'UTF-8'}

[richnicol]

Thank you i will do and just re upload it? Anything else to do?

[Dh42]

I would add a title tag to the image as well with the same info in it. 

[richnicol]

That works like a dream now and finds the alt tag as the product name, great stuff! 

 

 

Right how do i do that?

 

 

Also, it comes up with a suggestion when i put it through the Alt Tag Checker service saying: 

 

 

Above image has no dimensions (height/width)!

 

 

How do i do this? Does this have a great effect on ranking the site for SEO purposes?

 

 

Thanks for all your help...

 

[Dh42]

Basically you would just add them next to the image tag. It does have an effect on SEO and getting your images indexed, I think a lot of people do not realize why their images never get indexed. 

[richnicol]

What is the code for the title tag?

 

Yeh I thought it did, can I put a width/height piece of code as standard for every image somehow?

[Dh42]

title="" in the "" use the same thing that you are using for the alt tags. You have to put the width height in the template, or you can use the template variable for finding the width and height. i normally hard code it since it does not change. 

[richnicol]

So just use the exact same code i am using for the product.name alt tag section but make sure it has title= at the front instead of alt=?

 

Yeh i would prefer to hard code it as you say it won't change. Where do i do this?

[richnicol]

title="{$product.name|escape:'htmlall':'UTF-8'}

This is the current code, isn't this right?