MediaWiki talk:Common.js/Archive 17: Difference between revisions

Revision as of 08:28, 30 January 2010

Revision as of 08:29, 5 February 2010

Line 380:

I have added an editnotice to this page. The text for it is located in [[Template:JSfile]], similar to the editnotice we have in place for CSS which is [[Template:skinfile]]. —[[User:TheDJ|Th<span style="color: green">e</span>DJ]] ([[User talk:TheDJ|talk]] • [[Special:Contributions/TheDJ|contribs]]) 14:14, 11 November 2009 (UTC)

== [[MediaWiki:Common.js]] - Redirects from /User:UserName/myskin.js or .css to the user's actual skin page ==

That breaks IE7 for anon because <tt>wgUserName</tt> is null. [[User:Umherirrender|Der Umherirrende]] 16:34, 11 November 2009 (UTC)

:Yikes, will fix immediately —[[User:TheDJ|Th<span style="color: green">e</span>DJ]] ([[User talk:TheDJ|talk]] • [[Special:Contributions/TheDJ|contribs]]) 16:36, 11 November 2009 (UTC)

::Error avoided, but a more elegant approach might be needed for anon users. —[[User:TheDJ|Th<span style="color: green">e</span>DJ]] ([[User talk:TheDJ|talk]] • [[Special:Contributions/TheDJ|contribs]]) 16:44, 11 November 2009 (UTC)

== SVG files: links to rendered PNG images ==

