mediawiki: set external image width by value

Question

Based on In MediaWiki, is there a way I can apply [[Image:<name>]] style resizing to external images?

Instead of adding an entry like this in the [[MediaWiki:Common.css]] page on the wiki

.image100px img { width: 100px; }

Would it be possible to change the css line with use of a mediawiki passed variable to set the width to an arbitrary value at runtime?

I now have 10 such lines to have a relative flexibility in external image sizing but would prefer to have something of the kind

.imagewidthpx img { width: {{{1}}}; }

I have no idea how to interact dynamically with common.css or even if this is feasible and I really need to embed external images with resizing.

Thanks

Answer 1

Something like this might work...

In MediaWiki:Commmon.css add:

.externalimage-holder {
    position: relative;
}
.externalimage-holder img {
    width: 100%;
    height: auto;
}

then set up a template Template:Sized-external-image like this:

<div class="externalimage-holder" style="width:{{{1}}}">{{{2}}}</div>

and call it like this:

{{sized-external-image|250px|https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/%D0%A2%D1%80%D0%BE%D1%97%D1%86%D1%8C%D0%BA%D0%B8%D0%B9_%D0%BC%D0%BE%D0%BD%D0%B0%D1%81%D1%82%D0%B8%D1%80.jpg/1024px-%D0%A2%D1%80%D0%BE%D1%97%D1%86%D1%8C%D0%BA%D0%B8%D0%B9_%D0%BC%D0%BE%D0%BD%D0%B0%D1%81%D1%82%D0%B8%D1%80.jpg}}

Unfortunately I can't test it right now as I'm having some difficulties with my local installation.