Add featured image support to Social Web reader #2506

pfefferle · 2025-11-20T14:03:37Z

Summary

Adds featured image display capability to the ActivityPub Social Web reader feed view.

Changes

Backend: Store first image from ActivityPub attachments as _activitypub_featured_image_url post meta
REST API: Register featured_image field on ap_post post type
Frontend: New featuredImageField component for DataViews
Types: Add featured_image to FeedPost interface and useFeed hook defaults
Styling: Flex-based layout with image positioned on right side via CSS

Implementation Details

Featured images are cached locally during attachment import process
Stored in post meta for efficient retrieval (no filesystem scanning)
Meta is cleaned up on post updates
Users can enable/disable the image field via DataViews properties panel
Image appears as first field in field order, styled to display on the right

Testing

Follow an ActivityPub actor that posts images
View the Social Web feed page
Enable the "Image" field in DataViews properties
Verify images display on the right side of feed items

Checklist

Code follows WordPress coding standards
Changes are properly documented
TypeScript types are updated
Build succeeds without errors

Implements featured image display in the ActivityPub reader feed view: - Store first image from ActivityPub attachments as post meta - Register REST API field for featured_image on ap_post post type - Create featured image field component for DataViews - Add featured_image to feed query and TypeScript types - Position image on the right side using flex layout - Clean up meta on post update The featured image is cached locally during attachment import and stored in post meta for efficient retrieval. Users can enable/disable the image field via DataViews properties panel.

obenland · 2025-11-20T14:16:57Z

Can you help me understand the benefit of designating a featured image?

pfefferle · 2025-11-20T15:17:47Z

that was a feature that was requested at the meetup! to have at least one image show up in the stream view.

/cc @jeherve

obenland · 2025-11-20T15:31:03Z

Have at least one picture show up when excerpt is selected?

pfefferle · 2025-11-20T15:32:37Z

yes

Added a phpcs:ignore comment to suppress VariableAnalysis warnings for the unused $old_url variable in the inline mappings loop, clarifying that only the new URL is needed.

Integrate featured image display into the excerpt field instead of showing it as a separate column. The image now appears below the excerpt text with responsive sizing constraints. Changes: - Move featured image rendering into excerpt field component - Add SCSS styling for excerpt images (300px max dimensions, auto width/height to maintain aspect ratio) - Remove standalone featured image field from feed stage - Remove featured image export from fields index - Image displays with 1em top margin and 4px border radius - Update built assets to reflect source changes

pfefferle · 2025-11-21T16:40:45Z

Updated the featured image implementation:

Featured image is now displayed within the excerpt field instead of as a separate column
Image appears below the excerpt text with proper spacing
Image sizing: 300px max width/height, maintains aspect ratio
Only shows in excerpt view, not in content view
Responsive design with auto width/height

Copilot

Pull request overview

This PR aims to add featured image display capability to the ActivityPub Social Web reader feed view. The implementation stores the first image from ActivityPub attachments as post meta and exposes it through the REST API for display in a new DataViews field component.

Key Changes:

Backend stores first attachment image URL in _activitypub_featured_image_url post meta
REST API exposes featured image via new featured_image field on ap_post post type
Frontend creates featuredImageField component with associated styles
Excerpt field modified to also display featured images inline

Critical Issues:
The featured image field component is created but not properly integrated - it's missing from the fields index export and not added to the DataViews fields array, making the feature non-functional. Additionally, there's duplicate image rendering between the new featured-image field and the excerpt field, creating ambiguity about the intended design.

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
src/social-web/types.ts	Adds optional `featured_image` string property to FeedPost interface
src/social-web/routes/feed/stage.tsx	Removes unused `mediaField` property from defaultLayouts (cleanup)
src/social-web/hooks/use-feed.ts	Adds 'featured_image' to default fields array for REST API queries
src/social-web/components/fields/featured-image/style.scss	New styles for featured image field display (order: 999, right-aligned)
src/social-web/components/fields/featured-image/index.tsx	New DataViews field component for featured images (not integrated)
src/social-web/components/fields/excerpt/style.scss	New styles for inline images in excerpt field
src/social-web/components/fields/excerpt/index.tsx	Modified to conditionally render featured images inline with excerpt text
includes/collection/class-posts.php	Saves first image URL to post meta; deletes meta on update before re-import
includes/class-post-types.php	Registers post meta and REST field for `_activitypub_featured_image_url`
includes/class-attachments.php	Returns inline image mappings with generic 'image/*' mime type
build/social-web/style-feed-stage.css	Compiled CSS missing featured-image styles due to component not being used
build/social-web/style-feed-stage-rtl.css	RTL version of compiled CSS, also missing featured-image styles
build/social-web/feed-stage.js	Compiled JavaScript with excerpt field changes but no featured-image field

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/social-web/components/fields/featured-image/style.scss

