Revision as of 18:22, 12 September 2021

To reference an external image and make sure it appears with a controllable parameter, one can reference this page on Stack overflow^[1]:

The original post by stack overflow user Brion is reproduced and the template has been created here:

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

Then, set up a Template in Template:Sized-external-image like this:

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

Then, call it like this:

{{sized-external-image|250px|https://storage.cloud.google.com/pub_papers/GitiFactory.png}}

Then, it should show up as follows:

References

@@ Line 1: / Line 1: @@
-<span class="plainlinks">[{{fullurl:MediaWiki}} http://upload.wikimedia.org/wikipedia/mediawiki/b/bc/Wiki.png]</span>
+To reference an external image and make sure it appears with a controllable parameter, one can reference this page on Stack overflow<ref>https://stackoverflow.com/questions/19450262/mediawiki-set-external-image-width-by-value</ref>:
-http://localhost:8000/s/XKNfpS5BwKHPsaY/preview
+The original post by stack overflow user [https://stackoverflow.com/users/82439/brion Brion] is reproduced and the template has been created here:
+In [[MediaWiki:Common.css]] add:
+<syntaxhighlight lang=CSS>
+.externalimage-holder {
+    position: relative;
+}
+.externalimage-holder img {
+    width: 100%;
+    height: auto;
+}
+</syntaxhighlight>
+Then, set up a Template in [[Template:Sized-external-image]] like this:
+<syntaxhighlight lang=HTML>
+<div class="externalimage-holder" style="width:{{{1}}}">{{{2}}}</div>
+</syntaxhighlight>
+Then, call it like this:
+<syntaxhighlight lang=HTML>
+{{sized-external-image|250px|https://storage.cloud.google.com/pub_papers/GitiFactory.png}}
+</syntaxhighlight>
+Then, it should show up as follows:
+{{sized-external-image|250px|https://storage.cloud.google.com/pub_papers/GitiFactory.png}}
+=References=
+<references/>