insidestory.gr: top/cover image incorrect display Topic is solved

[back2themoon]

The previously reported, zoom-related issue still stands. But now there's a new one on top of that. Actually, I'm not sure it's new:

https://insidestory.gr/article/oi-taini ... likrineias

Intended result:

inside0.png

Two issues below: a) Image is not fully "extended" b) the old issue: 100% zoom causes text overlap on top:

inside1.png

The one below is with 90% zoom: the old overlap text issue goes away, but the "tiny image" issue remains. The indicated text box is pushed out of the image. Not the intended result, but at least there is no text overlap.

inside2.png

These were taken on a 1366x768 screen. The issue looked similar to the recently reported Ars Technica one. I tried applying adoxa's fix here too, but I guess it was too optimistic a move.

[back2themoon]

Sorry, forgot to mention errors. I only see this:

None of the “sha512” hashes in the integrity attribute match the content of the subresource.

[adoxa]

It seems img is not adjusting to its source width/height (added in FF108). Here's a userstyle to override it (adjust to suit - the image itself is 1400x700, which for my 1366 display is reduced to 1349).

Code: Select all

@-moz-document domain("insidestory.gr") {
  picture > img {
    width: 1350px;
    height: 675px;
  }
}

[back2themoon]

Thank you adoxa. I'd kiss you if I could! 😜

1450x725 seems the right choice for my 1080p screen and maximized Pale Moon. Resizing the PM window destroys the ratio but I don't care. There is an after-effect: https://insidestory.gr/tagline/spyware

I guess we can't lock the aspect ratio somehow? In any case, let's see if I got this correctly, in order to report it properly:

a) They use the <source> element (FF 108) which Pale Moon does not support.
b) They could implement a fallback solution (not replace their current system), like: (AI below)

For consistent cross-browser rendering, the intrinsic size should be defined on the <img> element (or via CSS aspect-ratio), not on <source>.

If <source> is meant to be implemented fairly soon (PM 34?) it'd be good to know, so I won't bother contacting them.

[back2themoon]

Unfortunately the fix also enlarges images that are not meant for this, i.e. small thumbnails, profile pics etc. so don't bother with this adoxa.

I'll contact them and hope they react.

[adoxa]

I was hoping it wouldn't impact anything else, but I only tested on that one page; I'll have a bit more of a dig.

source is supported, it's its width & height attributes that are not (thus the size remains at the smaller img, rather than expanding with the bigger source).

[back2themoon]

Thanks adoxa. The problems become evident if you scroll further down in my very first link. Use that same link because they have a free-article limit.

No need to waste your time though. I'll contact them and we'll see what happens. I'll post back here if I get a reply.

[tellu-white]

A JavaScript version. I only tested it on the URL in your first post.

***

userChrome.css

Code: Select all

/* First line of userChrome.css must be this: */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