src/social-web/components/fields/featured-image/index.tsx

src/social-web/components/fields/excerpt/index.tsx

includes/class-post-types.php

src/social-web/components/fields/excerpt/index.tsx

build/social-web/style-feed-stage.css

src/social-web/routes/feed/stage.tsx

includes/class-attachments.php

The featured image in the excerpt field now properly decodes HTML entities in the post title when used as alt text. This ensures that titles containing entities like &, ", etc. are properly displayed to screen readers and other assistive technologies.

pfefferle · 2025-11-21T16:49:47Z

Copilot Feedback Review

I've reviewed all 7 Copilot comments on this PR. Here's the status:

✅ Fixed

HTML entities in alt text (excerpt/index.tsx:36)

Valid accessibility issue
Fixed by adding decodeEntities() to the image alt attribute
Ensures titles with entities like &, " are properly displayed to screen readers

❌ Not Applicable

The remaining 6 comments reference the standalone featured-image field component, which has been removed from this implementation. The featured image is now integrated directly into the excerpt field instead of being a separate column. The referenced code is no longer used or exported.

Specific comments not applicable:

Browser support for :has() pseudo-class - references unused component
Duplication between featured-image and excerpt components - excerpt now handles both
Unused register() call return value - standard REST API pattern, not an issue
Featured image width constraints - component no longer in use
REST API response structure - standard WordPress pattern
Additional duplication comment - resolved by integration approach

The new implementation displays the featured image within the excerpt field, maintaining aspect ratio with a 300px max dimension constraint. This provides a cleaner UI with the image positioned below the excerpt text.

obenland · 2025-11-21T17:34:53Z

@jeherve @pfefferle Can you help me understand the need for this?

to have at least one image show up in the stream view.

Why wouldn't I use the content view in that case?

The more I use the app myself, the more I wonder if we should remove the excerpt view all-together. It looks pretty bad for Note content.

pfefferle · 2025-11-21T18:22:37Z

I am quite the opposite. some full blog post breaks the readability a lot!

obenland · 2025-11-21T18:30:20Z

Sure, but I wouldn't expect those to show up as Notes? And if they do that's probably something we should address with the platform they use.

Maybe we should add that short form/long form switch sooner rather than later.

pfefferle · 2025-11-21T18:37:58Z

Are we talking about the same thing? This is about having the excerpt in the main view not?

What has this todo with the object-type filter?

pfefferle · 2025-11-21T18:41:13Z

Maybe we should add that short form/long form switch sooner rather than later.

what is that?

Since the excerpt field was removed in the add/reader branch, this change migrates the featured image functionality into the content field instead. Changes: - Add featured image rendering to content field for both Notes (full content) and Articles (excerpt) - Decode HTML entities in alt text for accessibility - Add image styles for both content and excerpt contexts - Images display with 300px max dimensions and 4px border radius - Images have 1em top margin for proper spacing

Clean up the excerpt field directory that was left over from the migration to content field. The excerpt field was removed in the add/reader branch and its functionality has been merged into the content field.

obenland

I still don't think this is needed. If you feel strongly about having it we should not process them and display them for Note types, though.

obenland · 2025-11-26T14:10:09Z

includes/collection/class-posts.php

+			// Save the featured image URL as post meta for efficient retrieval.
+			if ( ! empty( $files ) ) {
+				foreach ( $files as $file ) {
+					// Check if this is an image file.
+					if ( isset( $file['mime_type'] ) && 0 === strpos( $file['mime_type'], 'image/' ) ) {
+						\update_post_meta(
+							$post_id,
+							'_activitypub_featured_image_url',
+							$file['url']
+						);
+						break; // Only save the first image.
+					}
+				}
+			}


