====New image action====

This is a general purpose image action but since it was created out of the need to add emoticons or smilies in Wikka I named the page Smilies Action.

>>==See also:==
EnhancedImageAction
IconsInWikka>>


 
This new image action improves: 
	1) simpler syntax (debatable you might say) - don't need to specify parameter names
	1) smaller code in database 
	1) more readable (older version looks a lot like html code)
	1) don't need to remember image's extension or folder
	1) can be configured to add more image directories or image extensions

disadvantages:
	1) not standard way to pass and handle parameters (does this have any other implications)
	1) add more if like

Compare the two actions that result to the same thing.

the integrated image action:
%%(html)
{{image class="center" alt="DVD logo" title="An Image Link" url="images/dvdvideo.gif" link="RecentChanges"}}
%%

the new image action:
%%(html)
{{i dvdvideo; An Image Link; RecentChanges; center; DVD logo}}
%%


here is the action save it as actions/i.php
%%(php)
<?php
/*
	"i" action for icons, emoticons or any image

	parameters are passed in the specific order (shown below) seperated by ; (semicolon) 
	(spaces are trimmed and quotes are not needed)

	usage:
	{{i src;title;link;class;alt}}
	example :
	{{i angry; I am angry; AngryPage; angryClass; angry image should display here}}
*/

// ? is there a better way to do this
foreach ($vars as $param => $value) { 
	list($src,$title,$link,$class,$alt)=explode(";",$value);
}

//icon dirs and extension to check
$iconDirs = array("smilies", "images","flags");
$exts = array("gif","jpg","png");

if ($src == "") exit();

foreach($iconDirs as $idir){
	foreach($exts as $ext){
		$src2 =$idir."/".$src.".".$ext;
		if(file_exists($src2)) break 2;
	}
}

$output = "<img";
$output .= " src='".$src2."'";

$title = $this->htmlspecialchars_ent($title);

if (empty($link) && !empty($title)){ //if there is a link the title goes to the link
	$output .= " title='".$title."'";
}

if (!empty($class)) 
	$output .= " class='".$this->htmlspecialchars_ent($class)."'";

if (!empty($alt)) 
	$output .= " alt='".$this->htmlspecialchars_ent($alt)."'";
else 
	$output .= " alt='".$title."'";

$output .= "/>";

if (!empty($link)) {
	$output = $this->Link(trim($link), "", $output, 1, 0, $title);
}

$output = $this->ReturnSafeHTML($output);

print($output);
?>
%%



You may also want to add a folder "smilies" and put your favorite smilies named with names easy to remember.  In such a case you also need to add an .htaccess file in the "smilies" folder
%%(apache) 
<IfModule mod_rewrite.c>
RewriteEngine off
</IfModule>
%%



Found also what seems like a bug in function Link in wikka.php.  If the return comes from the last line of Link then no "title" attribute is being inserted.  I have not completelly understood the logic of "Link", maybe there is a better way to solve this but anyway here is what worked.

changed:
%%(php)
	function Link( ....
	....
		return $url ? "<a class=\"ext\" href=\"$url\">$text</a>$external_link_tail" : $text;
	}
%%

to:
%%(php)
	function Link( ....
	....
		return $url ? "<a class=\"ext\" title=\"$title\" href=\"$url\">$text</a>$external_link_tail" : $text;
	}
%%

in wikka.php


You can improve the display of smilies when put together with text, following code will have them aligned (vertically) in the middle of the line. Add these to your css file.
%%(css)
img {vertical-align: middle;}
%% 


====Smilies collections====
You can find some nice smilies at [[http://www.big-boards.com/smileys.php# | Big Boards]] I personally like "smilies collection 1" since they are 20x20 pixels and have more details then the usual 15X15 smilies (implemented with most bulletin boards).  "Smilies collection 5" has some smilies I also liked included in my smilies folder.  I did not find a license with them but it the site states "Smileys - Free Smiley Faces Collections for your Forums" 


====Flag gifs====
You can add flags in wikka and configure this image action to "see" the corresponding directory.  I personally took the liberty and copied the flags of AndreaRossato UniWakka project to my wikka site (I am not sure what license these flags have - I hope its some sort of GPL)

====PNG's and IE====
Its is very well known that IE 6 and older versions cannot handle PNG's transparency (its finally fixed in IE 7 beta 2; tested it recently as a standalone; look at [[http://vivekjishtu.blogspot.com/2006/02/run-ie7-beta-2-standalone-in-5-easy.html | Vivek Jishtu's blog]] for instructions on how to set it up as standalone), anyway ...

