Add title=" " to all <IMG ......> tags

ThaboTheWuffDog

Joined: 2005-09-15
Posts: 5

Posted: Thu, 2005-09-15 21:01

I have a new install of 2.0 and I am using the Siriux theme. The default theme seems too busy so I am trying to tweak Siriux. It displays the thumbnails nicely without any of the date, new, owner and other shite around it but it would be nice to be able to mouse over the thumbs and get the description or title to come up when in the thumbnail view. Right now all you see it just a clean page of thumbs with nothing around them. Nice but too simple me thinks.

Looking at the html code I see:

So for firefox to show mouse over info it needs the TITLE element in the IMG tag. How / where can I add this info ??? I don't know about IE and think the mouseover thingy may work but I and my pals use good old Firefox so please let me know.

Thanks
G2 rocks now if we could just have some usable more SIMPLE themes!

valiant

Joined: 2003-01-04
Posts: 32509

Posted: Thu, 2005-09-15 21:25

title=?
img tags have the alt="This is a text that shows up when you keep your mouse over the image or if the browser cannot display images" attribute.
and the longdesc attribute.

and g2 already has this option built in. you just need to enable it.

in themes/siriux/templates/album.tpl , replace
{g->image item=$child image=$child.thumbnail} with
{g->image item=$child image=$child.thumbnail alt=1 longdesc=1}

i thing that should work.

btw: look at PG's theme on the user contribution page of codex.gallery2.org, it's great.

nivekiam

Joined: 2002-12-10
Posts: 16504

Posted: Fri, 2005-09-16 02:04

Actually the alt attribute is not for that, that's what IE incorrectly uses it for. That "tooltip" popup when you hover your mouse over an image is suppose to be from the title attribute.

I submitted a patch for this a long time ago, but nothing happened with it.

http://www.w3.org/TR/REC-html40/struct/global.html#h-7.4.3

Quote:

Values of the title attribute may be rendered by user agents in a variety of ways. For instance, visual browsers frequently display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object). Audio user agents may speak the title information in a similar context. For example, setting the attribute on a link allows user agents (visual and non-visual) to tell users about the nature of the linked resource:

Quote:

The alt attribute is suppose to be used purely for alternate text, like for text only browsers. It's an accessiblity feature, not a tooltip that IE incorrectly uses it for. Firefox, Mozilla, Netscape, Opera, Safari, etc all use the alt and title tags correctly.

Hell even IE for the Mac doesn't do this: http://annevankesteren.nl/2004/12/alt-attribute

http://developer.apple.com/internet/safari/faq.html#anchor20

I'll keep bitching about this until this is done. If I need to go through the code yet again adding in title attributes where needed, and submit another patch I'll do so.

ThaboTheWuffDog

Joined: 2005-09-15
Posts: 5

Posted: Fri, 2005-09-16 06:28

Yes, as nivekiam correctly pointed out IE does handle this correctly. The fix mentioned in reply to my intial post works great -thanks!- but how do I populate the tag with usable data now, I end up getting the number 1 in all my title tags.

Thanks again
R

ThaboTheWuffDog

Joined: 2005-09-15
Posts: 5

Posted: Fri, 2005-09-16 07:04

Ok I figured it out I added title=$child.summary or I could do title=$child.description - works great, a nice clean theme but mouse over the thumbs and see the summary or description - or get fancy and have both - need to brush up on smarty to see how to concatenate two strings together. Also would be nice to add code to save if the silly program has used the xxxxxx.JPG for the title or summary / description then make the string blank so the mouse over will not return the file name that doesn't really mean anythiing to anyone.

RwD

Joined: 2005-01-09
Posts: 383

Posted: Fri, 2005-09-16 10:53

btw, IE does not show the alt attribute when the title attribute is present (empty or not) so my guess is Microsoft way back decided to try to "help" when the title element was missing and it then going wrong altogether. Ah well, at least it is looked at now in gallery, I was wondering about this as well...

valiant

Joined: 2003-01-04
Posts: 32509

Posted: Fri, 2005-09-16 10:59

RwD: so, something wrong with G2 does?

RwD

Joined: 2005-01-09
Posts: 383

Posted: Fri, 2005-09-16 12:32

not sure, depends on the intend;

