As discussed previously, I need an automated way to put clickable (i.e., client-side image-mapped) images on wiki pages. Jan Steinman showed me a cute way to do this (see below), using raw HTML. Although I've gotten it to work for me, I've found some oddities in the way that addresses (e.g., file names, URLs) get interpreted.
What I'm hoping for is a way to use some relatively short and simple addresses for the images and associated pages. Ideally, I'd be able to get to uploaded images, using a name such as 'Image:Segwayabbeyroad.jpg', rather than having to use my own directory or reverse engineer path names such as 'images/3/3a/Segwayabbeyroad.jpg'.
I realize that I'm off in an unsupported area, but perhaps some of you have had (and resolved) similar issues. Any helpful advice will be greatly appreciated.
I have two copies of the image, located at:
images/3/3a/Segwayabbeyroad.jpg images_raw/Segwayabbeyroad.jpg
The saved page can be viewed at
http://www.cfcl.com/rdm/MW/index.php/IM_X1
Here's the code for the page:
============================= This image shows up.
[[Image:Segwayabbeyroad.jpg]]
<RawHtml> <p> These two images, not surprisingly, don't show up at all.
<p>A <img src='Image:Segwayabbeyroad.jpg' usemap='#foo'>
<p>B <img src='http://www.cfcl.com/rdm/mediawiki/index.php?title=Image:Segwayabbeyroad.jpg' usemap='#foo'>
<p> These two images only show up in preview mode.
<p>C <img src='images/3/3a/Segwayabbeyroad.jpg' usemap='#foo'>
<p>D <img src='images_raw/Segwayabbeyroad.jpg' usemap='#foo'>
<p> These two images show up in both preview and save mode.
<p>E <img src='http://www.cfcl.com/rdm/mediawiki/images_raw/Segwayabbeyroad.jpg' usemap='#foo'>
<p>F <img src='/rdm/mediawiki/images_raw/Segwayabbeyroad.jpg' usemap='#foo'>
<p> The left-most image-map links (George, Paul) work in preview mode, but not after a "Save page". The other two work in both modes.
<map name="foo">
<area coords=" 0, 0, 83, 199" href="?title=George">
<area coords=" 84, 0,167, 199" href="./index.php?title=Paul">
<area coords="168, 0,251, 199" href="/rdm/mediawiki/index.php?title=Ringo">
<area coords="252, 0,332, 199" href="/rdm/mediawiki/index.php?title=John"> </map> </RawHtml> =============================
Finally, here's RawHtml.php:
============================= <?php # RawHtml.php - raw HTML extension # # Defines the tag pair <RawHtml></RawHtml>. # Sends the content out without any processing. # # To use, include this file into your LocalSettings.php # To configure, set members of $wgRawHtml after the inclusion. # # include 'RawHtml.php'; # # $wgRawHtml = array('JoeUser', 'JoeUserBot') # # Adapted from code by Jan Steinman Jan@Bytesmiths.com
class raw_html_settings { };
$wgRawHtml = new raw_html_settings; $wgExtensionFunctions[] = 'wf_raw_html_ext';
function wf_raw_html_ext() {
global $wgParser;
$wgParser->setHook('RawHtml', 'render_raw_html'); }
function render_raw_html($raw_html_src, $style='') {
return $raw_html_src; } ?> =============================
Rich Morin wrote:
<p> These two images only show up in preview mode.
<p>C <img src='images/3/3a/Segwayabbeyroad.jpg' usemap='#foo'> <p>D <img src='images_raw/Segwayabbeyroad.jpg' usemap='#foo'>
<p> These two images show up in both preview and save mode.
<p>E <img src='http://www.cfcl.com/rdm/mediawiki/images_raw/Segwayabbeyroad.jpg' usemap='#foo'> <p>F <img src='/rdm/mediawiki/images_raw/Segwayabbeyroad.jpg' usemap='#foo'>
This shouldn't be a surprise. In the first two examples above, you're using _relative_ URLs. The browser converts them to absolute URLs based on the URL of the page you're viewing. In preview mode that URL will be something like:
http://www.cfcl.com/rdm/mediawiki/index.php?title=Foo&action=submit
which will yield the expected image URLs. When viewing the article in normal mode, however, the page URL will look like:
http://www.cfcl.com/rdm/wiki/Foo
which causes the browser to try to fetch an image named:
http://www.cfcl.com/rdm/wiki/images_raw/Segwayabbeyroad.jpg
MediaWiki interprets that as a request for an _article_ named "images_raw/Segwayabbeyroad.jpg", which obviously doesn't exists. (And even if it did, it would be an article, not an image file.)
wikitech-l@lists.wikimedia.org