Is there a way to automatically resize MediaWiki images based on screen size?

Question

MediaWiki pictures can be set to a specific size with simple formatting.

However, the tables will change on the fly depending on the size of the browser / screen.

Can I make images for resizing, for example, tables?

(Images inside tables do not work!)

Answer 1

I had the same question and I saw the answers above (now they are lower) that you cannot have several photos with different relative sizes. So I wrote a mediawiki extension that allows this: http://mediawiki.org/wiki/Extension:AdaptiveThumb

Answer 2

Dynamically resize when resizing the browser: Place the following line at the beginning of the css file:. \ Skins \ common \ shared.css

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

Each resized image will be placed inside the <div></div>

 <div>[[Image:MyImage.png]]</div> 

More details here: http://www.mediawiki.org/wiki/Help_talk:Images

Answer 3

In short, no, there is no easy way to do this. Perhaps this could have been done with a bunch of fiddly Javascript, but I don't know whoever tried this, and the implementation would not be trivial.

Answer 4

You can customize CSS hacker.

Mediawiki allows you to include some variables, such as alt-text, including a special line in this variable, such as w100 or resizeable , that allows you to target an element using CSS:

 img[alt=~w100] { width: 100% !important; height: auto !important; } 

Note that since you use alt for things that it is not intended to be used, and !important in CSS (since MW sets the size as the style of the element), this should be avoided as much as possible and intended to be used as a last resort.

Answer 5

The short answer is no. The long answer is that you have to write JavaScript that can determine the user's screen resolution and store it in a cookie. This should be done, most likely, in common.js, so that, with the exception of one billion users who have never been to the site and who manage to go directly to the page with the image with a dynamic size (I hope you are not going to post something like that on your the main page), this information will already be there when they get to the page. Then the page could use these variables to set the size {{#expr:(File height * % of screen you want it to take)*(screen height)}}x{{#expr:(File width * % of screen you want it to take)*(screen width)}}px . My wiki host says he is in the process of writing a new extension that can do this as part of a section request <div style="overflow-x: scroll; width: {{#expr:(File width * % of screen you want it to take)*(screen width)}}px;"> which I want to do. If you find anything else in front of me, please update this post so that I can see it. Thank you.: D