The alt attribute is meant to display whenever the image cannot be found.

As it seems gallery knows that the alt attribute is required for the used dtd because every image has one. But the default header image in the matrix theme has an empty alt attribute causing IE to not show a tooltip, but even worse; when that image cannot be found the alternative text for that image is missing! By the empty alt attributes existing I am guessing galleries intend is to have the tooltip show.

If the intend isn't to show a tooltip then the titel attribute should most definately be in to stop the alt from showing in IE.

Euhm, basically gallery2 isn't really doing something wrong, neither is IE. But if you don't want the alt to show you need to add an empty title...

(am I making any sense??)

nivekiam

Joined: 2002-12-10
Posts: 16504

Posted: Fri, 2005-09-16 13:49

ThaboTheWuffDog, no I pointed out that IE does this INCORRECTLY ;)

RwD, this is what I've been trying to argue the entire time. The alt attribute was treated as the tooltip and to be there so it could pass HTML validation as it's a required attribute. But since it was used as a tooltip and 90% of browsers display it like that, then why not also use the title attribute with the same information so that all browsers display your gallery install the same way. Plus it would make using some features like Rearrange Items much easier ;)

valiant

Joined: 2003-01-04
Posts: 32509

Posted: Fri, 2005-09-16 15:10

please file a feature request or bug then, whatever you feel is appropriate.
we start looking at the total page size. bharat wants to make all URLs relative which will save about 20% of the page size.
adding title's in all <img tags might blow it up again a little, but i guess it's worth it. in the end, we could also make it optional and for themers, it's an option anyway.

RwD

Joined: 2005-01-09
Posts: 383

Posted: Fri, 2005-09-16 17:44

nivekiam, Sorry, I must have not completely understood you. No need to repeat you ;)

Valiant, Hmmz, do you already use html compression to save space?? That is php side as well, right? Big part of the size comes from the lots of spaces in the output!! (saves 4Kb if I remove the extra spaces from a random small album page in the Matrix theme (two items, three sidebars)).

valiant

Joined: 2003-01-04
Posts: 32509

Posted: Fri, 2005-09-16 18:05

RwD we let the user decide, he can configure apache / php properly to use compression.
you'll get a problem with g2 progress bars though if you use compression.

nivekiam

Joined: 2002-12-10
Posts: 16504

Posted: Sat, 2005-09-17 02:46

RwD, no worries, I wasn't talking about you. Repeat all you want, others need to heard this cry for justice ;) I've been off and on bitching about this for a few months now.

valiant, ah that might explain why my progress bars don't work. All php on my site is gzipped...

I understand adding title's in will add to the overall page size, but I think it would be small and then would give everyone with different browsers (read more standards compliant than others :D ) the same experience. I did think about adding trying to add this as an option in the Site Admin, but then there would need to be a bit more code added to check for a variable and set a variable...

valiant

Joined: 2003-01-04
Posts: 32509

Posted: Sat, 2005-09-17 02:56

as i said, please file a request. people can now vote for requests, we'll see how popular this one is ;)

nivekiam

Joined: 2002-12-10
Posts: 16504

Posted: Sat, 2005-09-17 03:50

I did, 4 months ago ;)

http://sourceforge.net/tracker/index.php?func=detail&aid=1198718&group_id=7130&atid=357130

Look it's already got 5 votes :D

valiant

Joined: 2003-01-04
Posts: 32509

Posted: Sat, 2005-09-17 14:31

i wonder who voted for it, any chance it was you?

Rebes

Joined: 2002-11-27
Posts: 21

Posted: Fri, 2006-06-16 15:54

Where exactly did you do this?

I would also like to know how to hover the description of a thumbnail in the mouseover text... I had a similar mod for a phpbb board that hovered the first 240 characters of the most recent post over the link to a post in the thread list... I just have no idea how to put it into G2. Even if you could tell me where it builds the img structure for the thumbnails, I could maybe piece it together...

{g->image id="%ID%" item=$child image=$child.thumbnail class="%CLASS% giThumbnail"}

I'm guessing that's what inserts the picture, but I have no idea how to change what it inserts...

R!

ThaboTheWuffDog wrote:

Ok I figured it out I added title=$child.summary or I could do title=$child.description - works great, a nice clean theme but mouse over the thumbs and see the summary or description - or get fancy and have both - need to brush up on smarty to see how to concatenate two strings together. Also would be nice to add code to save if the silly program has used the xxxxxx.JPG for the title or summary / description then make the string blank so the mouse over will not return the file name that doesn't really mean anythiing to anyone.

Rebes

Joined: 2002-11-27
Posts: 21

Posted: Fri, 2006-06-16 19:48

Ok, I found a way to maybe do this, and it works pretty cool too...

Open modules\core\classes\GalleryDerivativeImage.class

Find at or near line 223:

if (!isset($params['longdesc'])) {
  $params['longdesc'] = preg_replace('/[\r\n]+/', ' ',
  GalleryUtilities::markup($item->getDescription(), 'strip'));
}

Make an exact copy of that directly below itself, then in the second version change each occurance of longdesc to title. You should now have the following:

if (!isset($params['longdesc'])) {
  $params['longdesc'] = preg_replace('/[\r\n]+/', ' ',
  GalleryUtilities::markup($item->getDescription(), 'strip'));
}

if (!isset($params['title'])) {
  $params['title'] = preg_replace('/[\r\n]+/', ' ',
  GalleryUtilities::markup($item->getDescription(), 'strip'));
}

The code that follows it will automatically parse it into the html, because as long as the title param is set, it gets inserted. It also handles stripping out any odd characters, as well as cuts it to a manageable length if it's really long.

This actually works for ALL images! thumbnails, breadcrumbs, and even full size images! Enjoy!

R!

Rebes

Joined: 2002-11-27
Posts: 21

Posted: Fri, 2006-06-16 19:52

I would like to add, I am also using the WPG2 (wordpress gallery 2) plugin, and this even made it so I get popups on my blog entry pictures, and even on the random image block on my main blog page.

This is the easiest way I could imagine to get so much at once :P

Edit: I would also like to add, sorry for necro'ing this old thread with my ramblings, however I felt it solved the problem perfectly and others might find it useful

R!

ThaboTheWuffDog Joined: 2005-09-15 Posts: 5	Posted: Thu, 2005-09-15 21:01
	I have a new install of 2.0 and I am using the Siriux theme. The default theme seems too busy so I am trying to tweak Siriux. It displays the thumbnails nicely without any of the date, new, owner and other shite around it but it would be nice to be able to mouse over the thumbs and get the description or title to come up when in the thumbnail view. Right now all you see it just a clean page of thumbs with nothing around them. Nice but too simple me thinks. Looking at the html code I see: <img src="http://xxxxxxxxx/photo/d/385-2/P9010297.JPG" width="150" height="112" alt="Title of Pic" longdesc="Sunset - early bird gets the worm. On the road to Ft Collins"/> So for firefox to show mouse over info it needs the TITLE element in the IMG tag. How / where can I add this info ??? I don't know about IE and think the mouseover thingy may work but I and my pals use good old Firefox so please let me know. Thanks G2 rocks now if we could just have some usable more SIMPLE themes!
	XUser login Username: * Password: * Create new account Request new password
valiant Joined: 2003-01-04 Posts: 32509	Posted: Thu, 2005-09-15 21:25
	title=? img tags have the alt="This is a text that shows up when you keep your mouse over the image or if the browser cannot display images" attribute. and the longdesc attribute. and g2 already has this option built in. you just need to enable it. in themes/siriux/templates/album.tpl , replace `{g->image item=$child image=$child.thumbnail}` with `{g->image item=$child image=$child.thumbnail alt=1 longdesc=1}` i thing that should work. btw: look at PG's theme on the user contribution page of codex.gallery2.org, it's great.