if you want to have PNG images included in your wikka pages there is a workaround for IE6 and IE5.5.  The solution to [[http://www.scss.com.au/family/andrew/webdesign/pngbehavior/ | IE handling PNG's]] is very simple and it uses a behaviour understood by IE. 

Added somewhere in the <head> in actions/header.php
%%(html)
<!--[if lt IE 7]><style type="text/css"> img { behavior: url(images/pngbehavior.htc); } </style><![endif]-->
%%

modified pngbehaviour.htc from previous link to look at all the png files not only the ones that end with ...trans.png 
commented out line 36 and created line 37 and putted the file in the images folder
%%(javascript;1)
<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<public:attach event="onbeforeprint" for="window" onevent="beforePrint()" />
<public:attach event="onafterprint" for="window" onevent="afterPrint()" />
<script>

/*
 * PNG Behavior
 *
 * This script was created by Erik Arvidsson (erik(at)eae.net)
 * for WebFX (http://webfx.eae.net)
 * Copyright 2002
 * 
 * For usage see license at http://webfx.eae.net/license.html	
 *
 * Version: 1.01a
 * Created: 2001-??-??	First working version
 * Updated: 2002-03-28	Fixed issue when starting with a non png image and
 *                      switching between non png images
 *          2003-01-06	Fixed RegExp to correctly work with IE 5.0x
 *          2004-04-25  Fixed PNG image printing, eliminated need for external
 *                      GIF file, fixed intermittent uninitialised variable
 *                      error [by AG, <http://www.scss.com.au/family/andrew/> ]
 *          2004-09-30  Reverted inline javascript image to transparent GIF. The
 *                      new XP SP2 'security' measures prevented the JS image
 *                      from working. [by AG]
 *          2004-10-22  Rewrote fixImage() to try and work around some reported
 *                      problems with PNGs vanishing! [by AG]
 *          2004-12-12  Fixed problem with PNGs not being restored after
 *                      printing. I have no idea how I missed this one! [by AG]
 *          2005-03-26  Fixed supported RE mis-identifying IE 5.0/Win98 as
 *                      'supported'.
 *
 */
/* <-- NOTE: remove the "\-trans" to process *all* PNGs */ 
//var IS_PNG = /\-trans\.png$/i; 
var IS_PNG = /\.png$/i; 
var supported = /MSIE (5\.5|[6789])/.test(navigator.userAgent) && navigator.platform == 'Win32';
var realSrc;
var blankSrc = 'images/blank.gif';
if (supported) fixImage();
function propertyChanged() {
  if (supported && event.propertyName == 'src') {
	var i = element.src.lastIndexOf(blankSrc);
	if (i == -1 || i != element.src.length - blankSrc.length) {
	  fixImage();
	}
  }
}
function fixImage() {
  if (realSrc && element.src == realSrc) {
	// this is an attempt to set the image to itself!
	// pointless - leave the filter as-is, restore the blank image
	element.src = blankSrc;
  } else {
	// set the image to something different
	if (IS_PNG.test(element.src)) {
	  // fixable PNG
	  realSrc = element.src;
	  element.src = blankSrc;
	  element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + realSrc + "',sizingMethod='scale')";
	} else {
	  // ordinary image - make sure the fix is removed
	  if (realSrc) {
		realSrc = null;
		element.runtimeStyle.filter = '';
	  }
	}
  }
}
function beforePrint() {
  if (realSrc) {
	supported = false;
	element.src = realSrc;
	element.runtimeStyle.filter = '';
	supported = true;
  }
}
function afterPrint() {
  if (realSrc) {
	var rs = realSrc;
	realSrc = null;
	element.src = rs;
  }
}
</script>
</public:component>
%%

also added the [[http://www.scss.com.au/ie7/blank.gif | blank.gif]] in images folder
 
IE5.5 and IE6 was able to handle transparencies after that

----
CategoryDevelopmentActions CategoryUserContributions