CODEWITHSUNDEEP
imagemediawikiresizeimage-resizing
Reinstate Monica - Goodbye SE
Reinstate Monica - Goodbye SE

Reputation: 3572

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

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

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

Can images be made to resize like tables?

(Images inside tables does not work!)

Upvotes: 7

Views: 9568

Answers (5)

profimedica
profimedica

Reputation: 2830

Dynamic resizing as the browser is resized: Put the next line at the begining of the css file: .\skins\common\shared.css

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

Each resizable image will be placed inside a <div></div>

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

Read more here: http://www.mediawiki.org/wiki/Help_talk:Images

Upvotes: 4

Miguel Bartelsman
Miguel Bartelsman

Reputation: 349

You could set up a CSS hack.

Mediawiki allows you to include some variables like alt-text, including in that variable a special string such as w100 or resizeable will allow you to target the element with CSS:

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

Do note that since you are using alt for things it's not meant to be used and !important in the CSS (because MW sets the size as an element style), this is to be avoided as much as possible and meant to be used as last resort.

Upvotes: 2

Thorsten Staerk
Thorsten Staerk

Reputation: 1156

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

Upvotes: 5

ShoeMaker
ShoeMaker

Reputation: 833

The short answer is no. The long answer is that you would have to write JavaScript that can determine the user's screen resolution and store it in a cookie.. This would have to be done most likely in common.js so that with the exception of the one in a billion user that has never been to the site and manages to navigate directly to the page with the dynamically sized image (I hope you're not going to put something like that on your main page), that information will already be there when they get to the page. The page could then use those variables to set the size to be {{#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. The host of my wiki says he is in the process of writing a new extension that may be able to do that as part of a request for a <div style="overflow-x: scroll; width: {{#expr:(File width * % of screen you want it to take)*(screen width)}}px;"> section I want to make. If you find something else before me, please update this post so I can see it. Thanks. :D

Upvotes: 0

lambshaanxy
lambshaanxy

Reputation: 23062

In short, no, there is no easy way to do this. It could conceivably be done with a bunch of fiddly Javascript, but I'm not aware of anybody having tried this and the implementation would not be trivial.

Upvotes: 1

Related Questions