User:Isaacl/script/custom-logo-replacement

From Wikipedia, the free encyclopedia

The User:Isaacl/script/custom-logo-replacement user script allows users to define custom plugin functions that control when the Wikipedia logo is replaced. The script implements two plugin functions as examples:

  • CustomLogoReplacement.birthdayCelebration: replaces the logo with an image of Wikipedia's 25th birthday mascot, Baby Globe, on biography articles when it's the subject's birthday.[1]
  • CustomLogoReplacement.randomReplacement: replaces the logo with a replacement image chosen at random from the configured replacement images. Various Baby Globe replacement images are configured by default.
DescriptionSupports custom plugin functions to control when Wikipedia logo is replaced
Authorisaacl
Statusreleased
First releasedApril 6, 2026; 14 days ago (2026-04-06)
Quick facts Custom logo replacement, Description ...
User script
Custom logo replacement
DescriptionSupports custom plugin functions to control when Wikipedia logo is replaced
Authorisaacl
Statusreleased
First releasedApril 6, 2026; 14 days ago (2026-04-06)
Version1.0
UpdatedApril 6, 2026; 14 days ago (2026-04-06)
SourceUser:isaacl/script/custom-logo-replacement.js
Close

Examples

The following code can be placed in your common.js file to enable the CustomLogoReplacement.birthdayCelebration plugin function and install the script:

mw.hook('CustomLogoReplacement.initialLoad').add(function (){
    CustomLogoReplacement.addReplacementPlugin(
      CustomLogoReplacement.birthdayCelebration
    );
});

importScript( 'User:isaacl/script/custom-logo-replacement.js' ); // Backlink: [[User:isaacl/script/custom-logo-replacement.js]]

The following code can be placed in your common.js file to enable the CustomLogoReplacement.randomReplacement plugin function and install the script. It will choose one of the configured replacement logos at random as a replacement.

mw.hook('CustomLogoReplacement.initialLoad').add(function (){
/* To remove the default replacement images and specify your own:
    CustomLogoReplacement.clearReplacementImages();
    CustomLogoReplacement.addReplacementImage('ReferenceNameForImage',
        '... full URL to image starting with https://upload.wikimedia.org/ ...');
    ... repeat for each image being added ...
 */
    CustomLogoReplacement.addReplacementPlugin(
      CustomLogoReplacement.randomReplacement
    );
});

importScript( 'User:isaacl/script/custom-logo-replacement.js' ); // Backlink: [[User:isaacl/script/custom-logo-replacement.js]]

Page- and category-based logos

User:isaacl/script/custom-logo-replacement/serendipitous.js provides an example of configuring logos based on page or category. It also calls the birthdayCelebration plugin function to replace the logo on birthdays. The following code can be placed in your common.js file to use it:

importScript('User:isaacl/script/custom-logo-replacement/serendipitous.js');

importScript( 'User:isaacl/script/custom-logo-replacement.js' ); // Backlink: [[User:isaacl/script/custom-logo-replacement.js]]

Examples of creating a plugin function

The following code implements and configures a plugin function that uses one logo image from Monday to Friday, and another on Saturday and Sunday:

  • A hook handler is added to respond to the CustomLogoReplacement.initialLoad event firing. It performs the following steps:
    • Configures the two images to be used, giving each a name for reference.
    • Configures a plugin function.
      • The plugin function returns true if the logo should be replaced, and false otherwise. In this case, since the logo is always being replaced, the function always returns true.
      • When the function returns true, the parameter value replacementInfo.imageKey is set to the reference name for the image that is replacing the logo.
  • The custom-logo-replacement.js script is loaded. (This only needs to be done once in your common.js file.)
/* place code in user common.js, accessible from [[Special:MyPage/common.js]] */

mw.hook('CustomLogoReplacement.initialLoad').add(function (){
	CustomLogoReplacement.addReplacementImage('babyGlobeLaptop',
		'https://upload.wikimedia.org/wikipedia/commons/b/be/Wikipedia_25th_anniversary_Easter_Egg_laptop-idle-light.gif');
	CustomLogoReplacement.addReplacementImage('babyGlobeHeadphones',
		'https://upload.wikimedia.org/wikipedia/commons/8/89/Wikipedia_25th_anniversary_Easter_Egg_headphones-idle-light.gif');

	CustomLogoReplacement.addReplacementPlugin(function (replacementInfo) {
		let today = new Date();  /* moment in time as defined as offset from epoch */
		let dayOfWeek = today.getDay();  /* 0 = Sunday, ..., 6 = Saturday in local time */
		let replacementImage = 'babyGlobeHeadphones';
		if (dayOfWeek >= 1 && dayOfWeek <=5)
		{
			replacementImage = 'babyGlobeLaptop';
		}
		replacementInfo.imageKey = replacementImage;
		return true;
	});
});

importScript( 'User:isaacl/script/custom-logo-replacement.js' ); // Backlink: [[User:isaacl/script/custom-logo-replacement.js]]

The following code implements and configures a plugin function that uses a different logo image on a specific page, Wikipedia:25th anniversary:

  • A hook handler is added to respond to the CustomLogoReplacement.initialLoad event firing. It performs the following steps:
    • Configures the image to be used, giving it a name for reference.
    • Configures a plugin function.
      • The plugin function returns true if the current page is the target page, indicating that the logo should be replaced. It returns false otherwise.
      • The parameter value replacementInfo.imageKey is set to the reference name for the image that is replacing the logo.
  • The custom-logo-replacement.js script is loaded. (This only needs to be done once in your common.js file.)

See User:isaacl/script/custom-logo-replacement/serendipitous.js for an example of how to define lookup tables for replacement logos based on page name or category.

/* place code in user common.js, accessible from [[Special:MyPage/common.js]] */

mw.hook('CustomLogoReplacement.initialLoad').add(function (){
	CustomLogoReplacement.addReplacementImage('babyGlobeBalloons',
		'https://upload.wikimedia.org/wikipedia/commons/3/39/Wikipedia_25th_anniversary_Easter_Egg_balloons-click-light.gif');

	CustomLogoReplacement.addReplacementPlugin(function (replacementInfo) {
		let pageName = mw.config.get('wgPageName');
		replacementInfo.imageKey = 'babyGlobeBalloons';
		return pageName == 'Wikipedia:25th_anniversary';
	});
});

importScript( 'User:isaacl/script/custom-logo-replacement.js' ); // Backlink: [[User:isaacl/script/custom-logo-replacement.js]]

Guidance for implementing plugin functions

The URL for replacement images must start with https://upload.wikimedia.org/. When browsing available files from a Wikimedia server, such as Wikimedia Commons, look for a link saying "Use this file on the web". After selecting the link, copy the file URL.

Note the logo is displayed at a very small size, so any replacement images can also be small in resolution. commons:Category:Animated GIF files of Baby Globe has various images of the Wikipeda 25th anniversary Baby Globe that may be of interest. Also see § Replacement images configured by default.

The reference name used for a replacement image must only contain letters, digits, underscores, or hyphens.

If you are configuring multiple plugin functions, you can do it all within one hook handler for the CustomLogoReplacement.initialLoad event. Configure your replacement images, and then configure your plugin functions in the order you want them to execute.

Replacement images configured by default

Notes

Related Articles

Wikiwand AI