Many users are not familiar with using SVG images available on Wikipedia/Commons in office applications, etc. This is particularly true, if the base size is small ([[:File:1LT BNC.svg|example]]). Therefore, I suggest adding links to rendered PNG images in different sizes to the image page. This has already been implemented on de-WP and on Commons (see [[Commons:MediaWiki talk:Common.js#SVG files: links to rendered PNG images|talk page]]). --[[User:Leyo|Leyo]] 18:14, 12 November 2009 (UTC)

<source lang="javascript">

// SVG images: adds links to rendered PNG images in different resolutions

addOnloadHook(function() {

if (wgAction == "view" && wgNamespaceNumber == 6 && wgTitle.substring(wgTitle.lastIndexOf(".")).toLowerCase() == ".svg") {

var file = document.getElementById("file");

if (!file) return; // might happen if MediaWiki can't render the SVG

var div = document.createElement("div");

div.appendChild(document.createTextNode("SVG rendered as PNG images in different resolutions:"));

div.appendChild(document.createElement("br"));

var a200 = document.createElement("a");

a200.setAttribute("href", "http://commons.wikimedia.org/w/thumb.php?f=" + encodeURIComponent(wgTitle) + "&width=200px");

a200.appendChild(document.createTextNode("200px"));

var a500 = document.createElement("a");

a500.setAttribute("href", "http://commons.wikimedia.org/w/thumb.php?f=" + encodeURIComponent(wgTitle) + "&width=500px");

a500.appendChild(document.createTextNode("500px"));

var a1000 = document.createElement("a");

a1000.setAttribute("href", "http://commons.wikimedia.org/w/thumb.php?f=" + encodeURIComponent(wgTitle) + "&width=1000px");

a1000.appendChild(document.createTextNode("1000px"));

var a2000 = document.createElement("a");

a2000.setAttribute("href", "http://commons.wikimedia.org/w/thumb.php?f=" + encodeURIComponent(wgTitle) + "&width=2000px");

a2000.appendChild(document.createTextNode("2000px"));

div.appendChild(a200);

div.appendChild(document.createTextNode(", "));

div.appendChild(a500);

div.appendChild(document.createTextNode(", "));

div.appendChild(a1000);

div.appendChild(document.createTextNode(", "));

div.appendChild(a2000);

div.appendChild(document.createTextNode("."));

file.parentNode.insertBefore(div, document.getElementById("file").nextSibling.nextSibling);

}

});

</source>

:This is the code in question. I think this would be a nice addition. I'm wondering if we should have a /file.js page for this however. What do you guys think ? Also, the usage of "nextSibling" should probably be avoided. —[[User:TheDJ|Th<span style="color: green">e</span>DJ]] ([[User talk:TheDJ|talk]] • [[Special:Contributions/TheDJ|contribs]]) 18:39, 24 November 2009 (UTC)

::Yes, this would be a very useful addition. I tested the code above, it worked fine in my Firefox 2. As usual TheDJ's code run as smooth as butter. And yes, this should be added to a new /file.js page.

::But I would like some tweaks:

::1: I would like if its text said "''This image rendered as PNG in some resolutions:''" instead of "''SVG rendered as PNG images in different resolutions:''".

::2: No need for a line break between the text and the image links. It looks better on one line. Even as one line it fits nicely on my 800x600 screen resolution.

::2: I would like this to be placed below the line that says "''(SVG file, nominally ...''", instead of above it.

::3: I like the sizes you choose, but the images should also be limited in height, since some images can be very high and narrow. This is to prevent humongous images from being created and loaded, which can be nasty if you have a slow computer or slow connection. I tested to add that to the code I ran, and it worked fine. (But only add the height limitation to the links, not the visible link texts, it looks ugly in text.)

::But no matter the details, I think this should be deployed right away. We can discuss and modify the details later on.

::--[[User:Davidgothberg|David Göthberg]] ([[User talk:Davidgothberg|talk]]) 01:11, 25 November 2009 (UTC)

Code prepared in [[MediaWiki:Common.js/file.js]]. To be loaded from Common.js with:

<source lang=javascript>

if( wgNamespaceNumber == 6 )

importScript('MediaWiki:Common.js/file.js');

</source>

Most suggestions by David incorporated. I was wondering. Isn't "resolutions" a misnomer ? Perhaps we should just say "in different sizes" —[[User:TheDJ|Th<span style="color: green">e</span>DJ]] ([[User talk:TheDJ|talk]] • [[Special:Contributions/TheDJ|contribs]]) 14:07, 25 November 2009 (UTC)

:I tested the new code in my Firefox 2, Opera 10.10 and my ridiculously old IE 5.5, it works fine in all of them. And it looks very nice. And I agree, "resolutions" is a misnomer. "Sizes" is more correct, shorter, and a more common word so the average user understands it better.

:So I guess there is only one more thing to do: Deploy it? :))

:--[[User:Davidgothberg|David Göthberg]] ([[User talk:Davidgothberg|talk]]) 16:35, 25 November 2009 (UTC)

::{{done}} Deployed —[[User:TheDJ|Th<span style="color: green">e</span>DJ]] ([[User talk:TheDJ|talk]] • [[Special:Contributions/TheDJ|contribs]]) 17:50, 25 November 2009 (UTC)

Hmm, JavaScript can do ''loops'', if you get what I mean... — [[user:Alex Smotrov|AlexSm]] 20:43, 25 November 2009 (UTC)

<source lang=javascript>

// SVG images: adds links to rendered PNG images in different resolutions

function SVGThumbs() {

var file = document.getElementById("file"); // might happen if MediaWiki can't render the SVG

if (wgIsArticle && file && wgTitle.substring(wgTitle.lastIndexOf(".")).toLowerCase() == ".svg") {

function altSizeLink(size, title) {

var a = document.createElement("A");

a.setAttribute("href", wgServer + wgScriptPath + "/thumb.php?f=" + encodeURIComponent(wgTitle) + "&width=" + size + "&height=" + size);

a.appendChild(document.createTextNode(title);

return a

};

var container = document.createElement("P");

with(container) {

className = "SVGThumbs";

appendChild(document.createTextNode("PNG renderings in other sizes"+": "));

appendChild(altSizeLink('200px', "200px"));

appendChild(document.createTextNode(", "));

appendChild(altSizeLink('500px', "200px"));

appendChild(document.createTextNode(", "));

appendChild(altSizeLink('1024px', "1024px"));

appendChild(document.createTextNode(", "));

// Should we have a 1920x1080 (HD) option?

appendChild(altSizeLink('2000px', "2000px"));

appendChild(document.createTextNode("."));

}

var info = getElementsByClassName( file.parentNode, 'div', 'fullMedia' )[0];

if( info ) info.appendChild(container);

}

};

addOnloadHook( SVGThumbs );

</source>

Code untested. I think you use wgIsArticle instead of wgAction == "view" since things like purge renders a fully viewed page. You should be using wgServer + wgScriptPath, not all SVGs are at commons. We probably should be picking common screen resolutions like 1024x768, 1280x960, 1920x1080, 2048x1536. — [[User:Dispenser|Dispenser]] 21:06, 25 November 2009 (UTC)

:I fixed the paths immediately, I think that was kinda important. —[[User:TheDJ|Th<span style="color: green">e</span>DJ]] ([[User talk:TheDJ|talk]] • [[Special:Contributions/TheDJ|contribs]]) 21:14, 25 November 2009 (UTC)

::The list of appends is messy. Put them in an array and iterate? [[User:Ale_jrb|<font color="green">A</font><small><font color="green">le_Jrb</font>]]</small>^{[[User_talk:Ale_jrb|<font color="blue">talk</font>]]} 21:17, 25 November 2009 (UTC)

::By that I mean the size, in case it isn't obvious. :) [[User:Ale_jrb|<font color="green">A</font><small><font color="green">le_Jrb</font>]]</small>^{[[User_talk:Ale_jrb|<font color="blue">talk</font>]]} 21:21, 25 November 2009 (UTC)

:::I doubt it will matter much in terms of efficiency, readability or speed. Now using a svgAltSize() function to at least keep the link generation a bit cleaner. —[[User:TheDJ|Th<span style="color: green">e</span>DJ]] ([[User talk:TheDJ|talk]] • [[Special:Contributions/TheDJ|contribs]]) 21:40, 25 November 2009 (UTC)

::::No, it doesn't matter much. Significantly better practise though. Meh. :) [[User:Ale_jrb|<font color="green">A</font><small><font color="green">le_Jrb</font>]]</small>^{[[User_talk:Ale_jrb|<font color="blue">talk</font>]]} 21:43, 25 November 2009 (UTC)

:@Dispenser, the problem with "screen sizes" is of course that the width x height defined here, are the limits, not the dimensions of the ouput. Although I agree that other sizes might be more useful than the current ones. I tried to fix the path issue, just not really sure about a good identification method for commons atm (wgServer doesn't work, is always en.wp) —[[User:TheDJ|Th<span style="color: green">e</span>DJ]] ([[User talk:TheDJ|talk]] • [[Special:Contributions/TheDJ|contribs]]) 21:52, 25 November 2009 (UTC)

::I prefer the current sizes: 200px, 500px, 1000px, 2000px. They are simple and clear. And as TheDJ pointed out, most images anyway don't have the proper height to width ratio to fit as desktop backgrounds (since I guess that is what Dispenser wants those sizes for).

::TheDJ: I added id="mw-sharedupload" to [[MediaWiki:Sharedupload-desc-here]] to give you a clean and efficient way to detect the presence of that message. ([[MediaWiki:Sharedupload]] redirects there, so we can use that short id.)

::--[[User:Davidgothberg|David Göthberg]] ([[User talk:Davidgothberg|talk]]) 04:20, 26 November 2009 (UTC)

:::Using such local id eliminates all users with non-en language in preferences. — [[user:Alex Smotrov|AlexSm]] 04:30, 26 November 2009 (UTC)

::::I'm now checking for the sharedUploadNotice class, which is used by the div around the Shareduploadnotice. (Why isn't that an id????). I also figured out, that you cannot use thumb.php from the secure server, so using wgServer is out the window. —[[User:TheDJ|Th<span style="color: green">e</span>DJ]] ([[User talk:TheDJ|talk]] • [[Special:Contributions/TheDJ|contribs]]) 15:23, 26 November 2009 (UTC)

:::::Yeah, on the secure server thumb.php complains "Error generating thumbnail" if it's a new file version, but once it's been generated before (e.g., on the second request), it works fine: https://secure.wikimedia.org/wikipedia/commons/w/thumb.php?f=Hawaii_turtle_2.JPG&width=1280. Could it just be a server config problem? (wouldn't be surprised -- a lot of Wikimedia server stuff seems to almost ''discriminate'' against the poor old secure server :-( ) • [[User talk:Anakin101|Anakin]] 18:10, 26 November 2009 (UTC)

OK, I asked Tim Starling:

* "thumb.php is broken and should really be a 403 if you access it from outside the server cluster"

*" if you use thumb.php, it's forwarded to the general cluster, not the image scaling cluster"

* "so all the fonts will be broken and it'll be cached forever like that"

I'm blanking file.js until I have rewritten it to a better version. —[[User:TheDJ|Th<span style="color: green">e</span>DJ]] ([[User talk:TheDJ|talk]] • [[Special:Contributions/TheDJ|contribs]]) 23:50, 26 November 2009 (UTC)

=== 3rd version ===

OK, my 3rd version of the code. Now just patches the URL of the original thumb (since for SVG we always have png thumbs). Also, per popular request, a loop. This code is not yet live. —[[User:TheDJ|Th<span style="color: green">e</span>DJ]] ([[User talk:TheDJ|talk]] • [[Special:Contributions/TheDJ|contribs]]) 00:29, 27 November 2009 (UTC)

<source lang="javascript">

// SVG images: adds links to rendered PNG images in different resolutions

function SVGThumbs() {

var file = document.getElementById("file"); // might fail if MediaWiki can't render the SVG

if (file && wgIsArticle && wgTitle.substring(wgTitle.lastIndexOf(".")).toLowerCase() == ".svg") {

var thumbu = file.getElementsByTagName('IMG')[0].src;

var thumbs = file.getElementsByTagName('IMG')[0].width;

if(!thumbu || !thumbs) return;

function svgAltSize( w, title) {

var path = thumbu.replace( "/"+thumbs+"px-", "/"+ w +"px-" );

var a = document.createElement("A");

a.setAttribute("href", path);

a.appendChild(document.createTextNode(title));

return a;

}

var p = document.createElement("p");

p.className = "SVGThumbs";

p.appendChild(document.createTextNode("This image rendered as PNG in other sizes"+": "));

var l = new Array( 200, 500, 1000, 2000 )

for( var i = 0; i < l.length; i++ ) {

p.appendChild(svgAltSize( l[i], l[i] + "px"));

if( i < l.length-1 ) p.appendChild(document.createTextNode(", "));

}

p.appendChild(document.createTextNode("."));

var info = getElementsByClassName( file.parentNode, 'div', 'fullMedia' )[0];

if( info ) info.appendChild(p);

}

};

addOnloadHook( SVGThumbs )

</source>

:TheDJ: Your above code looks good. It works in all three of my browsers: Firefox 2, Opera 10.10 and IE 5.5. And it also works when on the secure server. (Although the images are loaded insecure, but it seems all images on Wikipedia is loaded insecure so we can't do anything about that, which is evil...) I have read through the code and it seems like a good solution, since it uses the same URLs that normal image thumbnails use so it isn't abusing the servers.

:I see that we could fairly easily add a little logic that checks the height to width ratio of the image, and then adjusts the width based on that, so we stay within the 200x200 size and so on. But there's no hurry in adding that, we can add that after this code has been live-tested for some days.

:--[[User:Davidgothberg|David Göthberg]] ([[User talk:Davidgothberg|talk]]) 02:59, 27 November 2009 (UTC)

:That code works, but might I suggest this alteration:

<source lang="javascript">

var thumbu = file.getElementsByTagName('img')[0].src;

if (!thumbu) return;

function svgAltSize(w, title) {

var path = thumbu.replace(/\/\d+(px-[^\/]+$)/, "/" + w + "$1");

</source>

:Otherwise it relies on the img's specified width on the page matching the width in the URL. It probably will, but there might be other strange influences at work that browsers get wrong: zooming, not having fully loaded the image yet (race condition?), etc. The other part of that regexp is to prevent matching on the wrong part of the URL if the file name includes something that looks like the size. E.g., <nowiki>http://upload.wikimedia.org/wikipedia/en/thumb/3/35/200px-stupid-file-name.svg/200px-200px-stupid-file-name.svg.png</nowiki>. Also the wgTitle logic could be shortened to the more elegant <tt>wgTitle.match(/\.svg$/i)</tt> if you wish. • [[User talk:Anakin101|Anakin]] 03:13, 27 November 2009 (UTC)

::Deployed with suggestions. —[[User:TheDJ|Th<span style="color: green">e</span>DJ]] ([[User talk:TheDJ|talk]] • [[Special:Contributions/TheDJ|contribs]]) 23:13, 27 November 2009 (UTC)

:::And as usual, the new version works in all three of my browsers.

:::--[[User:Davidgothberg|David Göthberg]] ([[User talk:Davidgothberg|talk]]) 03:20, 28 November 2009 (UTC)

::::It is also deployed on Commons now. —[[User:TheDJ|Th<span style="color: green">e</span>DJ]] ([[User talk:TheDJ|talk]] • [[Special:Contributions/TheDJ|contribs]]) 13:26, 28 November 2009 (UTC)

:::::What do you think about [http://commons.wikimedia.org/w/index.php?diff=prev&oldid=32586541 this change]? Should it be implemented here, too? --[[User:Leyo|Leyo]] 07:49, 3 December 2009 (UTC)

=== Smaller thumbnails for all large images ===

For years my private wiki has included similar links on the image description page (as a Mediawiki patch). However, the difference is that I included links for small thumb version on all large images. This is especially useful if the image is very large (e.g. 4+ megapixels) as it allows one the option to look at an intermediate sample image that preserves more features without being so large it is difficult to download and use. In my case, I had a standard sequence of thumb sizes and capped the possible links at the actual dimensions of the image. Should something similar be done here too? [[User:Dragons flight|Dragons flight]] ([[User talk:Dragons flight|talk]]) 21:20, 25 November 2009 (UTC)

:What sizes are you suggesting? We currently have 200px, 500px, 1000px and 2000px. The smaller one of those is not a problem to download even on a slow modem connection.

:And by "''capped the possible links at the actual dimensions of the image''" I assume you mean to not show links for PNGs larger than the nominal size of the SVG. But SVG images are fully scalable, so we should show also the larger sizes for them.

:But perhaps you mean for other non-SVG images? But that is not needed, since if you want a small thumbnail just look in the file history below the image, right click the image there and choose "''Save image as...''". And if you want a larger version, then right click the main image on the page and choose "''Save image as...''". That gives you the size previewed on the page, not the full image linked to. And that one you already have in your browser cache since you are already looking at it, so it costs no extra download.

:--[[User:Davidgothberg|David Göthberg]] ([[User talk:Davidgothberg|talk]]) 04:07, 26 November 2009 (UTC)

::I mean non-SVGs. Things like [[:File:SunBurst10.PNG]], [[:File:EFS_highres_STS066_STS066-101-39.JPG]], [[:File:St-Crepin.jpg]], and [[:File:TerraformedVenus.jpg]] are huge. Having thumbnails of intermediate size would allow people on low bandwidth connections to get a better look without a long wait. In addition, IE 6 or 7 won't even render an image at all beyond some predetermined limit (I think it was something like 25 megapixels but I'm not sure), which makes it hard for some people to look at the originals. Also, just as people might want to use an SVG rendered at various sizes, they also might want to use a JPG at a variety of scales. Yes that transition is lossy, but giving people easy access to images at a scale that is convenient to them would still aid in reuse. Basically, I'm of the opinion that most of the use cases for wanting multiple sizes for SVGs aren't unique to SVGs but could apply to a wider population of images. [[User:Dragons flight|Dragons flight]] ([[User talk:Dragons flight|talk]]) 07:56, 26 November 2009 (UTC)

:::Silly me, you are right. The operations I described above could just as well be used for getting a PNG version of an SVG, and I myself have sometimes done so. But as you point out, that is not so user-friendly. And as you say, providing more sizes is a good thing no matter what type of image it is. So I agree, we should add this for all the image formats that MediaWiki can resize. It seems MediaWiki resizes JPGs to JPG, and GIFs to GIF.

:::TheDJ & Co: Since there are not many GIFs around, so you won't have to search for it, here is one you can use for the testing: [[:File:Edit-copy-purple.gif]]

:::--[[User:Davidgothberg|David Göthberg]] ([[User talk:Davidgothberg|talk]]) 09:35, 26 November 2009 (UTC)

::::Just a comment -- if implementing these thumbnails for non-SVG images, note that the ImageHandler for them (apparently?) ignores the height parameter, using it neither to cap the overall size (like the SVGs) nor to force the aspect ratio, so there is no point in specifying it in the URL. • [[User talk:Anakin101|Anakin]] 18:17, 26 November 2009 (UTC)

:Right, the new and more robust way to get the image can't use a height parameter. (See TheDJ's 3rd version above.) But we can easily check the height to width ratio of the image from javascript and adjust the width values we use.

:I have done some more testing and noticed something I had forgotten: Wikipedia can only rescale PNGs and JPGs (and indirectly SVGs). It doesn't rescale GIFs. So we will have to live without this feature for the GIF images.

:--[[User:Davidgothberg|David Göthberg]] ([[User talk:Davidgothberg|talk]]) 03:23, 27 November 2009 (UTC)