nivekiam Joined: 2002-12-10 Posts: 16504	Posted: Fri, 2005-09-16 02:04
	Actually the alt attribute is not for that, that's what IE incorrectly uses it for. That "tooltip" popup when you hover your mouse over an image is suppose to be from the title attribute. I submitted a patch for this a long time ago, but nothing happened with it. http://www.w3.org/TR/REC-html40/struct/global.html#h-7.4.3 Quote: Values of the title attribute may be rendered by user agents in a variety of ways. For instance, visual browsers frequently display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object). Audio user agents may speak the title information in a similar context. For example, setting the attribute on a link allows user agents (visual and non-visual) to tell users about the nature of the linked resource: Quote: The alt attribute is suppose to be used purely for alternate text, like for text only browsers. It's an accessiblity feature, not a tooltip that IE incorrectly uses it for. Firefox, Mozilla, Netscape, Opera, Safari, etc all use the alt and title tags correctly. Hell even IE for the Mac doesn't do this: http://annevankesteren.nl/2004/12/alt-attribute http://developer.apple.com/internet/safari/faq.html#anchor20 I'll keep bitching about this until this is done. If I need to go through the code yet again adding in title attributes where needed, and submit another patch I'll do so.

ThaboTheWuffDog Joined: 2005-09-15 Posts: 5	Posted: Fri, 2005-09-16 06:28
	Yes, as nivekiam correctly pointed out IE does handle this correctly. The fix mentioned in reply to my intial post works great -thanks!- but how do I populate the tag with usable data now, I end up getting the number 1 in all my title tags. Thanks again R

ThaboTheWuffDog Joined: 2005-09-15 Posts: 5	Posted: Fri, 2005-09-16 07:04
	Ok I figured it out I added title=$child.summary or I could do title=$child.description - works great, a nice clean theme but mouse over the thumbs and see the summary or description - or get fancy and have both - need to brush up on smarty to see how to concatenate two strings together. Also would be nice to add code to save if the silly program has used the xxxxxx.JPG for the title or summary / description then make the string blank so the mouse over will not return the file name that doesn't really mean anythiing to anyone.

RwD Joined: 2005-01-09 Posts: 383	Posted: Fri, 2005-09-16 10:53
	btw, IE does not show the alt attribute when the title attribute is present (empty or not) so my guess is Microsoft way back decided to try to "help" when the title element was missing and it then going wrong altogether. Ah well, at least it is looked at now in gallery, I was wondering about this as well...

valiant Joined: 2003-01-04 Posts: 32509	Posted: Fri, 2005-09-16 10:59
	RwD: so, something wrong with G2 does?

RwD Joined: 2005-01-09 Posts: 383	Posted: Fri, 2005-09-16 12:32
	not sure, depends on the intend; The alt attribute is meant to display whenever the image cannot be found. As it seems gallery knows that the alt attribute is required for the used dtd because every image has one. But the default header image in the matrix theme has an empty alt attribute causing IE to not show a tooltip, but even worse; when that image cannot be found the alternative text for that image is missing! By the empty alt attributes existing I am guessing galleries intend is to have the tooltip show. If the intend isn't to show a tooltip then the titel attribute should most definately be in to stop the alt from showing in IE. Euhm, basically gallery2 isn't really doing something wrong, neither is IE. But if you don't want the alt to show you need to add an empty title... (am I making any sense??)

nivekiam Joined: 2002-12-10 Posts: 16504	Posted: Fri, 2005-09-16 13:49
	ThaboTheWuffDog, no I pointed out that IE does this INCORRECTLY ;) RwD, this is what I've been trying to argue the entire time. The alt attribute was treated as the tooltip and to be there so it could pass HTML validation as it's a required attribute. But since it was used as a tooltip and 90% of browsers display it like that, then why not also use the title attribute with the same information so that all browsers display your gallery install the same way. Plus it would make using some features like Rearrange Items much easier ;)

valiant Joined: 2003-01-04 Posts: 32509	Posted: Fri, 2005-09-16 15:10
	please file a feature request or bug then, whatever you feel is appropriate. we start looking at the total page size. bharat wants to make all URLs relative which will save about 20% of the page size. adding title's in all <img tags might blow it up again a little, but i guess it's worth it. in the end, we could also make it optional and for themers, it's an option anyway.

RwD Joined: 2005-01-09 Posts: 383	Posted: Fri, 2005-09-16 17:44
	nivekiam, Sorry, I must have not completely understood you. No need to repeat you ;) Valiant, Hmmz, do you already use html compression to save space?? That is php side as well, right? Big part of the size comes from the lots of spaces in the output!! (saves 4Kb if I remove the extra spaces from a random small album page in the Matrix theme (two items, three sidebars)).