hbox#fullscr-toggler {
    -moz-binding: url(data:text/plain;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjwhLS0gQ29weXJpZ2h0IChjKSAyMDE3IEhhZ2dhaSBOdWNoaQpBdmFpbGFibGUgZm9yIHVzZSB1bmRlciB0aGUgTUlUIExpY2Vuc2U6Cmh0dHBzOi8vb3BlbnNvdXJjZS5vcmcvbGljZW5zZXMvTUlUCiAtLT4KCjwhLS0gUnVuIHVzZXJDaHJvbWUuanMvdXNlckNocm9tZS54dWwgYW5kIC51Yy5qcy8udWMueHVsLy5jc3MgZmlsZXMgIC0tPgo8YmluZGluZ3MgeG1sbnM9Imh0dHA6Ly93d3cubW96aWxsYS5vcmcveGJsIj4KICAgIDxiaW5kaW5nIGlkPSJqcyI+CiAgICAgICAgPGltcGxlbWVudGF0aW9uPgogICAgICAgICAgICA8Y29uc3RydWN0b3I+PCFbQ0RBVEFbCiAgICAgICAgICAgICAgICBpZih3aW5kb3cudXNlckNocm9tZUpzTW9kKSByZXR1cm47CiAgICAgICAgICAgICAgICB3aW5kb3cudXNlckNocm9tZUpzTW9kID0gdHJ1ZTsKCiAgICAgICAgICAgICAgICB2YXIgY2hyb21lRmlsZXMgPSBGaWxlVXRpbHMuZ2V0RGlyKCJVQ2hybSIsIFtdKS5kaXJlY3RvcnlFbnRyaWVzOwogICAgICAgICAgICAgICAgdmFyIHh1bEZpbGVzID0gW107CiAgICAgICAgICAgICAgICB2YXIgc3NzID0gQ2NbJ0Btb3ppbGxhLm9yZy9jb250ZW50L3N0eWxlLXNoZWV0LXNlcnZpY2U7MSddLmdldFNlcnZpY2UoQ2kubnNJU3R5bGVTaGVldFNlcnZpY2UpOwoKICAgICAgICAgICAgICAgIHdoaWxlKGNocm9tZUZpbGVzLmhhc01vcmVFbGVtZW50cygpKSB7CiAgICAgICAgICAgICAgICAgICAgdmFyIGZpbGUgPSBjaHJvbWVGaWxlcy5nZXROZXh0KCkuUXVlcnlJbnRlcmZhY2UoQ2kubnNJRmlsZSk7CiAgICAgICAgICAgICAgICAgICAgdmFyIGZpbGVVUkkgPSBTZXJ2aWNlcy5pby5uZXdGaWxlVVJJKGZpbGUpOwoKICAgICAgICAgICAgICAgICAgICBpZihmaWxlLmlzRmlsZSgpKSB7CiAgICAgICAgICAgICAgICAgICAgICAgIHR5cGUgPSAibm9uZSI7CiAgICAgICAgICAgICAgICAgICAgICAgIGlmKC8oXnVzZXJDaHJvbWV8LnVjKS5qcyQvaS50ZXN0KGZpbGUubGVhZk5hbWUpKSB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICB0eXBlID0gInVzZXJjaHJvbWUvanMiOwogICAgICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgICAgICAgIGVsc2UgaWYoLyhedXNlckNocm9tZXwudWMpLnh1bCQvaS50ZXN0KGZpbGUubGVhZk5hbWUpKSB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICB0eXBlID0gInVzZXJjaHJvbWUveHVsIjsKICAgICAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgICAgICBlbHNlIGlmKC8uYXMuY3NzJC9pLnRlc3QoZmlsZS5sZWFmTmFtZSkpIHsKICAgICAgICAgICAgICAgICAgICAgICAgICAgIHR5cGUgPSAiYWdlbnRzaGVldCI7CiAgICAgICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgICAgICAgICAgZWxzZSBpZigvXig/ISh1c2VyQ2hyb21lfHVzZXJDb250ZW50KS5jc3MkKS4rLmNzcyQvaS50ZXN0KGZpbGUubGVhZk5hbWUpKSB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICB0eXBlID0gInVzZXJzaGVldCI7CiAgICAgICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgICAgICAgICAgaWYodHlwZSAhPSAibm9uZSIpIHsKICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNvbnNvbGUubG9nKCItLS0tLS0tLS0tXCAiICsgZmlsZS5sZWFmTmFtZSArICIgKCIgKyB0eXBlICsgIikiKTsKICAgICAgICAgICAgICAgICAgICAgICAgICAgIHRyeSB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaWYodHlwZSA9PSAidXNlcmNocm9tZS9qcyIpIHsKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgU2VydmljZXMuc2NyaXB0bG9hZGVyLmxvYWRTdWJTY3JpcHRXaXRoT3B0aW9ucyhmaWxlVVJJLnNwZWMsIHt0YXJnZXQ6IHdpbmRvdywgaWdub3JlQ2FjaGU6IHRydWV9KTsKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxzZSBpZih0eXBlID09ICJ1c2VyY2hyb21lL3h1bCIpIHsKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgeHVsRmlsZXMucHVzaChmaWxlVVJJLnNwZWMpOwogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBlbHNlIGlmKHR5cGUgPT0gImFnZW50c2hlZXQiKSB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGlmKCFzc3Muc2hlZXRSZWdpc3RlcmVkKGZpbGVVUkksIHNzcy5BR0VOVF9TSEVFVCkpCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBzc3MubG9hZEFuZFJlZ2lzdGVyU2hlZXQoZmlsZVVSSSwgc3NzLkFHRU5UX1NIRUVUKTsKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxzZSBpZih0eXBlID09ICJ1c2Vyc2hlZXQiKSB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGlmKCFzc3Muc2hlZXRSZWdpc3RlcmVkKGZpbGVVUkksIHNzcy5VU0VSX1NIRUVUKSkKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHNzcy5sb2FkQW5kUmVnaXN0ZXJTaGVldChmaWxlVVJJLCBzc3MuVVNFUl9TSEVFVCk7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgICAgICAgICAgfSBjYXRjaChlKSB7CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgY29uc29sZS5sb2coIiMjIyMjIyMjIyMgRVJST1I6ICIgKyBlICsgIiBhdCAiICsgZS5saW5lTnVtYmVyICsgIjoiICsgZS5jb2x1bW5OdW1iZXIpOwogICAgICAgICAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgICAgICAgICAgY29uc29sZS5sb2coIi0tLS0tLS0tLS0vICIgKyBmaWxlLmxlYWZOYW1lKTsKICAgICAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgIH0KCiAgICAgICAgICAgICAgICBzZXRUaW1lb3V0KGZ1bmN0aW9uIGxvYWRYVUwoKSB7CiAgICAgICAgICAgICAgICAgICAgaWYoeHVsRmlsZXMubGVuZ3RoID4gMCkgewogICAgICAgICAgICAgICAgICAgICAgICBkb2N1bWVudC5sb2FkT3ZlcmxheSh4dWxGaWxlcy5zaGlmdCgpLCBudWxsKTsKICAgICAgICAgICAgICAgICAgICAgICAgc2V0VGltZW91dChsb2FkWFVMLCA1KTsKICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICB9LCAwKTsKICAgICAgICAgICAgXV0+PC9jb25zdHJ1Y3Rvcj4KICAgICAgICA8L2ltcGxlbWVudGF0aW9uPgogICAgPC9iaW5kaW5nPgo8L2JpbmRpbmdzPg==);
}

