MediaWiki:MediaViewerDisplay.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

// MediaViewer hook
mw.hook('mmv.metadataPanel.render').add(function(panel, imageData) {
    var fileTitle = imageData.title;

    // API call to get wikitext
    new mw.Api().get({
        action: 'parse',
        page: fileTitle,
        prop: 'wikitext',
        formatversion: 2
    }).done(function(data) {
        if (!data.parse || !data.parse.wikitext) return;
        var wikitext = data.parse.wikitext;

        // Parse template parameters
        var fields = {};
        ['title','chapter','illustration','illustrator','year','tags'].forEach(function(key) {
            var regex = new RegExp(key + '\\s*=\\s*([^\\n|}]*)');
            var match = wikitext.match(regex);
            if (match) fields[key] = match[1].trim();
        });

        // Build container
        var $container = $('<div>').addClass('mmv-custom-metadata');

        if (fields.title) $container.append($('<div>').addClass('mmv-title').text(fields.title));

        var infoParts = [];
        if (fields.chapter) infoParts.push('Chapter: ' + fields.chapter);
        if (fields.illustration) infoParts.push('Illustration: ' + fields.illustration);
        if (fields.illustrator) infoParts.push('Illustrator: ' + fields.illustrator);
        if (fields.year) infoParts.push('Year: ' + fields.year);
        if (infoParts.length) $container.append($('<div>').addClass('mmv-info').text(infoParts.join(' • ')));

        // Tags as badges
        if (fields.tags) {
            var $tags = $('<div>').addClass('mmv-tags');
            fields.tags.split(',').forEach(function(tag){
                $tags.append($('<span>').addClass('mmv-tag').text(tag.trim()));
            });
            $container.append($tags);
        }

        // Insert into MediaViewer
        panel.$el.append($container);
    });
});