Insert "Media:" links using "Insert image" button in Wiki

By rakekniven - Posted on 16 November 2009


If I insert an image, it is [[Image:Xyz.jpg]] and I can do that from the image button. I have documents that are uploaded into my wiki that I can include in wiki text via [[media:xyz.doc]].

But how to do that using FCKeditor button?


After googeling a lot I found the same question more than once but no good answer. It was time to code ... ;-) Open file "$IP/extensions/FCKeditor/plugins/mediawiki/fckplugin.js" in your favorite editor and search for "[[Image:".

Line 535
case 'img' :

 var imgRealHeight       = ( htmlNode.getAttribute( 'height' ) || '' ) + '';

    // rakekniven
    // following formats should be displayed

    if (imgName.EndsWith('.gif') || 
        imgName.EndsWith('.jpg') || 
        imgName.EndsWith('.png') || 
        imgName.EndsWith('.bmp')) {
        stringBuilder.push( '[[Image:' );
    } else {
        stringBuilder.push( '[[Media:' );

// rakekniven
// next line is not needed anymore
//  stringBuilder.push( '[[Image:' );


"if case" checks file extension and decides to use the "Image:" or "Media:" tag.

My code change works for me and may help you.

System: Mediawiki 1.15.1 with integration of FCKeditor 2.6.4.

Update 2010-03-16: 

Some people use file extensions in uppercase e.g. filename.JPG

To handle it I made some changes:

// following formats should be displayed
var lowerImgName        = imgName.toLowerCase();
if (lowerImgName.EndsWith('.gif') ||
    lowerImgName.EndsWith('.jpg') ||
    lowerImgName.EndsWith('.jpeg') ||
    lowerImgName.EndsWith('.png') ||
    lowerImgName.EndsWith('.svg') ||
    stringBuilder.push( '[[Image:' );
} else {
    stringBuilder.push( '[[Media:' );


Hi there, I dont know if I am writing in a proper board but I have got a problem with activation, link i receive in email is not working...,

How did you request a link like that?

Could you tell me the steps you have done?

Worked great. I modified the first line to add .svg & .jpeg formats:

if (imgName.EndsWith('.gif') || imgName.EndsWith('.jpg') || imgName.EndsWith('.jpeg') || imgName.EndsWith('.png') || imgName.EndsWith('.bmp') || imgName.EndsWith('.svg')) {

& I added these lines to LocalSettings.php, so I could upload these formats:

$wgFileExtensions[] = 'svg';
$wgFileExtensions[] = 'doc';
$wgFileExtensions[] = 'pdf';

Chad von Nau

Well done article that. I'll make sure to use it wesily.

I found your page while looking for a way to upload and embed a file in one operation.  While this doesn't do that, it's still helpful and your directions were very simple and straightforward.  It's working great.  Thank you.

follow me on twitter