Banner Generator
The following action can be used generate colored banners on wiki pages by using GD (required on the server) and fonts provided by the administrator. (TTF fonts must me placed in a directory "fonts" in a directory called scripts in the wikka root). On my server with 6 installed fonts it provides the following output.....
http://gmbtst.msvu.ca/wikitest/bannermaker.jpg
Place this code in the actions directory as banner.php
<?php
/**
* banner.php Version 1.1 - January 7, 2005
* PURPOSE: With this action a banner can be generated with set-able size, background color, font size & font.
* USE: {{banner text="Sample Text" [bgcolor="blue"] [textcolor="red"] [size="20"] [font = "1"]}}
* Parameters in square brackets are optional....defaults to blue background, blacktext, 12 point, verdana
* Available colors are blue, red, purple, yellow, green, grey, white, black
* @author GmBowen (http://wikka.jsnx.com/GmBowen) (with help from JavaWoman), licensed under GPL
*
* REQUIRES GD2 on the server
*
* TTF Fonts must be obtained & uploaded by administrator & placed in a directory "fonts" in the actions directory
*/
// set up variables
$site_base = $this->GetConfigValue("base_url");
// Below line might need to be modified to whatever is appropriate for your installation .... 'wikka.php?wakka='
if ( substr_count($site_base, 'wakka.php?wakka=') > 0 ) $site_base = substr($site_base,0,-16);
$generator = $site_base."actions/bannergenerator.php?";
$buttoncolor = $bgcolor;
// Set below fonts to those present in fonts directory (which the admin makes in the actions directory)
// Set the first font to that which you wish to be your default if a font isn't specified
// The administrator can add as many different fonts as they wish
if(!$font) {$font = "1";}
if ($font == "1"){$font = "verdana.ttf";}
if ($font == "2"){$font = "toby.ttf";}
if ($font == "3"){$font = "times.ttf";}
if ($font == "4"){$font = "vera.ttf";}
if ($font == "5"){$font = "oldeng.ttf";}
if ($font == "6"){$font = "courierbld.ttf";}
// create img tag
echo '<img src="'.$generator.'buttoncolor='.$buttoncolor.'&textcolor='.$textcolor.'&font_size='.$size.'&font_file='.$font.'&text='.$text.'" alt="'.$text.'" border="0" />';
?>
/**
* banner.php Version 1.1 - January 7, 2005
* PURPOSE: With this action a banner can be generated with set-able size, background color, font size & font.
* USE: {{banner text="Sample Text" [bgcolor="blue"] [textcolor="red"] [size="20"] [font = "1"]}}
* Parameters in square brackets are optional....defaults to blue background, blacktext, 12 point, verdana
* Available colors are blue, red, purple, yellow, green, grey, white, black
* @author GmBowen (http://wikka.jsnx.com/GmBowen) (with help from JavaWoman), licensed under GPL
*
* REQUIRES GD2 on the server
*
* TTF Fonts must be obtained & uploaded by administrator & placed in a directory "fonts" in the actions directory
*/
// set up variables
$site_base = $this->GetConfigValue("base_url");
// Below line might need to be modified to whatever is appropriate for your installation .... 'wikka.php?wakka='
if ( substr_count($site_base, 'wakka.php?wakka=') > 0 ) $site_base = substr($site_base,0,-16);
$generator = $site_base."actions/bannergenerator.php?";
$buttoncolor = $bgcolor;
// Set below fonts to those present in fonts directory (which the admin makes in the actions directory)
// Set the first font to that which you wish to be your default if a font isn't specified
// The administrator can add as many different fonts as they wish
if(!$font) {$font = "1";}
if ($font == "1"){$font = "verdana.ttf";}
if ($font == "2"){$font = "toby.ttf";}
if ($font == "3"){$font = "times.ttf";}
if ($font == "4"){$font = "vera.ttf";}
if ($font == "5"){$font = "oldeng.ttf";}
if ($font == "6"){$font = "courierbld.ttf";}
// create img tag
echo '<img src="'.$generator.'buttoncolor='.$buttoncolor.'&textcolor='.$textcolor.'&font_size='.$size.'&font_file='.$font.'&text='.$text.'" alt="'.$text.'" border="0" />';
?>
This file is REQUIRED in a directory called scripts in the wikka root as bannergenerator.php
<?
// Adapted from a script provided at http://www.geek247.net/ and originally written by
// William Magliano. Modified by GMBowen 2005 for inclusion in Wikka Wiki &
// functionality increased. Released under GPL.
// Script REQUIRES GD2 on the server
$font_file = "./fonts/$font_file";
$defaultFontSize = 12;
if(!$font_size)// If no font size has been passed default to 12pt.
{
$font_size = $defaultFontSize;
}
$angle = 0;
$defaultbgColor = "blue";
$defaulttxtColor = "black";
if(!$buttoncolor)//If no button color is passed make it Blue.
{
$buttoncolor = $defaultbgColor;
}
if(!$textcolor)//If no text color is passed make it Black.
{
$textcolor = $defaulttxtColor;
}
//$textcolor= "red";
$y_start = $font_size*1.5;
$x_start = 5;
$double_text = $text;
$height = $font_size*2;
$bounding_box = imagettfbbox($font_size, 0, $font_file, $text);
$max_width = $bounding_box[2] - $bounding_box[0]+12;
// Create image and allocate colors
$im = imagecreate(($max_width+2), /*15*/$height);
$matte = imagecolorallocate($im, 153, 153, 153);
// allocate code for colors for background
if($buttoncolor == "blue")
{
$outline = imagecolorallocate($im, 0, 105, 179);// dark
$shadow = imagecolorallocate($im, 113, 196, 240);// light
$background = imagecolorallocate($im, 153, 176, 200);//lighter - brighter
$hilite = imagecolorallocate($im, 240, 243, 247);//lightest
}
if($buttoncolor == "red")
{
$outline = imagecolorallocate($im, 255,0,0);// dark
$shadow = imagecolorallocate($im,255,51,51);// light
$background = imagecolorallocate($im, 255,102,102);//lighter - brighter
$hilite = imagecolorallocate($im, 255,204,204);//lightest
}
if($buttoncolor == "purple")
{
$outline = imagecolorallocate($im, 255,0,255);// dark
$shadow = imagecolorallocate($im,255,51,255);// light
$background = imagecolorallocate($im, 255,102,255);//lighter - brighter
$hilite = imagecolorallocate($im, 255,204,255);//lightest
}
if($buttoncolor == "yellow")
{
$outline = imagecolorallocate($im, 153,153,51);// dark
$shadow = imagecolorallocate($im,204,204,102);// light
$background = imagecolorallocate($im,255,255,102);//lighter - brighter
$hilite = imagecolorallocate($im, 255,255,204);//lightest
}
if($buttoncolor == "green")
{
$outline = imagecolorallocate($im, 0,153,0);// dark
$shadow = imagecolorallocate($im,0,204,0);// light
$background = imagecolorallocate($im,102,204,102);//lighter - brighter
$hilite = imagecolorallocate($im, 204,255,204);//lightest
}
if($buttoncolor == "grey")
{
$outline = imagecolorallocate($im, 102,102,102);// dark
$shadow = imagecolorallocate($im,153,153,153);// light
$background = imagecolorallocate($im,204,204,204);//lighter - brighter
$hilite = imagecolorallocate($im, 255,255,255);//lightest
}
if($buttoncolor == "white")
{
$outline = imagecolorallocate($im, 255,255,255);// white
$shadow = imagecolorallocate($im,255,255,255);// white
$background = imagecolorallocate($im,255,255,255);// white
$hilite = imagecolorallocate($im, 255,255,255);// white
}
if($buttoncolor == "black")
{
$outline = imagecolorallocate($im, 0,0,0);// black
$shadow = imagecolorallocate($im,0,0,0);// black
$background = imagecolorallocate($im,0,0,0);// black
$hilite = imagecolorallocate($im, 0,0,0);// black
}
// allocate code for colors for the text
if($textcolor == "blue")
{
$text_color = imagecolorallocate($im, 153, 176, 200);
}
if($textcolor == "red")
{
$text_color = imagecolorallocate($im, 255, 102, 102);
}
if($textcolor == "purple")
{
$text_color = imagecolorallocate($im, 255, 102, 255);
}
if($textcolor == "yellow")
{
$text_color = imagecolorallocate($im, 255, 255, 102);
}
if($textcolor == "green")
{
$text_color = imagecolorallocate($im, 102, 204, 102);
}
if($textcolor == "grey")
{
$text_color = imagecolorallocate($im, 204, 204, 204);
}
if($textcolor == "white")
{
$text_color = imagecolorallocate($im, 255, 255, 255);
}
if($textcolor == "black")
{
$text_color = imagecolorallocate($im, 0, 0, 0);
}
imagefilledrectangle($im, 1, 1, $max_width, ($height-2), $background);
imageline($im, 0, 1, 0, ($height-2), $outline);
imageline($im, 1, 0, $max_width, 0, $outline);
imageline($im, ($max_width+1), 1, ($max_width+1), ($height-2), $outline);
imageline($im, 1, ($height-1), $max_width, ($height-1), $outline);
imageline($im, 2, 1, ($max_width-1), 1, $hilite);
imageline($im, $max_width, 2, $max_width, ($height-3), $hilite);
imageline($im, 1, 1, 1, ($height-3), $shadow);
imageline($im, 2, ($height-2), $max_width, ($height-2), $shadow);
// Position the text
$line_width = imagettfbbox($font_size, 0, $font_file, $text);
$horz_pos = (($max_width - $line_width[2] - $line_width[0]) / 2);
// Write the text to the image
imagettftext($im, $font_size, $angle, $x_start, $y_start, $text_color, $font_file, $double_text);
// Display and destroy the image
header("Content-type:image/png");
imagepng($im);
imagedestroy($im);
?>
// Adapted from a script provided at http://www.geek247.net/ and originally written by
// William Magliano. Modified by GMBowen 2005 for inclusion in Wikka Wiki &
// functionality increased. Released under GPL.
// Script REQUIRES GD2 on the server
$font_file = "./fonts/$font_file";
$defaultFontSize = 12;
if(!$font_size)// If no font size has been passed default to 12pt.
{
$font_size = $defaultFontSize;
}
$angle = 0;
$defaultbgColor = "blue";
$defaulttxtColor = "black";
if(!$buttoncolor)//If no button color is passed make it Blue.
{
$buttoncolor = $defaultbgColor;
}
if(!$textcolor)//If no text color is passed make it Black.
{
$textcolor = $defaulttxtColor;
}
//$textcolor= "red";
$y_start = $font_size*1.5;
$x_start = 5;
$double_text = $text;
$height = $font_size*2;
$bounding_box = imagettfbbox($font_size, 0, $font_file, $text);
$max_width = $bounding_box[2] - $bounding_box[0]+12;
// Create image and allocate colors
$im = imagecreate(($max_width+2), /*15*/$height);
$matte = imagecolorallocate($im, 153, 153, 153);
// allocate code for colors for background
if($buttoncolor == "blue")
{
$outline = imagecolorallocate($im, 0, 105, 179);// dark
$shadow = imagecolorallocate($im, 113, 196, 240);// light
$background = imagecolorallocate($im, 153, 176, 200);//lighter - brighter
$hilite = imagecolorallocate($im, 240, 243, 247);//lightest
}
if($buttoncolor == "red")
{
$outline = imagecolorallocate($im, 255,0,0);// dark
$shadow = imagecolorallocate($im,255,51,51);// light
$background = imagecolorallocate($im, 255,102,102);//lighter - brighter
$hilite = imagecolorallocate($im, 255,204,204);//lightest
}
if($buttoncolor == "purple")
{
$outline = imagecolorallocate($im, 255,0,255);// dark
$shadow = imagecolorallocate($im,255,51,255);// light
$background = imagecolorallocate($im, 255,102,255);//lighter - brighter
$hilite = imagecolorallocate($im, 255,204,255);//lightest
}
if($buttoncolor == "yellow")
{
$outline = imagecolorallocate($im, 153,153,51);// dark
$shadow = imagecolorallocate($im,204,204,102);// light
$background = imagecolorallocate($im,255,255,102);//lighter - brighter
$hilite = imagecolorallocate($im, 255,255,204);//lightest
}
if($buttoncolor == "green")
{
$outline = imagecolorallocate($im, 0,153,0);// dark
$shadow = imagecolorallocate($im,0,204,0);// light
$background = imagecolorallocate($im,102,204,102);//lighter - brighter
$hilite = imagecolorallocate($im, 204,255,204);//lightest
}
if($buttoncolor == "grey")
{
$outline = imagecolorallocate($im, 102,102,102);// dark
$shadow = imagecolorallocate($im,153,153,153);// light
$background = imagecolorallocate($im,204,204,204);//lighter - brighter
$hilite = imagecolorallocate($im, 255,255,255);//lightest
}
if($buttoncolor == "white")
{
$outline = imagecolorallocate($im, 255,255,255);// white
$shadow = imagecolorallocate($im,255,255,255);// white
$background = imagecolorallocate($im,255,255,255);// white
$hilite = imagecolorallocate($im, 255,255,255);// white
}
if($buttoncolor == "black")
{
$outline = imagecolorallocate($im, 0,0,0);// black
$shadow = imagecolorallocate($im,0,0,0);// black
$background = imagecolorallocate($im,0,0,0);// black
$hilite = imagecolorallocate($im, 0,0,0);// black
}
// allocate code for colors for the text
if($textcolor == "blue")
{
$text_color = imagecolorallocate($im, 153, 176, 200);
}
if($textcolor == "red")
{
$text_color = imagecolorallocate($im, 255, 102, 102);
}
if($textcolor == "purple")
{
$text_color = imagecolorallocate($im, 255, 102, 255);
}
if($textcolor == "yellow")
{
$text_color = imagecolorallocate($im, 255, 255, 102);
}
if($textcolor == "green")
{
$text_color = imagecolorallocate($im, 102, 204, 102);
}
if($textcolor == "grey")
{
$text_color = imagecolorallocate($im, 204, 204, 204);
}
if($textcolor == "white")
{
$text_color = imagecolorallocate($im, 255, 255, 255);
}
if($textcolor == "black")
{
$text_color = imagecolorallocate($im, 0, 0, 0);
}
imagefilledrectangle($im, 1, 1, $max_width, ($height-2), $background);
imageline($im, 0, 1, 0, ($height-2), $outline);
imageline($im, 1, 0, $max_width, 0, $outline);
imageline($im, ($max_width+1), 1, ($max_width+1), ($height-2), $outline);
imageline($im, 1, ($height-1), $max_width, ($height-1), $outline);
imageline($im, 2, 1, ($max_width-1), 1, $hilite);
imageline($im, $max_width, 2, $max_width, ($height-3), $hilite);
imageline($im, 1, 1, 1, ($height-3), $shadow);
imageline($im, 2, ($height-2), $max_width, ($height-2), $shadow);
// Position the text
$line_width = imagettfbbox($font_size, 0, $font_file, $text);
$horz_pos = (($max_width - $line_width[2] - $line_width[0]) / 2);
// Write the text to the image
imagettftext($im, $font_size, $angle, $x_start, $y_start, $text_color, $font_file, $double_text);
// Display and destroy the image
header("Content-type:image/png");
imagepng($im);
imagedestroy($im);
?>
CategoryUserContributions
I looked at the http://www.geek247.net/ site and the code shown there and could not find any license. Did you contact the author William Magliano to ask what the licensing for his code is?
- Wikka version: 1.1.5.3
- PHP version: 4.3.3 with GD2
- I stored a few TTF fonts (including default verdana.ttf) in the actions/fonts directory
All I get is the text displayed but no image (the red X displayed instead).
Any idea?
'wikka.php?wakka='
and make sure that those correspond with what your system is using.
<img src="http://135.1.1.227/wikka/actions/bannergenerator.php?buttoncolor=blue&font_size=20&font_file=verdana.ttf&text=Sample Text" alt="Sample Text" border="0" /> <br />
php 4.3.9/gd2/wikka 1.1.5.3
"check the banner.php file wrt this line
'wikka.php?wakka='
and make sure that those correspond with what your system is using." <<< dont understand tis :S
so i left it the way as it was.
http://gmbowen.educ.unb.ca/wiki/actions/bannergenerator.php?buttoncolor=blue&font_size=20&font_file=verdana.ttf&text=SampleText
so that means the problem has to be in the bannergenerator script. OR in how GD is called. Are you sure GD works on your server?
Um, hmmm.....did you upload the font file as binary? I think you have to. And the "fonts" directory is IN the actions directory? Hmmm...I've checked with your code...if the fonts aren't "there" or the font directory is wrong you still get a little blue box. Your url reference doesn't generate one of those, just an error, so that cannot be the problem (if you want to see what I mean, misname the verdana file above in the http:// statement and you'll get the little blue box). I'm not sure how imagepng works....maybe it needs a writeable directory to temporarily place an image in? My server software is the most annoyingly difficult one to deal with on the planet, so I'm rather amazed others are having problems.
What means upload the font file as binary? I am using a windows base system so I just copied the relevant .ttf files from the windows fonts directory to the actions/fonts one.
Warning: imagettfbbox(): Could not read font in /usr/local/www/wiki/actions/bannergenerator.php on line 37
Warning: imagettfbbox(): Could not read font in /usr/local/www/wiki/actions/bannergenerator.php on line 152
Warning: imagettftext(): Could not read font in /usr/local/www/wiki/actions/bannergenerator.php on line 156
Warning: Cannot modify header information - headers already sent by (output started at /usr/local/www/wiki/actions/bannergenerator.php:37) in /usr/local/www/wiki/actions/bannergenerator.php on line 159
‰PNG
Putting the file bannergenerator.php in the actions directory is NOT a good idea since it is not itself an action. You cannot put {{bannergenerator}} in a page and expect it to generate page content. Besides, it would break all sorts of automatic functionality that will operate on an actions directory, expecting it realy contains nothing BUT actions files.
Best to put it in a separate subdirectory (i.e., not below actions either!); a 3rd party directory might be more appropriate, or maybe we'd need a "utilities" direcory. See also WikkaCodeStructure.
sorry i vewed in firefox be4
lol i am bothering the sht outta you guys with my idiotism
hi there
with a red x?
JW: Good points. Maybe a "scripts" directory? That way it could hold js, php etc. I'll see what I can do modifying the code.
with a red x?"
exactly
http://ptokaxwiki.no-ip.com/actions/bannergenerator.php?buttoncolor=blue&font_size=20&font_file=verdana.ttf&text=SampleText
Warning: imagettfbbox(): Could not read font in /usr/local/www/wiki/actions/bannergenerator.php on line 152
Warning: imagettftext(): Could not read font in /usr/local/www/wiki/actions/bannergenerator.php on line 157
Warning: Cannot modify header information - headers already sent by (output started at /usr/local/www/wiki/actions/bannergenerator.php:37) in /usr/local/www/wiki/actions/bannergenerator.php on line 160
‰PNG
Please see my proposal on WikkaCodeStructure for an extra directory. I understand what you mean with 'scripts' (and the change is certainly an improvement) - but essentally all php files are scripts. I tried to come up with a slightly more descriptive name, as well as a guideline for how to use it. Any comments on that page, please!
And no, it's not cast in stone - yet. ;-)
I implemetned a limit to the length of the text and the size of the letters. ( some vulnerability was hiding there ;)
moreover I think a menu system would be slow to load .. y not make an activity Graph of the Wiki ? Additions/Edits/Comments/UserRegistrations per day maybe ?
not slow to load....should check the example. It's one that users can embed on pages using GD label generation. The graph package is to generate graphs using the wiki so can embed data graphs on pages easily. This uses a graphing class and forms on the wiki page. The work in progress is at http://gmbowen.educ.unb.ca/wiki/wakka.php?wakka=SandBox6 (that's my development server....so if you're checking this page in the future, it might be "down"....or the server might be "down"....both are "up" now for development purposes).
WRT using HTML color names vs. codes......it was a deliberate choice. For most web users using color codes are "unfriendly"....my target audience is kids, and "color names" make more sense to them. It's a question of who our 'target users' are for the wiki....and I'd say that in some ways that's a matter of implicit tension/contention here. I tend to think of two "audiences".....kids (middle-school up), and somewhat web-familiar (and even unfamiliar) teachers...and essentially develop tools I think they can use without too steep a learning curve (I work with both groups reasonably frequently) and without having to have someone around to tell them what to do.
Given this argument, I'd propose that when you mount your code rather than replacing what's there, convert the page into BannerGenerator I and BannerGenerator II and leave both approaches available.
I look forward to seeing your code to restrict length/size so that vulnerabilities cannot be exploited....I'll implement that into this code. Cheers,
IMO server-generated images should only be used when XHTML+CSS is not enough.
My2cents.
( M$ owns the CSS patent .. :( luckily they are not taking any money for it .. )
I personally occupy my self with this action cause I am getting to know the GD funcs .. I wanna delve in there too ..;)
1) charts and graphs, i.e. cases in which you need to display complex sets of data stored in a database (see for example: http://www.aditus.nu/jpgraph/jpg_shortgallery.php)
2) image manipulation, e.g. converting format, resizing, rotating, cropping an existing image.
Layout elements that don't need much server elaboration should be really taken care of by stylesheets. For another example of what you can do with CSS for menus, take a look at:
http://www.stunicholls.myby.co.uk/menus/index.html
Sure.....as I said, learning about GD.....see where I'm going with it here....
http://gmbowen.educ.unb.ca/wiki/wakka.php?wakka=GraphMaker ....I think exactly what you're suggesting for using GD.
Those *are* nice link buttons, but how would you turn those into user-controlled buttons that a wiki user could use to make on-page buttons. I'm sure there's a way, but I don't know it eh?
http://gmbowen.educ.unb.ca/wiki/wakka.php?wakka=SandBox6
It kinda gives me ideas for a front-end interface for bannermaker that would demo what the banner looked like & generate the code to place on the page. One could incorporate a color-picker and everything. Hmmm...... in FACT, having a interface to generate JavaWoman's table action code might also be useful. It'd be best if could read/parsed back in the code from a textarea box so that it could be re-edited. THAT would be really handy.