nprasad2077/FreshRSS-Extensions

0 Fork 0

mirror of https://github.com/FreshRSS/Extensions.git synced 2026-11-04 10:48:40 +00:00

Files

T

NopeCharon bee3194ea0 [GridView] Fetch Open Graph images with the FreshRSS HTTP client (#559 )

The optional Open Graph thumbnail fetching downloaded article pages with
file_get_contents() on an http(s) URL. Since FreshRSS 1.30.0, every stream
wrapper except file:// and php:// is unregistered at startup, so that call
always fails and no og:image / twitter:image is ever found, both when
entries are inserted and through the asynchronous AJAX endpoint.

Use FreshRSS_http_Util::httpGet() instead, like the core favicon lookup.
It goes through cURL and also applies the system proxy and cURL options,
the internal-host (SSRF) checks, Retry-After handling and the HTML cache.
The previous 5-second timeout is kept, and relative image URLs are now
resolved against the URL reached after redirects.

FreshRSS_http_Util::httpGet() exists since FreshRSS 1.28.0, so raise the
declared compatibility accordingly and bump the version to 1.1.2.

2026-10-27 08:26:41 +01:00

6.2 KiB

Raw Blame History

Grid View Extension for FreshRSS

A card/grid view extension for FreshRSS that displays feed entries in a responsive multi-column layout with prominent images.

Features

Card-based layout: Displays entries as cards with thumbnails, titles, source info, and descriptions
Configurable columns: Choose between 2, 3, or 4 columns via the extension settings
Responsive design: Automatically adjusts to fewer columns on tablets and mobile
Smart thumbnail extraction: Uses feed thumbnails when available, falls back to extracting images from content (filters out small images <400x400, logos, icons, and theme assets)
Open Graph image fetching: Optionally fetches OG images from article pages that have no thumbnail in the RSS feed (async with max 3 concurrent fetches)
Category/feed header: Shows the current category or feed name at the top of the grid (“Main Stream” when viewing all feeds)
Action bar overlay: Action buttons (mark read, star, share, open) appear as a transparent overlay on the card thumbnail on hover (desktop) or tap (mobile)
Mobile-friendly: Tapping the article title opens the link directly without requiring card selection first; tapping elsewhere on the card toggles the action bar
Mobile sidebar toggle: Optional floating hamburger button on mobile screens to open the FreshRSS sidebar without scrolling to the top
Browser Reader Mode: Opens articles in Firefox Reader Mode (or equivalent) for distraction-free reading
FreshRSS Native Share: Integrated share dropdown using your configured sharing services
Star/Favorite support: Mark articles as favorites directly from the card with AJAX sync
Sort by publication date: Optional setting to default sorting to publication date (newest first)
Keyboard shortcut: Press G to toggle grid view on/off
Dark theme support: Works seamlessly with FreshRSS dark themes
Persistent preference: Your grid view state is saved locally across sessions
No flash of list view: Seamless transitions during AJAX feed navigation with FOLV prevention

Screenshots

Grid view — 3 columns (single feed):

Installation

Download or clone this repository
Copy the xExtension-GridView folder to your FreshRSS extensions/ directory
In FreshRSS, go to Settings → Extensions
Enable the “Grid View” extension

Usage

After enabling the extension, go to its configuration page to set your preferred options
Click the grid icon (▦) in the header area or press G on your keyboard to toggle grid view
Click on any card to open the article in browser Reader Mode (Firefox) or a new tab
Hover over a card (or tap on mobile) to reveal the action buttons:
- ✓ Mark as Read: Toggle read/unread state
- ★ Star: Mark the article as a favorite (syncs with FreshRSS)
- 🔗 Share: Opens FreshRSS native share dropdown with your configured sharing services
- ↗ Open: Open the original article in a new tab
Articles are automatically marked as read when you click on them

Your grid view preference is saved locally and persists across sessions.

Configuration

Option	Description	Default
Number of columns	How many columns to display (2-4)	3
Thumbnail fetching	Fetch Open Graph images from article pages that lack thumbnails	Off
Default sorting	Sort by publication date, newest first	Off
Mobile menu button	Show a floating sidebar toggle button on mobile screens	Off
Sticky navigation bar	Keep the top navigation bar visible while scrolling	On

Requirements

FreshRSS 1.28.0 or later

Responsive Breakpoints

Screen Width	Columns
> 1200px	Configured value (2-4)
900px - 1200px	Up to 3
600px - 900px	2
< 600px	1

Development

File Structure

xExtension-GridView/
├── metadata.json		 # Extension metadata
├── extension.php		 # Main PHP class (hooks, OG image fetching, config)
├── configure.phtml		 # Configuration form
├── static/
│	├── grid.css		 # Grid layout styles
│	├── grid.js			 # Card transformation + state sync logic
│	└── placeholder.jpg	 # Fallback thumbnail image
├── i18n/
│	├── en/ext.php		 # English translations
│	├── fr/ext.php		 # French translations
│	└── de/ext.php		 # German translations
├── LICENSE
└── README.md

How It Works

The extension registers hooks during init(): js_vars injects configuration, entry_before_display injects thumbnail markers, and optionally entry_before_insert fetches OG images
JavaScript adds a toggle button and listens for the G keyboard shortcut
When grid view is enabled, the stream container gets a .grid class and a gridview-active class is added to body (for FOLV prevention)
A context header is inserted showing the current category, feed name, or “Main Stream”
FreshRSS date separator .transition elements are hidden in grid mode
JavaScript transforms existing .flux elements into card format with:
- Thumbnail extraction (with smart filtering for size and type)
- Action bar overlay on the thumbnail (visible on hover/tap)
- Star button with AJAX sync via FreshRSS bookmark links
- Share button using FreshRSS native share dropdown
CSS applies the grid layout using CSS Grid with --gridview-columns custom property
MutationObservers watch for dynamically loaded entries, stream replacements, and state changes (read/unread/favorite)
Click handlers open articles in browser Reader Mode and mark as read
On mobile, tapping the article title opens the link directly; tapping elsewhere toggles the action bar
When the mobile menu button setting is enabled, a floating hamburger button appears at the bottom-left on screens under 841px, toggling the FreshRSS sidebar via toggle_aside_click()

License

AGPL-3.0 - See LICENSE for details.

Credits

Built for FreshRSS

6.2 KiB Raw Blame History