valiant Joined: 2003-01-04 Posts: 32509	Posted: Fri, 2005-09-16 18:05
	RwD we let the user decide, he can configure apache / php properly to use compression. you'll get a problem with g2 progress bars though if you use compression.

nivekiam Joined: 2002-12-10 Posts: 16504	Posted: Sat, 2005-09-17 02:46
	RwD, no worries, I wasn't talking about you. Repeat all you want, others need to heard this cry for justice ;) I've been off and on bitching about this for a few months now. valiant, ah that might explain why my progress bars don't work. All php on my site is gzipped... I understand adding title's in will add to the overall page size, but I think it would be small and then would give everyone with different browsers (read more standards compliant than others :D ) the same experience. I did think about adding trying to add this as an option in the Site Admin, but then there would need to be a bit more code added to check for a variable and set a variable...

valiant Joined: 2003-01-04 Posts: 32509	Posted: Sat, 2005-09-17 02:56
	as i said, please file a request. people can now vote for requests, we'll see how popular this one is ;)

nivekiam Joined: 2002-12-10 Posts: 16504	Posted: Sat, 2005-09-17 03:50
	I did, 4 months ago ;) http://sourceforge.net/tracker/index.php?func=detail&aid=1198718&group_id=7130&atid=357130 Look it's already got 5 votes :D

valiant Joined: 2003-01-04 Posts: 32509	Posted: Sat, 2005-09-17 14:31
	i wonder who voted for it, any chance it was you?

Rebes Joined: 2002-11-27 Posts: 21	Posted: Fri, 2006-06-16 15:54
	Where exactly did you do this? I would also like to know how to hover the description of a thumbnail in the mouseover text... I had a similar mod for a phpbb board that hovered the first 240 characters of the most recent post over the link to a post in the thread list... I just have no idea how to put it into G2. Even if you could tell me where it builds the img structure for the thumbnails, I could maybe piece it together... {g->image id="%ID%" item=$child image=$child.thumbnail class="%CLASS% giThumbnail"} I'm guessing that's what inserts the picture, but I have no idea how to change what it inserts... R! ThaboTheWuffDog wrote: Ok I figured it out I added title=$child.summary or I could do title=$child.description - works great, a nice clean theme but mouse over the thumbs and see the summary or description - or get fancy and have both - need to brush up on smarty to see how to concatenate two strings together. Also would be nice to add code to save if the silly program has used the xxxxxx.JPG for the title or summary / description then make the string blank so the mouse over will not return the file name that doesn't really mean anythiing to anyone.

Rebes Joined: 2002-11-27 Posts: 21	Posted: Fri, 2006-06-16 19:48
	Ok, I found a way to maybe do this, and it works pretty cool too... Open modules\core\classes\GalleryDerivativeImage.class Find at or near line 223: if (!isset($params['longdesc'])) { $params['longdesc'] = preg_replace('/[\r\n]+/', ' ', GalleryUtilities::markup($item->getDescription(), 'strip')); } Make an exact copy of that directly below itself, then in the second version change each occurance of longdesc to title. You should now have the following: if (!isset($params['longdesc'])) { $params['longdesc'] = preg_replace('/[\r\n]+/', ' ', GalleryUtilities::markup($item->getDescription(), 'strip')); } if (!isset($params['title'])) { $params['title'] = preg_replace('/[\r\n]+/', ' ', GalleryUtilities::markup($item->getDescription(), 'strip')); } The code that follows it will automatically parse it into the html, because as long as the title param is set, it gets inserted. It also handles stripping out any odd characters, as well as cuts it to a manageable length if it's really long. This actually works for ALL images! thumbnails, breadcrumbs, and even full size images! Enjoy! R!

Rebes Joined: 2002-11-27 Posts: 21	Posted: Fri, 2006-06-16 19:52
	I would like to add, I am also using the WPG2 (wordpress gallery 2) plugin, and this even made it so I get popups on my blog entry pictures, and even on the random image block on my main blog page. This is the easiest way I could imagine to get so much at once :P Edit: I would also like to add, sorry for necro'ing this old thread with my ramblings, however I felt it solved the problem perfectly and others might find it useful R!

Add title=" " to all <IMG ......> tags

XUser login