Post by cosmo » Sat Apr 10, 2010 3:38 pm

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!

New member

Posts

Joined
Sat Apr 10, 2010 3:26 pm

Post by cosmo » Wed Apr 14, 2010 12:40 am

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!

New member

Posts

Joined
Sat Apr 10, 2010 3:26 pm

Post by SXGuy » Sun Apr 18, 2010 5:58 pm

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.

Active Member

Posts

Joined
Sun Nov 08, 2009 2:07 am

Post by cosmo » Mon Apr 19, 2010 5:04 pm

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/

New member

Posts

Joined
Sat Apr 10, 2010 3:26 pm

Post by cosmo » Wed Feb 02, 2011 3:48 pm

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 } ?>

New member

Posts

Joined
Sat Apr 10, 2010 3:26 pm

Post by kaftanka » Fri Nov 16, 2012 9:41 pm

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

Newbie

Posts

Joined
Tue Nov 13, 2012 6:12 pm

Post by cosmo » Sat Nov 17, 2012 12:02 am

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?

New member

Posts

Joined
Sat Apr 10, 2010 3:26 pm

Post by kaftanka » Sat Dec 01, 2012 5:34 pm

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.

Newbie

Posts

Joined
Tue Nov 13, 2012 6:12 pm

Post by cosmo » Tue Dec 11, 2012 5:31 pm

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

New member

Posts

Joined
Sat Apr 10, 2010 3:26 pm

Post by jmullenla » Thu Jan 03, 2013 1:24 pm

I am trying to do exactly the same thing. Keep me in the loop!

Newbie

Posts

Joined
Thu Jan 03, 2013 1:21 pm

Post by cosmo » Wed Jan 09, 2013 8:27 pm

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.

New member

Posts

Joined
Sat Apr 10, 2010 3:26 pm

Post by jmullenla » Thu Jan 10, 2013 12:15 am

I'm using 1.5.4. If you think it'll work in that version I'd like to give it a try.

Newbie

Posts

Joined
Thu Jan 03, 2013 1:21 pm

Post by cosmo » Wed Jan 23, 2013 5:00 am

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
Last edited by cosmo on Tue Jan 29, 2013 4:08 am, edited 1 time in total.

New member

Posts

Joined
Sat Apr 10, 2010 3:26 pm

Post by VictorDrummond » Wed Jan 23, 2013 1:39 pm

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.

Hosting for Oc 2.x: Well tested on 2.03.1 including emails work correctly, cPanel Shared or WHM VPS, managed security, fast & reliable SSD drives, Raid 10 /4 disk redundancy, server locale - Texas, contact me to discuss further.


User avatar
Active Member

Posts

Joined
Sat Dec 15, 2012 12:41 pm
Location - On the balcony slammin' Margaritas

Post by cosmo » Wed Jan 23, 2013 4:00 pm

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?

New member

Posts

Joined
Sat Apr 10, 2010 3:26 pm

Post by cosmo » Wed Jan 23, 2013 11:37 pm

Ok, adjusted the template .xml
Just swap the file in the "vqmod\xml"-folder.

File updated.

File deleted
Last edited by cosmo on Tue Jan 29, 2013 4:07 am, edited 1 time in total.

New member

Posts

Joined
Sat Apr 10, 2010 3:26 pm

Post by cosmo » Sat Jan 26, 2013 12:02 am

Another fix. Had an offset wrong.

File deleted
Last edited by cosmo on Tue Jan 29, 2013 4:07 am, edited 1 time in total.

New member

Posts

Joined
Sat Apr 10, 2010 3:26 pm

Post by cosmo » Tue Jan 29, 2013 4:06 am

New version with a lot of bugfixes and tested for 1.5.4.1
Still only admin part ready.

Just replace the old .xmls

Attachments

Version 0.2 - just admin parts


New member

Posts

Joined
Sat Apr 10, 2010 3:26 pm

Post by VictorDrummond » Tue Jan 29, 2013 10:19 pm

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)

Hosting for Oc 2.x: Well tested on 2.03.1 including emails work correctly, cPanel Shared or WHM VPS, managed security, fast & reliable SSD drives, Raid 10 /4 disk redundancy, server locale - Texas, contact me to discuss further.


User avatar
Active Member

Posts

Joined
Sat Dec 15, 2012 12:41 pm
Location - On the balcony slammin' Margaritas

Post by Lundii30 » Sun Feb 17, 2013 2:18 am

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.

Newbie

Posts

Joined
Wed Jan 23, 2013 10:50 pm
Who is online

Users browsing this forum: No registered users and 41 guests