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:


the new image action:
Unknown action ""i""



here is the action save it as actions/i.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
<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:
    function Link( ....
    ....
        return $url ? "<a class=\"ext\" href=\"$url\">$text</a>$external_link_tail" : $text;
    }


to:
    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.
img {vertical-align: middle;}



Smilies collections

You can find some nice smilies at 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 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 IE handling PNG's is very simple and it uses a behaviour understood by IE.

Added somewhere in the <head> in actions/header.php
<!--[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
  1. <public:component>
  2. <public:attach event="onpropertychange" onevent="propertyChanged()" />
  3. <public:attach event="onbeforeprint" for="window" onevent="beforePrint()" />
  4. <public:attach event="onafterprint" for="window" onevent="afterPrint()" />
  5. <script>
  6.  
  7. /*
  8.  * PNG Behavior
  9.  *
  10.  * This script was created by Erik Arvidsson (erik(at)eae.net)
  11.  * for WebFX (http://webfx.eae.net)
  12.  * Copyright 2002
  13.  *
  14.  * For usage see license at http://webfx.eae.net/license.html  
  15.  *
  16.  * Version: 1.01a
  17.  * Created: 2001-??-??  First working version
  18.  * Updated: 2002-03-28  Fixed issue when starting with a non png image and
  19.  *                      switching between non png images
  20.  *          2003-01-06  Fixed RegExp to correctly work with IE 5.0x
  21.  *          2004-04-25  Fixed PNG image printing, eliminated need for external
  22.  *                      GIF file, fixed intermittent uninitialised variable
  23.  *                      error [by AG, <http://www.scss.com.au/family/andrew/> ]
  24.  *          2004-09-30  Reverted inline javascript image to transparent GIF. The
  25.  *                      new XP SP2 'security' measures prevented the JS image
  26.  *                      from working. [by AG]
  27.  *          2004-10-22  Rewrote fixImage() to try and work around some reported
  28.  *                      problems with PNGs vanishing! [by AG]
  29.  *          2004-12-12  Fixed problem with PNGs not being restored after
  30.  *                      printing. I have no idea how I missed this one! [by AG]
  31.  *          2005-03-26  Fixed supported RE mis-identifying IE 5.0/Win98 as
  32.  *                      'supported'.
  33.  *
  34.  */
  35. /* <-- NOTE: remove the "\-trans" to process *all* PNGs */
  36. //var IS_PNG = /\-trans\.png$/i;
  37. var IS_PNG = /\.png$/i;
  38. var supported = /MSIE (5\.5|[6789])/.test(navigator.userAgent) && navigator.platform == 'Win32';
  39. var realSrc;
  40. var blankSrc = 'images/blank.gif';
  41. if (supported) fixImage();
  42. function propertyChanged() {
  43.   if (supported && event.propertyName == 'src') {
  44.     var i = element.src.lastIndexOf(blankSrc);
  45.     if (i == -1 || i != element.src.length - blankSrc.length) {
  46.       fixImage();
  47.     }
  48.   }
  49. }
  50. function fixImage() {
  51.   if (realSrc && element.src == realSrc) {
  52.     // this is an attempt to set the image to itself!
  53.     // pointless - leave the filter as-is, restore the blank image
  54.     element.src = blankSrc;
  55.   } else {
  56.     // set the image to something different
  57.     if (IS_PNG.test(element.src)) {
  58.       // fixable PNG
  59.       realSrc = element.src;
  60.       element.src = blankSrc;
  61.       element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + realSrc + "',sizingMethod='scale')";
  62.     } else {
  63.       // ordinary image - make sure the fix is removed
  64.       if (realSrc) {
  65.         realSrc = null;
  66.         element.runtimeStyle.filter = '';
  67.       }
  68.     }
  69.   }
  70. }
  71. function beforePrint() {
  72.   if (realSrc) {
  73.     supported = false;
  74.     element.src = realSrc;
  75.     element.runtimeStyle.filter = '';
  76.     supported = true;
  77.   }
  78. }
  79. function afterPrint() {
  80.   if (realSrc) {
  81.     var rs = realSrc;
  82.     realSrc = null;
  83.     element.src = rs;
  84.   }
  85. }
  86. </script>
  87. </public:component>


also added the blank.gif in images folder

IE5.5 and IE6 was able to handle transparencies after that

CategoryDevelopmentActions CategoryUserContributions
There are 2 comments on this page. [Show comments]
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki