Skip to content
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

Fixed Lists of Images Not Showing #738

Merged
merged 9 commits into from
Nov 18, 2022
Merged

Fixed Lists of Images Not Showing #738

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9458c38
Allowed lists of images to appear in ReaderMode
Mar 3, 2022
dde2df0
Allowed for certain <ul> lists of images to pass the "Fishy" algoirthm
Mar 9, 2022
6bd7d3e
Allowed for certain <ul> lists of images to pass the "Fishy" algoirthm
Mar 9, 2022
0e07f27
Allow for <ul> lists of images to remain
Mar 16, 2022
029245c
Allow for <ul> lists of images to remain
Mar 16, 2022
9b1f4b9
Allow for <ul> lists of images to remain
Mar 24, 2022
d1ad46e
Allowed for certain lists of images to bypass the Fishy algoirthm
Mar 26, 2022
e8c115c
Added test for list of images bug
Apr 1, 2022
1c9f818
Update Readability.js
Tuxy222 Apr 21, 2022
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
15 changes: 15 additions & 0 deletions Readability.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2136,6 +2136,21 @@ Readability.prototype = {
(!isList && weight < 25 && linkDensity > 0.2) ||
(weight >= 25 && linkDensity > 0.5) ||
((embedCount === 1 && contentLength < 75) || embedCount > 1);
// Allow simple lists of images to remain in pages
if (isList && haveToRemove) {
for (var x = 0; x < node.children.length; x++) {
let child = node.children[x];
// Don't filter in lists with li's that contain more than one child
if (child.children.length > 1) {
return haveToRemove;
}
}
li_count = node.getElementsByTagName("li").length;
// Only allow the list to remain if every li contains an image
if (img == li_count) {
return false;
}
}
return haveToRemove;
}
return false;
Expand Down
8 changes: 8 additions & 0 deletions test/test-pages/dev418/expected-metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"title": "Readability Test",
"byline": null,
"dir": null,
"excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
"siteName": null,
"readerable": true
}
53 changes: 53 additions & 0 deletions test/test-pages/dev418/expected.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<div id="readability-page-1" class="page">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<hr />
<h2> Single &lt;img&gt; </h2>
<p>
<img src="http://fakehost/test/florian-giorgio-P1U7-ZgKeOM-unsplash.jpg" alt="An image" />
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<hr />
<h2> Single &lt;figure&gt; </h2>
<figure>
<img src="http://fakehost/test/florian-giorgio-P1U7-ZgKeOM-unsplash.jpg" alt="An image" />
<figcaption> Caption of the figure </figcaption>
</figure>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<hr />
<h2> &lt;ul&gt; List of &lt;img&gt; </h2>
<ul>
<li>
<img src="http://fakehost/test/florian-giorgio-P1U7-ZgKeOM-unsplash.jpg" alt="An image" />
</li>
<li>
<img src="http://fakehost/test/florian-giorgio-P1U7-ZgKeOM-unsplash.jpg" alt="An image" />
</li>
<li>
<img src="http://fakehost/test/florian-giorgio-P1U7-ZgKeOM-unsplash.jpg" alt="An image" />
</li>
</ul>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<hr />
<h2> &lt;ul&gt; List of &lt;figure&gt; </h2>
<ul>
<li>
<figure>
<img src="http://fakehost/test/florian-giorgio-P1U7-ZgKeOM-unsplash.jpg" alt="An image" />
<figcaption> Caption of the figure </figcaption>
</figure>
</li>
<li>
<figure>
<img src="http://fakehost/test/florian-giorgio-P1U7-ZgKeOM-unsplash.jpg" alt="An image" />
<figcaption> Caption of the figure </figcaption>
</figure>
</li>
<li>
<figure>
<img src="http://fakehost/test/florian-giorgio-P1U7-ZgKeOM-unsplash.jpg" alt="An image" />
<figcaption> Caption of the figure </figcaption>
</figure>
</li>
</ul>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
104 changes: 104 additions & 0 deletions test/test-pages/dev418/source.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>
Readability Test
</title>
<style>
<![CDATA[
body {
font-family: sans-serif;
margin: 0 auto;
max-width: 900px;
padding: 1em 2em;
}
img {
max-width: 100%;
}
]]>
</style>
</head>
<body>
<h1>
Readability Test
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<hr />
<h2>
Single &lt;img&gt;
</h2>
<p>
<img src="florian-giorgio-P1U7-ZgKeOM-unsplash.jpg" alt="An image" />
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<hr />
<h2>
Single &lt;figure&gt;
</h2>
<figure>
<img src="florian-giorgio-P1U7-ZgKeOM-unsplash.jpg" alt="An image" />
<figcaption>
Caption of the figure
</figcaption>
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<hr />
<h2>
&lt;ul&gt; List of &lt;img&gt;
</h2>
<ul>
<li>
<img src="florian-giorgio-P1U7-ZgKeOM-unsplash.jpg" alt="An image" />
</li>
<li>
<img src="florian-giorgio-P1U7-ZgKeOM-unsplash.jpg" alt="An image" />
</li>
<li>
<img src="florian-giorgio-P1U7-ZgKeOM-unsplash.jpg" alt="An image" />
</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<hr />
<h2>
&lt;ul&gt; List of &lt;figure&gt;
</h2>
<ul>
<li>
<figure>
<img src="florian-giorgio-P1U7-ZgKeOM-unsplash.jpg" alt="An image" />
<figcaption>
Caption of the figure
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="florian-giorgio-P1U7-ZgKeOM-unsplash.jpg" alt="An image" />
<figcaption>
Caption of the figure
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="florian-giorgio-P1U7-ZgKeOM-unsplash.jpg" alt="An image" />
<figcaption>
Caption of the figure
</figcaption>
</figure>
</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</body>
</html>