[solved]ALT attribute for Image TV's

1,131 Posts

Bravado Reply #1, 18 years, 10 months ago

I call it a bug only for one reason...if you create a TV using a Image Input Type and insert it on a page then the page will not validate properly for strict XHTML.? So...here’s a suggestion for a solution:? Create an Image Display Type similar to the Hyperlink one.? Considering that the Hyperlink has the following attributes:

Tag Name
Tag ID
Class
Style
Attributes

Then you could create a similar one for Images that has an Alt attribute.? Since Alt attributes are different, a person could always assign a second TV and enter in the TV name in the Alt box of the Image Display Type.? Just a thought.

Thanks a bunch for all the hard work!?

Jeff

Jeff Whitfield

"I like my coffee hot and strong, like I like my women, hot and strong... with a spoon in them."

1,732 Posts

xwisdom Reply #2, 18 years, 10 months ago

Good mixing of TVs Jeff

You can nest TVs inside other TV in fact you can even make an option list using TVs.

example, inside the input element field you could add:

Apple==[*apple*]||Pear==[*pear*]||Grape==[*grape*]

xWisdom
www.xwisdomhtml.com
The fear of the Lord is the beginning of wisdom:
MODx Co-Founder - Create and do more with less.

1,131 Posts

Bravado Reply #3, 18 years, 10 months ago

Thanks for the compliment, xWisdom!

Now...here’s a suggestion that I think might work well. Let’s take the Image Input Type and change it to where the output is similar to the URL Input Type. The URL Input Type doesn’t actually output an actual anchor tag...just the text for the link itself. Which is good because you can use a Hyperlink Display Type to create the link and use another TV for the Title and so forth...very flexible! The same could be applied to an Image as well.

I’m going to play around with the code a bit and see if I can create a new Image Display Type that’s similar to the Hyperlink Display Type. The idea is that this display type would take an Image Input and create a properly validated IMG tag with all the necessary attributes. Right now this isn’t possible with the Image Input Type...it’s too simple and doesn’t include the attributes necessary for proper validation. Just one of the necessary changes we need to address, I think.

L8R!

Jeff

Jeff Whitfield

"I like my coffee hot and strong, like I like my women, hot and strong... with a spoon in them."

1,732 Posts

xwisdom Reply #4, 18 years, 10 months ago

Hi Jeff,

Go for it! It would be much appreciated.

I’ll remove the <img> tag from the next TP but for now you can get it working the way it should have been working.

In tmplvar.format.inc.php comment out lines 29-33:

// setup image type
//if($tvtype=='image') {
//	$value = parseInput($value); 
//	$value = "<img src='$value' />";
//}

You can then add your own Image display control to mutate_tmplvars.dynamic.action.php at line 105:

example:

displayParams['image'] 	= '&title=Title;string &class=Class;string &style=Style;string &target=Target;string';

then at line 336 add something like:

<option value="image" <?php echo ($content[’display’]==’image’)? "selected=’selected’":""; ?>>Image</option>

Next, modify the tmplvars.format.inc.php file and add the somthing like:

case "image":
// image render code here
break;

That’s it! I sure hope the above will help out

xWisdom
www.xwisdomhtml.com
The fear of the Lord is the beginning of wisdom:
MODx Co-Founder - Create and do more with less.

1,131 Posts

Bravado Reply #5, 18 years, 10 months ago

I’m way ahead of ya, xWisdom! Think I have it licked! Here’s what I did:

Like you said, I disabled the image type on line 29 by commenting out the lines.
Could probably just delete the whole thing once it’s integrated into the code in another release:

		// setup image type
		/* Disabled since all we care about is the value now.
		if($tvtype=='image') {
			$value = parseInput($value); 
			$value = "<img src='$value' />";
		}
		*/

