Refresh the news page layout, add a lead image setting

README.md

@@ -7,10 +7,12 @@ A news page that shows the latest topics from chosen forums, shortened to a set
 ## Features
 
 - A **News** page at `/news`, linked from the board's navigation bar with an icon you choose.
-- Shows the first post of the newest topics in the forums you pick, with a set number of news per page and pages.
-- Shortens long news to a set number of characters, with a "Read full news" link. Formatting is kept and no tag is cut in half.
-- Visitors can filter the news by forum and by month, and open a single news item.
-- Optional poster information (avatar, rank, profile fields), post buttons, attachments and moved topics.
+- Shows the first post of the newest topics in the forums you pick, as news cards: title, a byline with author, date and forum, the text, and one line with "Read more", the comment count and "View topic".
+- Shortens long news to a set number of characters, with "Read more" only when the text was cut. Formatting is kept and no tag is cut in half.
+- Optionally shows each post's first image above its text, from the text or its attachments.
+- Visitors can filter the news by forum and by month; the active filters show under the filter bar and can be removed one at a time.
+- A single news item has its own page, with a link back to all news and "Reply" for readers who may reply.
+- Optional poster information (avatar, rank, post count, profile fields), post buttons, attachments and moved topics.
 - Shows in **Who is online** when someone is reading the news.
 - Settings under **ACP → Extensions → Newspage**.
 

acp/main_module.php

@@ -63,6 +63,7 @@ public function main($id, $mode)
 			'SETTING_NEWS_USER_INFO' => (bool) $config['news_user_info'],
 			'SETTING_NEWS_POST_BUTTONS' => (bool) $config['news_post_buttons'],
 			'SETTING_NEWS_ATTACH_SHOW' => (bool) $config['news_attach_show'],
+			'SETTING_NEWS_LEAD_IMAGE' => !empty($config['news_lead_image']),
 		));
 	}
 }

adm/style/acp_newspage_settings.html

@@ -46,6 +46,10 @@ <h1>{L_ACP_NEWSPAGE}</h1>
 			<dt><label for="news_post_buttons">{L_NEWS_POST_BUTTONS}{L_COLON}</label><br /><span>{L_NEWS_POST_BUTTONS_EXPLAIN}</span></dt>
 			<dd><input type="checkbox" id="news_post_buttons" name="news_post_buttons" value="1"<!-- IF SETTING_NEWS_POST_BUTTONS --> checked="checked"<!-- ENDIF --> /></dd>
 		</dl>
+		<dl>
+			<dt><label for="news_lead_image">{L_NEWS_LEAD_IMAGE}{L_COLON}</label><br /><span>{L_NEWS_LEAD_IMAGE_EXPLAIN}</span></dt>
+			<dd><input type="checkbox" id="news_lead_image" name="news_lead_image" value="1"<!-- IF SETTING_NEWS_LEAD_IMAGE --> checked="checked"<!-- ENDIF --> /></dd>
+		</dl>
 		<dl>
 			<dt><label for="news_attach_show">{L_NEWS_ATTACH_SHOW}{L_COLON}</label><br /><span>{L_NEWS_ATTACH_SHOW_EXPLAIN}</span></dt>
 			<dd><input type="checkbox" id="news_attach_show" name="news_attach_show" value="1"<!-- IF SETTING_NEWS_ATTACH_SHOW --> checked="checked"<!-- ENDIF --> /></dd>

controller/settings.php

@@ -74,5 +74,6 @@ public function save_settings()
 		$this->config->set('news_attach_show',	$this->request->variable('news_attach_show', false));
 		$this->config->set('news_cat_show',		$this->request->variable('news_cat_show', false));
 		$this->config->set('news_archive_show',	$this->request->variable('news_archive_show', false));
+		$this->config->set('news_lead_image',	$this->request->variable('news_lead_image', false));
 	}
 }

docs/images/screenshots/README.md

@@ -1,20 +1,26 @@
 # NV Newspage screenshots
 
