Dynamically inserting variable image sources into html pages

Here's how to use SSI to build a web page around
each picture automatically:

Thumbnail page

On the page which links to your pics you use links
of this format:

Pics.shtml page:

This is how you code the page which will have the
image name inserted via SSI.


Ok, you're done.
What follows is optional additions, changes, and debugging info.

Be sure to copy the SSI directive EXACTLY, with no extra spaces added in.
This will NOT work:


This also will NOT work:


It has to be exactly this:


You CAN also include path info before the variable:


Or as part of the link:


On many servers you can shorten the length of the link code
by naming the .shtml page index.shtml.
If the SSI (.shtml) page is placed at /pics/index.shtml,
your links would normally look like this:


However, like a page called pics/index.html, a page called pics/index.shtml
can be called with just:


Therefore, we can add the argument and shorten the whole link to:


If you look at the URL of the page you're reading right now,
you'll likely see that the same trick was used to create this page.
The URL of this page is:
http://www.webmastersguide.com/?htaccess-cgi/picssi.htm
Actually though, the full URL is:
http://www.webmastersguide.com/index.shtml?htaccess-cgi/picssi.htm

The index.shtml can be left out. In this case, I use the variable as
the frame source for the bottom half of this page, rather than an img source.

Using .htaccess mod_rewrite to automatically rewrite the URLs

So let's say you already have a big site the has all of the image links
already made. You could download Shotgun from our downloads page and
use it to change all the links. That's the method I prefer.
You can also let the server do this for you if you have mod_rewrite installed.
Simply leave you're image links alone and place the following text into
a file called .htaccess, which you then upload (as ASCII) into your /pics directory:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^http://yourdomain.com/pics.shtml [NC]
RewriteRule [^/]+\.(gif|jpg)$ http://yourdomain.com/pics.shtml?%{REQUEST_URI} [L,R]

This way the server automatically reroutes links to individual pictures,
istead it returns the pics.shtml page with the picture planted in the
middle of it.

Caveat - Many webmasters seem to have a lot of trouble getting
any kind of .htaccess directives to work right, so you may just change the links
using your favorite search and replace program, such as Shotgun.