Skip to content

New plugin: theguardian.com #1782

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
dubhater wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

New plugin: theguardian.com #1782

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2464,6 +2464,10 @@
"js": ["plugins/sankaku.js"],
"matches": ["*://*.sankaku.app/*"]
},
{
"js": ["plugins/theguardian.js"],
"matches": ["*://*.theguardian.com/*"]
},
{
"js": ["plugins/vinted.js"],
"matches": [
Expand Down
41 changes: 41 additions & 0 deletions plugins/theguardian.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
var hoverZoomPlugins = hoverZoomPlugins || [];
hoverZoomPlugins.push({
name:'theguardian',
version:'0.1',
prepareImgLinks:function (callback) {
var res = [];
var old_width = /width=[0-9]*/;
var new_width = 'width=2000';

// This handles article thumbnails on the main page, and images
// inside articles.
$('a[href^="/"], a[href^="#img"], a[href*="theguardian.com"').one('mouseenter', function () {
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot May 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

There is a syntax error in the jQuery selector: 'a[href*="theguardian.com"' is missing its closing bracket ']'. It should be 'a[href*="theguardian.com"]'.

Suggested change
$('a[href^="/"], a[href^="#img"], a[href*="theguardian.com"').one('mouseenter', function () {
$('a[href^="/"], a[href^="#img"], a[href*="theguardian.com"]').one('mouseenter', function () {

var a = $(this);
var data = a.data();

if (data.hoverZoomSrc) {
return;
}

var img = a.parent().find('img[src*="i.guim.co.uk/"]');
var url = img.get(0).src;
Comment on lines +20 to +21
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot May 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

If no matching 'img' element is found, 'img.get(0)' will be 'undefined', and attempting to access '.src' will throw a 'TypeError', crashing the event handler. You should add a defensive check to ensure the image element exists before accessing its properties.

Suggested change
var img = a.parent().find('img[src*="i.guim.co.uk/"]');
var url = img.get(0).src;
var img = a.parent().find('img[src*="i.guim.co.uk/"]');
if (!img.length) {
return;
}
var url = img.get(0).src;


data.hoverZoomSrc = [url.replace(old_width, new_width)];

a.addClass('hoverZoomLink');
hoverZoom.displayPicFromElement(a);
});

// This handles the profile picture of the article's author.
// The width parameter is necessary. It doesn't accept
// ridiculously large numbers, like 2100 and larger, but 2000
// seems fine.
hoverZoom.urlReplace(res,
'img[src*="i.guim.co.uk/"]',
old_width,
new_width,
);
Comment on lines +10 to +37
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot May 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

To solve the issue you mentioned in the PR description (where hovering anywhere inside the large blue link rectangle triggers the zoom instead of just the thumbnail), you can target the 'img' elements directly rather than the wrapping 'a' elements.

HoverZoom's 'urlReplace' utility already handles image elements perfectly and binds the hover event directly to them. Since the article thumbnails and the author profile pictures both use the 'i.guim.co.uk' domain, you can simplify the entire plugin by using 'urlReplace' for all of them. This removes the need for the manual 'mouseenter' event listener entirely and solves your hover area issue.

        // This handles all images hosted on the Guardian's CDN (i.guim.co.uk),
        // including article thumbnails, images inside articles, and author profile pictures.
        hoverZoom.urlReplace(res,
            'img[src*="i.guim.co.uk/"]',
            old_width,
            new_width
        );


callback($(res), this.name);
}
});