About "SIIR"
that is, scalable inline image replacement
NOTE: This page is a mirror. The original page has been taken down by the author. The images here were rendered using the original scripts. See the xhtml+xml compliance test suite for some modifications and improvements to the scripts.
Welcome! It would appear that through either word of mouth or by perusing through my code you have stumbled upon this little mini-website-tutorial-dingy. Sorry, there's no grand prize for discovering the secret toy at the bottom of the box, but if you pay close attention, I'll give you some valuable information and a free program at that! Scalable Inline Image Replacement, more commonly known (to me, at least) as SIIR, is the dynamic image replacement method that I, Ryan Petrello, have personally developed and continually use on all of my client websites through AxisFive Media Solutions.
The SIIR program serves to basically change dynamic text on your website into pretty generated images with any font of your liking. The real magic of SIIR comes when you examine the XHTML source of this page. Those beautiful headings you see generated above are not pre-made images. They're merely <h1> and <h2> tags with text inside!
How It Works
in psuedo-code-english, i promise
In the likely case that you're a weird nerd like me and are interested in the inner workings of this program, here's the most basic description I can conjure up. In its most basic form, here's a generalized description of how SIIR works:
- In a seperate JavaScript file named external.js, there is a variable that stores the XHTML tags that will be converted. This looks like this:
var elements=new Array("h1","h2");Any elements within this JavaScript variable will be replaced with an image when the page is loaded.
- In the same Javascript file, an array is used to store the settings for individual XHTML tags. The settings look a bit like this:
var settings=new Array();
settings["h1"]=new Array();
settings["h1"]["padding"]=3;
settings["h1"]["bgcolor"]="FFFFFF";
settings["h1"]["transparentbg"]=0;
settings["h1"]["font_color"]="333366";
settings["h1"]["shadow_color"]="D6D6D6";
settings["h1"]["font_file"]="lexo.ttf";
settings["h1"]["font_size"]=60;
settings["h1"]["antialias"]=1;
- In the same Javascript file, there's another variable that stores the path to a website address of a PHP file called generate.php. This file is what essentially makes the image. The Javascript sends your defined settings (the code seen above) to the PHP program through an <img> tag. PHP then creates the image based on your approriate settings and returns the generated image. The JavaScript portion of this is a direct URL to your generate.php program:
var path="http://yourwebsite.com/siir/address/to/siir";
Other Tidbits
miscellaneous features, tidbits, etc...
- SIIR is scalable, a very nifty feature. Two functions called "SIIR_add()" and "SIIR_subtract()" are included in the JavaScript file, external.js, for you to experiment with freely. For an example of their most basic use,
- or - - As one would imagine, bandwidth could become a potential problem here. Replacing all of the <h1> tags on a very large site, specifically one with dynamic content could be very server-intensive. Luckily, the PHP file included in the downloads section, generate.php, includes a pre-made caching program that saves and caches images that have previously been created. To enable this cache, simply add a folder named "/cache" and CHMOD it to 700.
- As one would imagine, the number of files inside your "/cache" folder could grow exponentially if left alone. What if somebody views an older generated image that is never viewed again? Will this image sit idle on your server, using precious filespace, forever? Without some sort of way to clean this folder periodically, it could grow to tremendous sizes, especially on a larger commercial website! A function is included in the generate.php file that periodically removes cache clutter (that is, files that have not been accessed in a certain period of time).
- For the accessibility freaks - before you pounce on me, relax. I've still got a few tricks up my sleeve. For those who have images turned off on their browsers, each generated <img> tag is equipped with an alt attribute; if you have images turned off, you'll simply see the original text. Similarly, if you have JavaScript turned off, the entire sequence will fail to commence, and the original text will be left to be styled by your CSS file(s).
- Keep in mind that with this method, you can use almost any truetype font you have at your disposal. Simply upload the .tff (these can be found on your computer at C:/Windows/Fonts) to the same directory where your generate.php file resides. Then, in your the external.js JavaScript file, simply edit the following line so that it points to the font file of your choosing:
settings["h1"]["font_file"]="fontName.ttf";
- Another problem that arises with this program is other people who wish to steal your bandwidth. If somebody were to set up an SIIR JavaScript file on their website and simply link to your generate.php file, your server would do all the hard image-generating work. This is kin to somebody hotlinking your images, and may be prevented in the same way. In the folder in which you keep your generate.php file, simply upload an .htaccess file with the following code:
IndexIgnore *
RewriteEngine on
RewriteCond %{HTTP_REFERER} ^$ [OR]
RewriteCond %{HTTP_REFERER} !^http://(www\.)?yourwebsite\.com.*$ [NC]
RewriteRule .* http://yourwebsite.com/dontStealMyBandwidthJerk.html [R,L]
System Requirements
what you need for it to work
For SIIR to work correctly, you need a web server that has PHP4.2 or greater correctly compiled with the GD Library version 1.6 or greater. In the setup, make sure that you enable support for PNG and Freetype fonts, as these are the backbones of the SIIR program.
While SIIR works nicely with this setup, problems have arisen with users running PHP5. This is currently being investigated; if you're having PHP5 issues, expect a fix for this soon.
For information on installing the GD library with your PHP installation, please refer to PHP: Image Functions
For info on your server's PHP version, run the following PHP code:
<?php
php_info();
?>
For info on your server's GD setup, run the following PHP code:
<?php
var_dump(gd_info());
?>