Next, I went down to about line 125 and inserted the following before case "richtext":

			case "image":
				$value = parseInput($value,"||","array");
				for($i = 0;$i<count($value); $i++){
					list($name,$image) = is_array($value[$i]) ? $value[$i]: explode("==",$value[$i]);
					if(!$image) $image = $name;
					if($o) $o.='<br />';
					$o.= "<img src='$name'"." alt='".mysql_escape_string($params["alttext"])."'".($params["name"] ? " name='".$params["name"]."'":"").($params["hspace"] ? " hspace='".$params["hspace"]."'":"").($params["vspace"] ? " vspace='".$params["vspace"]."'":"").($params["borsize"] ? " border='".$params["borsize"]."'":"").(($params["align"] != "none") && ($params["align"] != "undefined") && ($params["align"] != "") ? " align='".$params["align"]."'":"").($params["class"] ? " class='".$params["class"]."'":"").($params["style"] ? " style='".$params["style"]."'":"").($params["id"] ? " id='".$params["id"]."'":"").($params["attrib"] ? $params["attrib"]:"")."/>";
				}
				break;

Now we move on to mutate_tmplvars.dynamic.action.php. Around line 100, just below the displayParams[’hyperlink’] line, I inserted the following:

	displayParams['image'] 		= '&alttext=Alternate Text;string &hspace=H Space;int &vspace=V Space;int &borsize=Border Size;int &align=Align;list;none,baseline,top,middle,bottom,texttop,absmiddle,absbottom,left,right &name=Name;string &class=Class;string &id=ID;string &style=Style;string &attrib=Attributes;string';

And around line 305, just below the option value="checkbox" line, I inserted this:

			<option value="image" <?php		echo ($content['type']=='image')? "selected='selected'":""; ?>>Image</option>

That should take care of it all! Options available for an Image Display Type are as follows:

Alternate Text
H Space
V Space
Border Size
Align
Name
Class
ID
Style
Attributes

All but Attributes are standard IMG tag inputs. Attributes, of course, is a good way to add some sort of JavaScript or the like to the IMG tag in the TV. Alternate Text will allow for other TV variables...err...none of the other fields will though, I don’t think. But that doesn’t really matter since you’ll likely won’t use the other ones for TV variables anyways.

Hope this helps! Works good for my purposes!

L8R!

Jeff

Jeff Whitfield

"I like my coffee hot and strong, like I like my women, hot and strong... with a spoon in them."

1,131 Posts

Bravado Reply #6, 18 years, 10 months ago

Couple of more edits I made. These concern the Hyperlink Display Type. I didn’t like the idea of not having a way to display any other text other than the link itself so...I changed it to allow for the input of different display text. This way you could assign both a Link and Display Text with two TV’s! Goodie!

In tmplvars.format.inc.php, around line 104 change the entire case "hyperlink" section to this:

			case "hyperlink":
				$value = parseInput($value,"||","array");
				for($i = 0;$i<count($value); $i++){
					list($name,$url) = is_array($value[$i]) ? $value[$i]: explode("==",$value[$i]);
					if(!$url) $url = $name;
					if($o) $o.='<br />';
					$o.= "<a href='$url' title='".mysql_escape_string($params["title"])."'".($params["class"] ? " class='".$params["class"]."'":"").($params["style"] ? " style='".$params["style"]."'":"").($params["target"] ? " target='".$params["target"]."'":"").($params["attrib"] ? " ".mysql_escape_string($params["attrib"]) : "").">".($params["displaytext"] ? mysql_escape_string($params["displaytext"]) : $name)."</a>";
				}
				break;

And in mutate_tmplvars.dynamic.action.php, around line 99 change the entire displayParams[’hyperlink’] line to this:

	displayParams['hyperlink'] 	= '&displaytext=Display Text;string &title=Title;string &class=Class;string &style=Style;string &target=Target;string &attrib=Attributes;string';

So what’s different about this? For starters, I added a Display Text parameter that will allow for any text or variable. Leaving it blank will default it to the link as it was before. I also added an Attributes option as well. Since the Target attribute is deprecated in strict XML doctypes, you can use Attributes to assign some javascript or a chunk to facilitate the opening of a new window without the use of a Target value. I usually attach the following code to a link for this:

onclick="window.open(this.href,'_blank');return false;"

Works great and allows for much more flexibility!