This should happen as part of Attachments::import_post_files()

includes/class-post-types.php

obenland · 2025-11-26T14:14:25Z

src/social-web/components/fields/content/index.tsx

+					{ hasFeaturedImage && (
+						<img
+							src={ item.featured_image }
+							alt={ decodeEntities( item.title?.rendered || __( 'Post image', 'activitypub' ) ) }
+							className="activitypub-feed-content__image"
+							loading="lazy"
+						/>
+					) }


We shouldn't add a featured image to Notes, it'll likely duplicate an image that gets displayed as part of the content.

Yes, that was an unfinalized port from the excerpt/content system to the new "magic" content system.

src/social-web/components/fields/content/index.tsx

src/social-web/components/fields/featured-image/index.tsx

Co-authored-by: Konstantin Obenland <[email protected]>

pfefferle marked this pull request as draft November 20, 2025 14:03

github-actions bot added [Feature] Collections [Focus] Editor Changes to the ActivityPub experience in the block editor labels Nov 20, 2025

pfefferle self-assigned this Nov 20, 2025

Merge add/reader into add/reader-featured-image

7e7dd90

github-actions bot added the [Status] In Progress label Nov 21, 2025

Add phpcs ignore for unused variable in attachments

c1d45c0

Added a phpcs:ignore comment to suppress VariableAnalysis warnings for the unused $old_url variable in the inline mappings loop, clarifying that only the new URL is needed.

pfefferle requested review from Copilot and obenland November 21, 2025 16:37

pfefferle marked this pull request as ready for review November 21, 2025 16:37

Copilot started reviewing on behalf of pfefferle November 21, 2025 16:37 View session

pfefferle force-pushed the add/reader-featured-image branch from f23b7e7 to eb5669c Compare November 21, 2025 16:40

Copilot finished reviewing on behalf of pfefferle November 21, 2025 16:41

Copilot AI reviewed Nov 21, 2025

View reviewed changes

github-actions bot added [Feature] Notifications [Feature] REST API labels Nov 25, 2025

github-actions bot added [Tests] Includes Tests Docs labels Nov 25, 2025

Merge add/reader branch into add/reader-featured-image

0d86acc

pfefferle force-pushed the add/reader-featured-image branch from 7f25182 to 0d86acc Compare November 25, 2025 16:52

pfefferle added 2 commits November 25, 2025 17:55

Remove excerpt field directory

ba5b663

Clean up the excerpt field directory that was left over from the migration to content field. The excerpt field was removed in the add/reader branch and its functionality has been merged into the content field.

obenland reviewed Nov 26, 2025

View reviewed changes

pfefferle and others added 3 commits November 27, 2025 13:19

Update src/social-web/components/fields/content/index.tsx

7ad32e3

Co-authored-by: Konstantin Obenland <[email protected]>

Update src/social-web/components/fields/featured-image/index.tsx

7f379d0

Co-authored-by: Konstantin Obenland <[email protected]>

Merge branch 'add/reader' into add/reader-featured-image

31a58f7

obenland force-pushed the add/reader branch from f1f56fe to 33463d0 Compare December 8, 2025 19:37

Add featured image support to Social Web reader #2506

Are you sure you want to change the base?

Add featured image support to Social Web reader #2506

Conversation

pfefferle commented Nov 20, 2025

Summary

Changes

Implementation Details

Testing

Checklist

Uh oh!

obenland commented Nov 20, 2025

Uh oh!

pfefferle commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

obenland commented Nov 20, 2025

Uh oh!

pfefferle commented Nov 20, 2025

Uh oh!

pfefferle commented Nov 21, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

pfefferle commented Nov 21, 2025

Copilot Feedback Review

✅ Fixed

❌ Not Applicable

Uh oh!

obenland commented Nov 21, 2025

Uh oh!

pfefferle commented Nov 21, 2025

Uh oh!

obenland commented Nov 21, 2025

Uh oh!

pfefferle commented Nov 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pfefferle commented Nov 21, 2025

Uh oh!

obenland left a comment

Choose a reason for hiding this comment

Uh oh!

obenland Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

obenland Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

pfefferle Nov 27, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

pfefferle commented Nov 20, 2025 •

edited

Loading

pfefferle commented Nov 21, 2025 •

edited

Loading