How to scale images

Sometimes you want to create a simple table layout with photos that are the same size. With $wgAllowExternalImages your editors can simply hotlink images off other websites. However, they’ll never be the same dimensions which causes a problem for consistent layout. There are a couple ways of addressing this challenge without needing to crop and resize the images themselves.

One is to upload images into the wiki, because MediaWiki gives you all the flexibility you need to resize images which are present in the system.

Another way is to work with a site administrator to develop CSS styles that can be used in the wiki. With code like this: https://codepen.io/freephile/pen/MoYxoM you can effectively wrap images with div tags to control one aspect (width or height) and have them scale proportionally. The wiki administrator can put the styles into your site’s MediaWiki:Common.css. These styles can also be incorporated into templates if it makes it easier for editors. Then, with $wgAllowExternalImages enabled, the syntax for hotlinking external images is to simply copy/paste the full image URL into the wiki content. You can also enclose the resource URL in single brackets to create a link: e.g. [Link_URL Embedded_Image_URL]

Considerations There are some reasons to use external images, and some reasons not to. One reason not to is to avoid “mixed content” warnings for non-secure resources. For more information, check out the manual for $wgAllowExternalImages

1 Like