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>

2 files changed, 49 insertions, 2 deletions

diff --git a/app/views/configure/display.phtml b/app/views/configure/display.phtml
index 483793722..efeb189aa 100644
--- a/app/views/configure/display.phtml
+++ b/app/views/configure/display.phtml
@@ -75,6 +75,27 @@
 			</div>
 		</div>
 
+		<?php $topline_thumbnail = FreshRSS_Context::$user_conf->topline_thumbnail; ?>
+		<div class="form-group">
+			<label class="group-name" for="topline_thumbnail"><?= _t('conf.display.thumbnail.label') ?></label>
+			<div class="group-controls">
+				<select name="topline_thumbnail" id="topline_thumbnail" required="" data-leave-validation="<?= $topline_thumbnail ?>">
+					<option value="none" <?= $topline_thumbnail === 'none' ? 'selected="selected"' : '' ?>>
+						<?= _t('conf.display.thumbnail.none') ?>
+					</option>
+					<option value="portrait" <?= $topline_thumbnail === 'portrait' ? 'selected="selected"' : '' ?>>
+						<?= _t('conf.display.thumbnail.portrait') ?>
+					</option>
+					<option value="square" <?= $topline_thumbnail === 'square' ? 'selected="selected"' : '' ?>>
+						<?= _t('conf.display.thumbnail.square') ?>
+					</option>
+					<option value="landscape" <?= $topline_thumbnail === 'landscape' ? 'selected="selected"' : '' ?>>
+						<?= _t('conf.display.thumbnail.landscape') ?>
+					</option>
+				</select>
+			</div>
+		</div>
+
 		<div class="form-group">
 			<label class="group-name"><?= _t('conf.display.icon.entry') ?></label>
 			<div class="group-controls">
@@ -86,6 +107,7 @@
 							<th title="<?= _t('gen.action.mark_favorite') ?>"><?= _i('bookmark') ?></th>
 							<th><?= _t('conf.display.icon.related_tags') ?></th>
 							<th><?= _t('conf.display.icon.sharing') ?></th>
+							<th><?= _t('conf.display.icon.summary') ?></th>
 							<th><?= _t('conf.display.icon.display_authors') ?></th>
 							<th><?= _t('conf.display.icon.publication_date') ?></th>
 							<th><?= _i('link') ?></th>
@@ -102,6 +124,9 @@
 								data-leave-validation="<?= FreshRSS_Context::$user_conf->topline_favorite ?>"/></td>
 							<td><input type="checkbox" disabled="disabled" /></td>
 							<td><input type="checkbox" disabled="disabled" /></td>
+							<td><input type="checkbox" name="topline_summary" value="1"<?=
+								FreshRSS_Context::$user_conf->topline_summary ? 'checked="checked"' : '' ?>
+								data-leave-validation="<?= FreshRSS_Context::$user_conf->topline_summary ?>"/></td>
 							<td><input type="checkbox" name="topline_display_authors" value="1"<?=
 								FreshRSS_Context::$user_conf->topline_display_authors ? ' checked="checked"' : '' ?>
 								data-leave-validation="<?= FreshRSS_Context::$user_conf->topline_display_authors ?>"/></td>
@@ -125,6 +150,7 @@
 								FreshRSS_Context::$user_conf->bottomline_sharing ? ' checked="checked"' : '' ?>
 								data-leave-validation="<?= FreshRSS_Context::$user_conf->bottomline_sharing ?>"/></td>
 							<td><input type="checkbox" disabled="disabled" /></td>
+							<td><input type="checkbox" disabled="disabled" /></td>
 							<td><input type="checkbox" name="bottomline_date" value="1"<?=
 								FreshRSS_Context::$user_conf->bottomline_date ? ' checked="checked"' : '' ?>
 								data-leave-validation="<?= FreshRSS_Context::$user_conf->bottomline_date ?>"/></td>
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="<?=