OpenCart Community

OpenCart Community Forum - Discuss shopping cart and e-commerce solutions.
https://forum.opencart.com/

Adding custom alt text to product images

https://forum.opencart.com/viewtopic.php?t=13182

Page 1 of 3

Adding custom alt text to product images

Posted: Sat Apr 10, 2010 3:38 pm
by cosmo
After some scanning the forum for a solution..

I want to add a field in the product description , product images section, that allows me to in admin manually set the alt text and perhaps even image description for each image.

I've gotten so far that I've added a column in the database table 'product_image' and also I've added the input field to the product picture page/tab.

My problem is that I can't seem to get my had around how to submit the alt text into the db (the input field is named 'product_image_description[x]' in the same manner as the product images)

I've tried editing the modelcatalogproduct to include my text:

Code: Select all

if (isset($data['product_image'])) {
      foreach ($data['product_image'] as $image) {
           $this->db->query("INSERT INTO " . DB_PREFIX . "product_image SET product_id = '" . (int)$product_id . "', image = '" . $this->db->escape($image) . "', alt_text = '" . $data['product_image_description'] . "'");
but I'm clearly missing something.

Please help me out!

Re: Adding custom alt text to product images

Posted: Wed Apr 14, 2010 12:40 am
by cosmo
I was right, I was missing that I was editing addProduct() and then testing updateProduct().

So the solution (if anyone should ever wonder ??? )
Firstly add the input fields to the admin product template (admin\view\template\catalog\product_form.tpl)
values are added later:

Code: Select all

<label for="image_alt">Alternative text</label>
<input type="text" name="image_alt" value="" id="image_alt"/>
<label for="image_alt">Image title</label>
<input type="text" name="image_title" value="" id="image_title"/>
Do this both at the static html and in the javascript addImage() function.

Then add the columns "alt_text" & "title_text" to the database table "product_image".

Then update the save product images call to the database in both the addProduct() and the updateProduct() methods in admin\model\catalog\product.php. Code is for addProduct():

Code: Select all

if (isset($data['product_image'])) {
			$indexer = 0;
			foreach ($data['product_image'] as $image) {
        		$this->db->query("INSERT INTO " . DB_PREFIX . "product_image SET product_id = '" . (int)$product_id . "', image = '" . $this->db->escape($image) . "'");
				if (isset($data['product_image_alt'][$indexer])) {
					$this->db->query("UPDATE " . DB_PREFIX . "product_image SET alt_text = '" . $data['product_image_alt'][$indexer] . "' WHERE product_id = '" . (int)$product_id . "' AND image = '" . $this->db->escape($image) . "'");
				}
				if (isset($data['product_image_title'][$indexer])) {
					$this->db->query("UPDATE " . DB_PREFIX . "product_image SET title_text = '" . $data['product_image_title'][$indexer] . "' WHERE product_id = '" . (int)$product_id . "' AND image = '" . $this->db->escape($image) . "'");
				}
				$indexer++;
			}
		}
Now all that is left is updating the controller to include the values for redisplaying and then of course update the corresponding code in the store\catalog part to display the values to product page and voila! the accessability of the site is improved!

Re: Adding custom alt text to product images

Posted: Sun Apr 18, 2010 5:58 pm
by SXGuy
um.. quick question, why couldnt you just have your alt text the same as the product name?

Then you wouldnt have needed any new fields in the database, or anything like that, it would have been a simple case of adding alt="<?php echo $product_name; ?>"

I dont see the point in custom alt text when its really just there to be able to reflect the product you are displaying if the image is broken.

Re: Adding custom alt text to product images

Posted: Mon Apr 19, 2010 5:04 pm
by cosmo
Alt texts are used also by screen readers and for accessability reasons and good practice I want to be able to use relevant individual texts and also empty alt-texts for images that are irrelevant.

Also I want to use the alt-text to display better texts in my fancybox image display.

http://webaim.org/techniques/alttext/

Re: Adding custom alt text to product images

Posted: Wed Feb 02, 2011 3:48 pm
by cosmo
Changes have been made in the later versions, since my description. I just picked it up again (1.4.9.3) and redid the same thing, easier this time. Functions in the admin/model/catalog/product.php is now called addProduct($data) and editProduct($product_is, $data)

Furthermore, for editing the catalog/ parts and displaying the data:
Nothing has to be changed in the catalog/model/catalog/product.php
All that has to be done is adding the keywords in the images array in catalog/controller/product/product.php
The foreach on ~ line 274 will look something like this like this:

Code: Select all

foreach ($results as $result) {
   $this->data['images'][] = array(
     'popup' => $this->model_tool_image->resize($result['image'].........,
     'thumb' => $this->model_tool_image->resize($result['image']........,
     'alt_text' => $result['alt_text'],
     'title_text' => $result['title_text']
   );
}


Then it's free to use in any template using the product controller. Here it is used in the template/product/product.tpl

Code: Select all

<?php foreach ($images as $image) { ?>
   <div>
      <a href="<?php echo $image['popup']; ?>">
         <img src="<?php echo $image['thumb']; ?>" title="<?php echo $image['title_text']; ?>" alt="<?php echo $image['alt_text']; ?>"/>
     </a>
   </div>
<?php } ?>

Re: Adding custom alt text to product images

Posted: Fri Nov 16, 2012 9:41 pm
by kaftanka
Cosmo....I've just come across your long-time-ago post..and its just what I am trying to accomplish in 1.5.4.1
Do you have any update and/or are you willing to give me assistane in doing this please ?

Thanks,
Kaftanka

Re: Adding custom alt text to product images

Posted: Sat Nov 17, 2012 12:02 am
by cosmo
Hi Kaftanka

Since this change I have introduced vmod into the project. I would be willing to help you construct a vmod xml to accomplish the same thing.

Do you use vmod?

Re: Adding custom alt text to product images

Posted: Sat Dec 01, 2012 5:34 pm
by kaftanka
Hello Cosmo..sorry for late response..I've been away.
I'm still iterested in your idea, however do you have a website I can have a look at where you have in fact
implemented the idea - so I can be sure that its what I am looking for ?
Thanks.

Re: Adding custom alt text to product images

Posted: Tue Dec 11, 2012 5:31 pm
by cosmo
Sorry, I don't at the moment. Had to remove the thing when migrating from 1.4 to 1.5.
I'll notify you when it's done and deployed.

Site is http://beadsbyme.se

Re: Adding custom alt text to product images

Posted: Thu Jan 03, 2013 1:24 pm
by jmullenla
I am trying to do exactly the same thing. Keep me in the loop!

Re: Adding custom alt text to product images

Posted: Wed Jan 09, 2013 8:27 pm
by cosmo
What version of OC do you have?
Changes are based on 1.5.3.1. But probably easy to adjust to adjacent versions.

I've completed the thing in admin, in core code. Just have to move the changes to vqmod and start with the catalog part of it, "just".

Tell me if you want to see the changed files.

Re: Adding custom alt text to product images

Posted: Thu Jan 10, 2013 12:15 am
by jmullenla
I'm using 1.5.4. If you think it'll work in that version I'd like to give it a try.

Re: Adding custom alt text to product images

Posted: Wed Jan 23, 2013 5:00 am
by cosmo
Hey.
Sorry for the delay on this.
I've completed the first steps. Moving it all to vqmod takes ages!

Here is a first version, only admin steps so far.

The sql-file creates a new table in the database for the texts. This is to make the mod completely reversible by just removeing the vqmod xmls.

So run the sql on your database.
Copy the xml-files into the vqmod xml folder.
Test it out!

File deleted

Re: Adding custom alt text to product images

Posted: Wed Jan 23, 2013 1:39 pm
by VictorDrummond
Hi cosmos,

I'm keen to have this feature too so I've completed the above steps thus far and all seems to be working fine, except one minor matter (that I would live with if necessary)...

In admin>products>edit product>additional images...

I now get this line ABOVE the grid of images:
'thumb0');">Browse Files | Clear Image 'thumb1');">Browse Files | Clear Image

This is in addition to the those same lines/links normally in the grid of images and yes, the "Clear Image" link that appears does actually clear the relevant image.

I'm currently looking and experimenting for solution in "image_alt_and_title_text_admin_view.xml"

Any ideas about this? It's installed into a 1.5.4.1 version of oc.

Re: Adding custom alt text to product images

Posted: Wed Jan 23, 2013 4:00 pm
by cosmo
Editing the template file by vqmod is always a risky business since the template files are subject to more frequent change.
I do actually prefer to edit the actual file rather than trying to mod it by xml.

Also, that's the reason why the styling of the inputboxes are below standard.

So, are you comfortable with editing the template-file I could submit the code changes needed?

Re: Adding custom alt text to product images

Posted: Wed Jan 23, 2013 11:37 pm
by cosmo
Ok, adjusted the template .xml
Just swap the file in the "vqmod\xml"-folder.

File updated.

File deleted

Re: Adding custom alt text to product images

Posted: Sat Jan 26, 2013 12:02 am
by cosmo
Another fix. Had an offset wrong.

File deleted

Re: Adding custom alt text to product images

Posted: Tue Jan 29, 2013 4:06 am
by cosmo
New version with a lot of bugfixes and tested for 1.5.4.1
Still only admin part ready.

Just replace the old .xmls

Re: Adding custom alt text to product images

Posted: Tue Jan 29, 2013 10:19 pm
by VictorDrummond
cosmo wrote:New version with a lot of bugfixes and tested for 1.5.4.1
Still only admin part ready.

Just replace the old .xmls
Works great cosmo, that's awesome, thanks. 8)

Re: Adding custom alt text to product images

Posted: Sun Feb 17, 2013 2:18 am
by Lundii30
I've updated my database and uploaded the 3 xml files and the admin side seems to be working fine.
One question though: What do I add in my product.php and product.tpl in order to display the image titles at the bottom of the product image popups?

In the catalog/controller/product/product.php I tried to put:

Code: Select all

foreach ($results as $result) {
   $this->data['images'][] = array(
     'popup' => $this->model_tool_image->resize($result['image'].........,
     'thumb' => $this->model_tool_image->resize($result['image']........,
     'alt_text' => $result['alt_text'],
     'title_text' => $result['title_text']
   );
}
And in the template/product/product.tpl i put:

Code: Select all

<?php foreach ($images as $image) { ?>
   <div>
      <a href="<?php echo $image['popup']; ?>">
         <img src="<?php echo $image['thumb']; ?>" title="<?php echo $image['title_text']; ?>" alt="<?php echo $image['alt_text']; ?>"/>
     </a>
   </div>
<?php } ?>
But it gives me the following error:Notice: Undefined index: alt_text in...

Any suggestion would be much appreciated.
All times are UTC+08:00
Page 1 of 3
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/