Fandom

Wikia Developers Wiki

DynamicImages

869pages on
this wiki
Add New Page
Talk3 Share

DynamicImages allows scaling up of small SVG images when needed, and allows increasing their source dimensions, for preventing common gaps between paths.

Effects

The tool affects the following cases of SVG images on a page:

  • Gallery images- in case the image is smaller than its thumb container, it would be scaled up.
  • Lightbox modal images- similar to SVGs in galleries, this will also dectect if the image is smaller than its available space, and scale it up if needed.
  • SVG images in general- to prevent gaps between paths in the images, this allows increasing images' source, to reduce any gaps.

Note that this feature is not made for the use of images added using their full URL. For embedding external images you can use ExternalImageLoader.

Installation

See also: Help:JavaScript and CSS Cheatsheet, Help:Including additional JavaScript and CSS
dev:DynamicImages/code.js
  • For personal use, add the code snippet below to your global.js page (for use on all wikis) or your common.js page on your wiki (for use on a single wiki).
importArticles({
    type: 'script',
    articles: [
        'u:dev:DynamicImages/code.js',
    ]
});
importArticles — Best Practices for installing JavaScript on Fandom
The importArticles statement is designed to combine multiple HTTP requests into a single data transfer, allowing multiple scripts to load and execute faster. If you've been installing several different scripts, your JavaScript file has probably accumulated unnecessary import statements. Click "Expand" to learn how to efficiently batch import scripts to speed up performance and make your code look cleaner. One other approach is by using the MediaWiki:ImportJS.
If your JavaScript file has several lines of code that say importScript, importScriptPage, or importArticles, you may be able to combine them! By batch importing a collection of scripts with a single import, your JavaScript code will load faster and look cleaner. Consider the example below. On the left is an example of what your JavaScript file might currently look like. On the right is how you could improve that code.
Multiple imports — messy and slow One import — clean and efficient
importScriptPage('AjaxRC/code.js','dev');
 
importScript('MediaWiki:localScript.js');
 
importArticle({
  type: 'script',
  article: 'u:dev:FloatingToc/code.js'
});
 
importScriptPage('page1.js', 'wikiname');
 
importScriptPage('page2.js', 'wikiname');
importArticles({
    type: 'script',
    articles: [
        'u:dev:AjaxRC/code.js',
        'MediaWiki:localScript.js',
        'u:dev:FloatingToc/code.js',
        'u:wikiname:page1.js',
        'u:wikiname:page2.js'
    ]
});
Note: In this example, pay close attention to the placement of commas and other punctuation. For people who aren't familiar with programming (and even those who are!), a common mistake when writing code is to accidentally delete, forget, or misplace critical symbols like commas or quotation marks. This can cause a syntax error that breaks the code. Carefully follow the convention shown here when using importArticles.
But there's much more to importArticles than just this! For more examples and advanced usage, see the help page at Help:Including additional JavaScript and CSS.

Settings

You can decide whether or not to make the feature affect certain parts by adding to the JS page from which it's imported the following lines:

Remember! If using settings, add these lines before the script that imports DynamicImages
window.dev = window.dev || {};
window.dev.DynamicImages = {
	svgGallery: true,
	svgLightbox: true,
	svgIncreaseSrc: 1
}

The configuration example above shows the default settings. The table below lists the role of each one of the properties and its valid values.

Property Role Valid values Default value
svgGallery Whether or not to make it affect wiki galleries (small SVG) A boolean (true to enable or false to disable) true
svgLightbox Whether or not to make the image-preview lightbox (small SVG)
svgIncreaseSrc Increasing the dimensions of the SVG source (multiplies the original size by this value). This prevents gap creation between nearby paths on the PNG thumb Any positive number (doesn't have to be an integer). The higher the number is, the smaller the gap would be, but will result in a longer loading time for each image 1

Versions

  • July 5, 2015- updating script to match the new lightboxes URL.
  • March 15, 2015- fixing increased source for SVG images. Removing GIF images' support per Wikia's updated image system, which covers animations, and changing the global object and its properties.
  • November 19, 2014- increased src dimensions for SVG images.
  • November 8, 2014- lightbox SVG images are only scaled up once their enlarged version has loaded.
  • July 25, 2014- files with no file type (e.g. videos). Also fixing problems with SVG matches in galleries.
  • July 24, 2014- fixing bug where thumb images were treated as gallery images.
  • April 23, 2014- fitting lightbox to SVG images in galleries correctly.
  • April 5, 2014- adding an optional lightbox resizing for SVG files.
  • March 16, 2014- updating correctly archived GIF files.
  • February 25, 2014- clean up for gallery images code.
  • February 12, 2014- fixing occasional loading bugs.
  • December 17, 2013- including gallery SVG images to the script, adding missing default settings.
  • December 15, 2013- DynamicImages is released.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.