L8R!

Jeff

Jeff Whitfield

"I like my coffee hot and strong, like I like my women, hot and strong... with a spoon in them."

1,131 Posts

Bravado Reply #7, 18 years, 10 months ago

Had to make a few minor bug edits (not to mention that I pasted the wrong damn code for the hyperlink change!). So...if you copied this code already...look again! A few changes were made!

Jeff Whitfield

"I like my coffee hot and strong, like I like my women, hot and strong... with a spoon in them."

1,732 Posts

xwisdom Reply #8, 18 years, 10 months ago

Well done Bravado, well done

I’ll implement your Image control into the core. As for the hyperlink changes I’m not sure I follow you on that one.

Here’s what you can do to get the Hyperlink control to display text:

text==url

example:

Click Here==http://www.mysebsite.com

You could even nest other TVs:

[*mytext*]==[*myurl*]

See also the "Template Variable Display Controls" tutorial

Will that work for you?

xWisdom
www.xwisdomhtml.com
The fear of the Lord is the beginning of wisdom:
MODx Co-Founder - Create and do more with less.

1,131 Posts

Bravado Reply #9, 18 years, 10 months ago

Well...the problem with that is the URL Input Type uses two input fields; one being a dropdown for http: or ftp:, the other a text field for the URL. Granted, you could just use a standard text field and type it in the way you suggested. Hmm...I’m gonna have to give this some more thought. I’ll post an additional reply once I’ve wrapped my brain around it. One thing is for sure, I really like having an Attributes option for entering in JavaScript on links. wink

Jeff

Quote from: xwisdom at Jun 17, 2005, 02:53 AM

Well done Bravado, well done

I’ll implement your Image control into the core. As for the hyperlink changes I’m not sure I follow you on that one.

Here’s what you can do to get the Hyperlink control to display text:

text==url

example:

Click Here==http://www.mysebsite.com

You could even nest other TVs:

[*mytext*]==[*myurl*]

See also the "Template Variable Display Controls" tutorial

Will that work for you?

Jeff Whitfield

"I like my coffee hot and strong, like I like my women, hot and strong... with a spoon in them."

1,131 Posts

Bravado Reply #10, 18 years, 10 months ago

Ok...here’s a compromise for the Hyperlink display type. Instead of having a new Display Text attribute, we could use the Title attribute for this. Like you said, you could always use a Name==URL type context for the URL variable but the way I did it if you enter in anything for the Title attribute, that takes precedent over anything else. Here’s how it lays out:

tmplvars.format.inc.php, around line 104:

			case "hyperlink":
				$value = parseInput($value,"||","array");
				for($i = 0;$i<count($value); $i++){
					list($name,$url) = is_array($value[$i]) ? $value[$i]: explode("==",$value[$i]);
					if(!$url) $url = $name;
					if($o) $o.='<br />';
					$o.= "<a href='$url'"." title='".($params["title"] ? mysql_escape_string($params["title"]):$name)."'".($params["class"] ? " class='".$params["class"]."'":"").($params["style"] ? " style='".$params["style"]."'":"").($params["target"] ? " target='".$params["target"]."'":"").($params["attrib"] ? " ".mysql_escape_string($params["attrib"]) : "").">".($params["title"] ? mysql_escape_string($params["title"]) : $name)."</a>";
				}
				break;

mutate_tmplvars.dynamic.action.php, around line 99:

	displayParams['hyperlink'] 	= '&title=Title;string &class=Class;string &style=Style;string &target=Target;string &attrib=Attributes;string';

I took out the Display Text variable, left in the new Attributes variable. Then, on the Title attribute and the text to display for the link, I modified the code so that if the $title variable exists then that will be displayed, else it falls back to the $name variable which could be the same as the $url variable if no $url exists...best of both worlds! I figure this would work better since it would seem silly to have different text in the Title attribute than what is displayed. wink

Though I don’t know if anyone would want to do this....what do you think?

Jeff

Jeff Whitfield

"I like my coffee hot and strong, like I like my women, hot and strong... with a spoon in them."