Use largest available size for images in Wikipedia articles

[danburzo]

The idea of the imagesAtFullSize enhancement is to get the largest available image from blogs using Blogspot, WordPress, and the like:

percollate/src/enhancements.js

Lines 1 to 20 in 3506b37

	function imagesAtFullSize(doc) {
	/*
	Replace:
	<a href='original-size.png'>
	<img src='small-size.png'/>
	</a>
	With:
	<img src='original-size.png'/>
	*/
	Array.from(doc.querySelectorAll('a > img:only-child')).forEach(img => {
	let anchor = img.parentNode;
	let original = anchor.href;
	// only replace if the HREF matches an image file
	if (original.match(/\.(png|jpg|jpeg|gif|svg)$/)) {
	img.setAttribute('src', original);
	anchor.parentNode.replaceChild(img, anchor);
	}
	});

However, Wikipedia images are an exception:

<a href="/wiki/File:Perkulator.jpg" class="image">
  <img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Perkulator.jpg/250px-Perkulator.jpg" class="thumbimage" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Perkulator.jpg/375px-Perkulator.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Perkulator.jpg/500px-Perkulator.jpg 2x" data-file-width="1944" data-file-height="2592" width="250" height="333">
</a>

They link to what looks like an image file, but is in fact a HTML page for that image. How can we handle this situation gracefully?

[bekicot]

Here we go.
https://upload.wikimedia.org/wikipedia/commons/3/3a/Perkulator.jpg
Remove the thumb from url :)

may i help with it?

[danburzo]

@bekicot sure thing! I looked into it a bit and apparently the "canonical" way to get the image's original URL is to make a query to the Wikipedia API:

https://en.wikipedia.org/w/api.php?action=query&titles=File:Albert_Einstein_(Nobel).png&prop=imageinfo&iiprop=url&format=json

Maybe a good first step is just making imagesAtFullSize ignore wiki image files?

[danburzo]

Maybe a good first step is just making imagesAtFullSize ignore wiki image files?

I added this in the commit above.