set_insidestory_gr_image_width.uc.js

Code: Select all

function set_insidestory_gr_image_width(evt) {
	var page_URL = gBrowser.contentDocument.location.href;
	var page_host = (new URL(page_URL)).host;
	
	if(page_host == "insidestory.gr"){
		try{
			var body_tag__img = content.document.getElementsByTagName("body")[0];
			var arr_img_tags = body_tag__img.getElementsByTagName("img");

			for(var i=0; i<arr_img_tags.length; i++){
				var img_loading = arr_img_tags[i].getAttribute("loading");
				
				if(img_loading){
					if(img_loading == "eager"){
						var parent_tag = arr_img_tags[i].parentNode;
						
						if(parent_tag){
							if(parent_tag.tagName.toLowerCase() == "picture"){
								var arr_sources_of_parent_tag = parent_tag.getElementsByTagName("source");
								
								if(arr_sources_of_parent_tag){
									var arr_with_srcset = [];
									
									for(var j=0; j<arr_sources_of_parent_tag.length; j++){
										var srcset = arr_sources_of_parent_tag[j].getAttribute("srcset");
										
										if(srcset){
											var source_width = arr_sources_of_parent_tag[j].getAttribute("width");
											
											if(source_width){
												var int_width = parseInt(source_width.toString());
												
												var arr_temp = [int_width, srcset];
												arr_with_srcset.push(arr_temp);
											}
										}
									}
									
									if(arr_with_srcset.length > 0){
										var arr_with_srcset__sorted = arr_with_srcset.sort(function(a,b){ return b[0] - a[0]; });
										
										var srcset = arr_with_srcset__sorted[0][1];									
										var img_with_height = "width: unset !important; height: unset !important;";
											
										arr_img_tags[i].style.cssText = img_with_height;
										arr_img_tags[i].src = srcset;
										
										arr_with_srcset.length = 0;
									}
								}
							}
						}
					}
				}
			}
			
		} catch(err){
			console.log(err.message);
		}
	}
}

window.addEventListener("DOMContentLoaded", function(evt){set_insidestory_gr_image_width(evt)}, false);

Screenshots:

01.png

02.png

[adoxa]

Modify HTTP Response filter to replace the img size with the source (adjust the value of min-width to suit, in 200px increments).

Code: Select all

[["insidestory.gr",["/tagline|article|author/",["/(min-width: 1600px.*?(width=\"\\d*?\" height=\"\\d*?\").*?<img.*?)width=\"\\d*\" height=\"\\d*\"/g","$1$2"]]]]

[back2themoon]

A JavaScript version.

Modify HTTP Response filter

Thank you tellu-white for your fix. Did a quick test and it works perfectly - so does adoxa's latest.

I'm spoilt for choice here! You both make this forum a great place to be.

Webmasters have been notified. Let's see what happens. Thanks again.