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>

1 files changed, 23 insertions, 2 deletions

diff --git a/app/views/helpers/index/normal/entry_header.phtml b/app/views/helpers/index/normal/entry_header.phtml
index 7ab2ff70b..784a440a0 100644
--- a/app/views/helpers/index/normal/entry_header.phtml
+++ b/app/views/helpers/index/normal/entry_header.phtml
@@ -1,9 +1,12 @@
 <?php
 	$topline_read = FreshRSS_Context::$user_conf->topline_read;
 	$topline_favorite = FreshRSS_Context::$user_conf->topline_favorite;
+	$topline_thumbnail = FreshRSS_Context::$user_conf->topline_thumbnail;
+	$topline_summary = FreshRSS_Context::$user_conf->topline_summary;
 	$topline_display_authors = FreshRSS_Context::$user_conf->topline_display_authors;
 	$topline_date = FreshRSS_Context::$user_conf->topline_date;
 	$topline_link = FreshRSS_Context::$user_conf->topline_link;
+	$lazyload = FreshRSS_Context::$user_conf->lazyload;
 ?><ul class="horizontal-list flux_header"><?php
 	if (FreshRSS_Auth::hasAccess()) {
 		if ($topline_read) {
@@ -29,8 +32,21 @@
 	}
 	?><li class="item website"><a href="<?= _url('index', 'index', 'get', 'f_' . $this->feed->id()) ?>" title="<?= _t('gen.action.filter') ?>">
 		<?php if (FreshRSS_Context::$user_conf->show_favicons): ?><img class="favicon" src="<?= $this->feed->favicon() ?>" alt="✇" loading="lazy" /><?php endif; ?>
-		<span><?= $this->feed->name() ?></span></a></li>
-	<li class="item title" dir="auto"><a target="_blank" rel="noreferrer" href="<?= $this->entry->link() ?>"><?= $this->entry->title() ?><?php
+		<span><?= $this->feed->name() ?></span></a>
+	</li>
+
+	<?php
+	if ($topline_thumbnail !== 'none'):
+	?><li class="item thumbnail <?= $topline_thumbnail ?> <?= $topline_summary ? '' : 'small' ?>"><?php
+		$thumbnail = $this->entry->thumbnail();
+		if ($thumbnail != null):
+			?><img src="<?= htmlspecialchars($thumbnail['url'], ENT_COMPAT, 'UTF-8') ?>"<?= $lazyload ? ' loading="lazy"' : '' ?><?=
+				empty($thumbnail['alt']) ? '' : ' alt="' . htmlspecialchars(strip_tags($thumbnail['alt']), ENT_COMPAT, 'UTF-8') . '"' ?> /><?php
+		endif;
+	?></li><?php
+	endif; ?>
+
+	<li class="item title<?= (($topline_thumbnail !== 'none') || $topline_summary) ? ' multiline' : '' ?>" dir="auto"><a target="_blank" rel="noreferrer" href="<?= $this->entry->link() ?>"><?= $this->entry->title() ?><?php
 		if ($topline_display_authors):
 			?><span class="author"><?php
 			$authors = $this->entry->authors();
@@ -43,6 +59,11 @@
 			}
 			?></span><?php
 		endif;
+		if ($topline_summary):
+			?><div class="summary">
+				<?= mb_substr(strip_tags($this->entry->content()), 0, 500, 'UTF-8') ?>
+			</div><?php
+		endif;
 	?></a></li>
 	<?php if ($topline_date) { ?><li class="item date"><time datetime="<?= $this->entry->machineReadableDate() ?>"><?= $this->entry->date() ?></time>&nbsp;</li><?php } ?>
 	<?php if ($topline_link) { ?><li class="item link"><a target="_blank" rel="noreferrer" href="<?= $this->entry->link() ?>" title="<?=