-Captured with [phpbb-release-tools](https://github.com/phpbbmodders/phpbb-release-tools)’ `phpbb-test-board/screenshots.py` on a disposable phpBB 3.3.19 board, with three example news topics. Poster information and the post buttons are turned off; the other settings are the defaults.
+Captured with [phpbb-release-tools](https://github.com/phpbbmodders/phpbb-release-tools)’ `phpbb-test-board/screenshots.py` on a disposable phpBB 3.3.19 board, with four example news topics. Unless a caption says otherwise, **Show the first image above the news** is on, and poster information and the post buttons are off; the other settings are the defaults.
 
 ## News page
 
 <a href="newspage-news.png"><img src="newspage-news.png" width="640" alt="News page"></a>
 
+## Filtered by forum
+
+The chosen forum shows in its filter button and under the bar, where it can be removed.
+
+<a href="newspage-news-filtered.png"><img src="newspage-news-filtered.png" width="640" alt="News page filtered by forum"></a>
+
 ## With poster information and post buttons
 
 **Show user information** and **Show post-related buttons** on, seen by the admin, who gets every button.
 
 <a href="newspage-news-full.png"><img src="newspage-news-full.png" width="640" alt="News page with poster information and post buttons"></a>
 
-## Shortened news
+## Shortened news, no lead image
 
-**Shorten news text** set to 120 characters. Longer news ends with "…", and **Read full news** opens the whole post.
+**Shorten news text** set to 120 characters and **Show the first image above the news** off. Longer news ends with "…", and **Read more** opens the whole post.
 
 <a href="newspage-news-shortened.png"><img src="newspage-news-shortened.png" width="640" alt="News page with shortened news"></a>
 
@@ -26,6 +32,8 @@ Captured with [phpbb-release-tools](https://github.com/phpbbmodders/phpbb-releas
 
 ## A single news item
 
+Seen by the admin, who can reply.
+
 <a href="newspage-single.png"><img src="newspage-single.png" width="640" alt="A single news item"></a>
 
 ## ACP settings

language/de/newspage.php

@@ -28,16 +28,28 @@
 	'NEWS_ARCHIVE_OF'			=> 'Archiv vom %s',
 	'NEWS_ATTACH_SHOW'			=> 'Anhänge anzeigen',
 	'NEWS_ATTACH_SHOW_EXPLAIN'	=> 'Anhänge die in Beiträge eingefügt wurden, werden immer angezeigt.',
-	'NEWS_CAT'					=> 'Kategorien',
+	'NEWS_CAT'					=> 'Foren',
 	'NEWS_CAT_SHOW'				=> 'Erlaube die Foren einzuschränken',
 	'NEWS_CHAR_LIMIT'			=> 'News-Einträge kürzen',
 	'NEWS_CHAR_LIMIT_EXPLAIN'	=> 'Textlänge, „0“ um Kürzen zu unterbinden',
 	'NEWS_COMMENTS'				=> 'Kommentare',
-	'NEWS_FILTER_ARCHIVE'		=> 'Datum filtern',
+	'NEWS_COMMENTS_COUNT'		=> array(
+		0	=> 'Noch keine Kommentare',
+		1	=> '%d Kommentar',
+		2	=> '%d Kommentare',
+	),
+	'NEWS_ALL'					=> 'Alle News',
+	'NEWS_REPLY'				=> 'Antworten',
+	'NEWS_IN_FORUM'				=> 'in %s',
+	'NEWS_READ_MORE'			=> 'Weiterlesen',
+	'NEWS_VIEW_TOPIC'			=> 'Thema ansehen',
+	'NEWS_FILTER_ARCHIVE'		=> 'Alle Monate',
 	'NEWS_FILTER_BY_ARCHIVE'	=> 'Filter News-Einträge nach Jahr und Monat',
 	'NEWS_FILTER_BY_CATEGORY'	=> 'Filter News-Einträge nach Forum',
-	'NEWS_FILTER_CATEGORY'		=> 'Kategorie filtern',
+	'NEWS_FILTER_CATEGORY'		=> 'Alle Foren',
 	'NEWS_FILTER_REMOVE'		=> 'Filter entfernen',
+	'NEWS_FILTER_CLEAR'			=> 'Filter zurücksetzen',
+	'NEWS_FILTER_SHOWING'		=> 'Angezeigt',
 	'NEWS_FORUMS'				=> 'News-Foren auswählen',
 	'NEWS_GO_TO_TOPIC'			=> 'Link zum Thema',
 	'NEWS_NUMBER'				=> 'News pro Seite',

language/en/info_acp_newspage.php

@@ -25,5 +25,7 @@
 	'LOG_NEWSPAGE_SETTINGS' => '<strong>Changed Newspage settings</strong>',
 	'NEWS_ICON' => 'News navigation icon',
 	'NEWS_ICON_EXPLAIN' => 'Font Awesome icon class, for example fa-bullhorn or fa-rss. phpBB 3.3 uses Font Awesome 4.7 and phpBB 4.0 uses Font Awesome 6, so choose a name both have.',
+	'NEWS_LEAD_IMAGE' => 'Show the first image above the news',
+	'NEWS_LEAD_IMAGE_EXPLAIN' => 'Shows the first image of each news post, from the text or its attachments, above the text, and takes it out of the text. A single news item still shows the whole post.',
 	'NEWS_ICON_INVALID' => 'Enter a Font Awesome icon class in the format fa-bullhorn.',
 ));

language/en/newspage.php

@@ -28,16 +28,28 @@
 	'NEWS_ARCHIVE_OF'			=> 'Archive %s',
 	'NEWS_ATTACH_SHOW'			=> 'Show attachments',
 	'NEWS_ATTACH_SHOW_EXPLAIN'	=> 'Inline attachments will always be displayed.',
-	'NEWS_CAT'					=> 'Categories',
+	'NEWS_CAT'					=> 'Forums',
 	'NEWS_CAT_SHOW'				=> 'Allow to filter by forums',
 	'NEWS_CHAR_LIMIT'			=> 'Shorten news text',
 	'NEWS_CHAR_LIMIT_EXPLAIN'	=> 'Text length, “0” to disable shortening',
 	'NEWS_COMMENTS'				=> 'Comments',
-	'NEWS_FILTER_ARCHIVE'		=> 'Filter date',
+	'NEWS_COMMENTS_COUNT'		=> array(
+		0	=> 'No comments yet',
+		1	=> '%d comment',
+		2	=> '%d comments',
+	),
+	'NEWS_ALL'					=> 'All news',
+	'NEWS_REPLY'				=> 'Reply',
+	'NEWS_IN_FORUM'				=> 'in %s',
+	'NEWS_READ_MORE'			=> 'Read more',
+	'NEWS_VIEW_TOPIC'			=> 'View topic',
+	'NEWS_FILTER_ARCHIVE'		=> 'All months',
 	'NEWS_FILTER_BY_ARCHIVE'	=> 'Filter news by date',
 	'NEWS_FILTER_BY_CATEGORY'	=> 'Filter news by forum',
-	'NEWS_FILTER_CATEGORY'		=> 'Filter forum',
+	'NEWS_FILTER_CATEGORY'		=> 'All forums',
 	'NEWS_FILTER_REMOVE'		=> 'Remove filter',
+	'NEWS_FILTER_CLEAR'			=> 'Clear filters',
+	'NEWS_FILTER_SHOWING'		=> 'Showing',
 	'NEWS_FORUMS'				=> 'Select News-Forums',
 	'NEWS_GO_TO_TOPIC'			=> 'Link to topic',
 	'NEWS_NUMBER'				=> 'News per page',

lead_image.php

@@ -0,0 +1,111 @@
+<?php
+/**
+ *
+ * NV Newspage extension for the phpBB Forum Software package
+ *
+ * @copyright (c) 2026, phpBB Modders, https://www.phpbbmodders.com/
+ * @license GNU General Public License, version 2 (GPL-2.0)
+ *
+ */
+
+namespace phpbbmodders\newspage;
+
+/**
+ * Takes the first image out of a rendered post, so the news list can show it
+ * above the text instead of inside it.
+ */
+class lead_image
+{
+	/**
+	 * Find the first post image (a BBCode image or an image attachment) and remove it.
+	 *
+	 * Smilies and other images without phpBB's "postimage" class are skipped. An
+	 * attachment image is removed with its whole attachment block (comment and
+	 * file size), a linked image with its link.
+	 *
+	 * @param string $html Safe HTML returned by phpBB's message renderer
+	 * @return array 'html': the HTML without the image; 'src' and 'alt': the
+	 *               image's address and text, both '' when there is no image
+	 */
+	public function take($html)
+	{
+		$none = array('html' => $html, 'src' => '', 'alt' => '');
+		if ($html === '' || stripos($html, 'postimage') === false)
+		{
+			return $none;
+		}
+
+		$document = new \DOMDocument();
+		$previous = libxml_use_internal_errors(true);
+		$loaded = $document->loadHTML('<?xml encoding="UTF-8"><div>' . $html . '</div>', LIBXML_NONET);
+		libxml_clear_errors();
+		libxml_use_internal_errors($previous);
+		if (!$loaded)
+		{
+			return $none;
+		}
+
+		$wrapper = $document->getElementsByTagName('div')->item(0);
+		$image = null;
+		foreach ($wrapper->getElementsByTagName('img') as $candidate)
+		{
+			if (in_array('postimage', preg_split('/\s+/', $candidate->getAttribute('class')), true) && $candidate->getAttribute('src') !== '')
+			{
+				$image = $candidate;
+				break;
+			}
+		}
+		if ($image === null)
+		{
+			return $none;
+		}
+
+		$src = $image->getAttribute('src');
+		$alt = $image->getAttribute('alt');
+		$this->remove_image($image, $wrapper);
+
+		// Line breaks that came after the image would now start the text
+		while ($wrapper->firstChild !== null && ($wrapper->firstChild->nodeName === 'br' || ($wrapper->firstChild instanceof \DOMText && trim($wrapper->firstChild->nodeValue) === '')))
+		{
+			$wrapper->removeChild($wrapper->firstChild);
+		}
+
+		$result = '';
+		foreach ($wrapper->childNodes as $node)
+		{
+			$result .= $document->saveHTML($node);
+		}
+
+		return array('html' => trim($result), 'src' => $src, 'alt' => $alt);
+	}
+
+	/**
+	 * Remove the image together with the block that only exists to hold it.
+	 *
+	 * @param \DOMElement $image   The image
+	 * @param \DOMElement $wrapper The element around the whole post
+	 * @return void
+	 */
+	protected function remove_image(\DOMElement $image, \DOMElement $wrapper)
+	{
+		// An attachment: drop its whole block, and an inline-attachment wrapper around it
+		$remove = null;
+		for ($node = $image->parentNode; $node !== null && !$node->isSameNode($wrapper); $node = $node->parentNode)
+		{
+			$classes = $node instanceof \DOMElement ? preg_split('/\s+/', $node->getAttribute('class')) : array();
+			if (in_array('inline-attachment', $classes, true) || ($node->nodeName === 'dl' && in_array('file', $classes, true)))
+			{
+				$remove = $node;
+			}
+		}
+
+		// A linked image: drop the link too
+		if ($remove === null)
+		{
+			$parent = $image->parentNode;
+			$remove = ($parent->nodeName === 'a' && trim($parent->textContent) === '') ? $parent : $image;
+		}
+
+		$remove->parentNode->removeChild($remove);
+	}
+}

migrations/v14x/lead_image.php

@@ -0,0 +1,35 @@
+<?php
+/**
+ *
+ * NV Newspage extension for the phpBB Forum Software package
+ *
+ * @copyright (c) 2026, phpBB Modders, https://www.phpbbmodders.com/
+ * @license GNU General Public License, version 2 (GPL-2.0)
+ *
+ */
+
+namespace phpbbmodders\newspage\migrations\v14x;
+
+/**
+ * Adds the setting that shows each news post's first image above its text. Off by
+ * default, so existing boards look the same until an administrator turns it on.
+ */
+class lead_image extends \phpbb\db\migration\migration
+{
+	public function effectively_installed()
+	{
+		return isset($this->config['news_lead_image']);
+	}
+
+	public static function depends_on()
+	{
+		return array('\\phpbbmodders\\newspage\\migrations\\v11x\\acp_settings');
+	}
+
+	public function update_data()
+	{
+		return array(
+			array('config.add', array('news_lead_image', 0)),
+		);
+	}
+}