Help:EmbeddingImages

From Larp City
$wgAllowExternalImages = true;

The above setting enables MediaWiki to embed external images; It is enabled on Larp City. This is useful for retardedly large file sizes for images which exceed the uploaded file size limit. However, by default, there is no way to scale these images to appear smaller than they are on the page, as 'thumb' does not work on external images (as ImageMagick is used to create thumbnails for files on the server, and when the user loads an embedded image, it does not touch the server).

Fixed scaling

.image100px img { width: 100px; }
.image200px img { width: 200px; }
.image300px img { width: 300px; }
.image400px img { width: 400px; }
.image500px img { width: 500px; }
.image600px img { width: 600px; }

Thanks to the above custom css, users can define fixed scaling of embedded images:

<div class="image600px">https://iili.io/JYOIqp1.png</div>

Copy the above line into your page. Replace the '600' in "image600px" with any positive multiple of 100 up to 6, and replace the URL to the location of the desired external image:

Examples

Scaled to 100px;

JYOIqp1.png

Scaled to 300px;

JYOIqp1.png

Scaled to 600px;

JYOIqp1.png

Dynamic Scaling

img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }

Thanks to the above custom CSS, we can make an inline embedded image automatically scale to fit the screen width by placing it between <div></div>:

<div>https://iili.io/JYOIqp1.png</div>

Example

Will fit screen width:

JYOIqp1.png

Notes

The external image file is fetched at full size. The loading speed of the image may be slow. If the host of the file changes its location or removes the file, then all pages with that embedded image will cease to display it.