UI: Add optional thumbnail and summary on feed items (#3805)

* UI: Add optional thumbnail and summary on feed items

Implements #561

* UI: Thumbnail: Own column, Custom size, Lazy load

* UI: Thumbnail: Remove unnecessary CSS rule

Remove rule already defined in base theme, no override needed

* CSS lint + RTL

* Improve thumbail and summary generation

* Support img alt

* Missing htmlspecialchars

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

4 files changed, 184 insertions, 0 deletions

diff --git a/p/themes/Origine-compact/origine-compact.css b/p/themes/Origine-compact/origine-compact.css
index 562881815..24d9a2e63 100644
--- a/p/themes/Origine-compact/origine-compact.css
+++ b/p/themes/Origine-compact/origine-compact.css
@@ -878,6 +878,43 @@ a.btn,
 	font-size: 0.8rem;
 }
 
+.flux .item.thumbnail {
+	padding: 5px;
+	height: 50px;
+}
+
+.flux .item.thumbnail.small {
+	height: 30px;
+}
+
+.flux .item.thumbnail.portrait {
+	width: 38px;
+}
+
+.flux .item.thumbnail.square {
+	width: 50px;
+}
+
+.flux .item.thumbnail.landscape {
+	width: 80px;
+}
+
+.flux .item.thumbnail.portrait.small {
+	width: 20px;
+}
+
+.flux .item.thumbnail.square.small {
+	width: 30px;
+}
+
+.flux .item.thumbnail.landscape.small {
+	width: 40px;
+}
+
+.flux .item.title .summary {
+	max-height: 1.5em;
+}
+
 .flux .website .favicon {
 	padding: 5px;
 }
diff --git a/p/themes/Origine-compact/origine-compact.rtl.css b/p/themes/Origine-compact/origine-compact.rtl.css
index 62c7c75bd..ccdcb697f 100644
--- a/p/themes/Origine-compact/origine-compact.rtl.css
+++ b/p/themes/Origine-compact/origine-compact.rtl.css
@@ -878,6 +878,43 @@ a.btn,
 	font-size: 0.8rem;
 }
 
+.flux .item.thumbnail {
+	padding: 5px;
+	height: 50px;
+}
+
+.flux .item.thumbnail.small {
+	height: 30px;
+}
+
+.flux .item.thumbnail.portrait {
+	width: 38px;
+}
+
+.flux .item.thumbnail.square {
+	width: 50px;
+}
+
+.flux .item.thumbnail.landscape {
+	width: 80px;
+}
+
+.flux .item.thumbnail.portrait.small {
+	width: 20px;
+}
+
+.flux .item.thumbnail.square.small {
+	width: 30px;
+}
+
+.flux .item.thumbnail.landscape.small {
+	width: 40px;
+}
+
+.flux .item.title .summary {
+	max-height: 1.5em;
+}
+
 .flux .website .favicon {
 	padding: 5px;
 }
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index 77fc8b792..9c2ace776 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -723,11 +723,66 @@ input[type="search"] {
 	position: absolute;
 }
 
+.flux:not(.current):hover .item.title.multiline {
+	position: initial;
+}
+
 .flux .item.title a {
 	color: #000;
 	text-decoration: none;
 }
 
+.flux .item.thumbnail {
+	line-height: 0;
+	padding: 10px;
+	height: 80px;
+}
+
+.flux .item.thumbnail.small {
+	height: 40px;
+}
+
+.flux .item.thumbnail.portrait {
+	width: 60px;
+}
+
+.flux .item.thumbnail.square {
+	width: 80px;
+}
+
+.flux .item.thumbnail.landscape {
+	width: 128px;
+}
+
+.flux .item.thumbnail.portrait.small {
+	width: 30px;
+}
+
+.flux .item.thumbnail.square.small {
+	width: 40px;
+}
+
+.flux .item.thumbnail.landscape.small {
+	width: 64px;
+}
+
+.flux .item.thumbnail img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.flux .item.title .summary {
+	max-height: 3em;
+	color: #666;
+	font-size: 0.9em;
+	line-height: 1.5em;
+	font-weight: normal;
+	white-space: initial;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 .flux .item.title .author {
 	padding-left: 1rem;
 	color: #555;
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index 3e22c9393..db4c73294 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -723,11 +723,66 @@ input[type="search"] {
 	position: absolute;
 }
 
+.flux:not(.current):hover .item.title.multiline {
+	position: initial;
+}
+
 .flux .item.title a {
 	color: #000;
 	text-decoration: none;
 }
 
+.flux .item.thumbnail {
+	line-height: 0;
+	padding: 10px;
+	height: 80px;
+}
+
+.flux .item.thumbnail.small {
+	height: 40px;
+}
+
+.flux .item.thumbnail.portrait {
+	width: 60px;
+}
+
+.flux .item.thumbnail.square {
+	width: 80px;
+}
+
+.flux .item.thumbnail.landscape {
+	width: 128px;
+}
+
+.flux .item.thumbnail.portrait.small {
+	width: 30px;
+}
+
+.flux .item.thumbnail.square.small {
+	width: 40px;
+}
+
+.flux .item.thumbnail.landscape.small {
+	width: 64px;
+}
+
+.flux .item.thumbnail img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.flux .item.title .summary {
+	max-height: 3em;
+	color: #666;
+	font-size: 0.9em;
+	line-height: 1.5em;
+	font-weight: normal;
+	white-space: initial;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 .flux .item.title .author {
 	padding-right: 1rem;
 	color: #555;