Auto-populate image alt text and attributes from pasted URLs

Summary

Automatically populate image attributes (alt text, width, height, title) when a user pastes a file URL into an image source field in the JSON Editor. The feature fetches attributes from associated media entities when available, and only populates empty fields to preserve user-entered values.

Problem

When users paste image URLs into pattern content, they must manually enter alt text and other image attributes. This is time-consuming and can lead to missing accessibility attributes.

Solution

• Added a backend service (MediaAttributeService) that looks up media entities by file URL and extracts attributes
• Added a REST endpoint to fetch attributes via AJAX
• Enhanced the JSON Editor media library integration to automatically fetch and populate attributes when a user pastes a URL into an image source field
• Attributes are only fetched when the field loses focus (blur event) to reduce unnecessary requests
• Alt text and title fields are only populated if they're currently empty, preserving user-entered values

Technical details

Backend changes

1. MediaAttributeService (modules/patternkit_media_library/src/MediaAttributeService.php)
   • Service that finds file entities by URL and retrieves associated media entities
   • Extracts alt, width, height, and title attributes from media source fields
   • Handles URL normalization including stripping local base URLs from absolute URLs
   • Efficient queries using direct entity lookups instead of loading all entities
2. Controller endpoint (modules/patternkit_media_library/src/Controller/PatternkitMediaLibraryController.php)
   • Added mediaAttributesByUrl() method that accepts a URL parameter
   • Returns JSON response with media attributes
3. Route (modules/patternkit_media_library/patternkit_media_library.routing.yml)
   • Added route /patternkit_media_library/attributes_by_url with proper permissions

Frontend changes

1. JavaScript enhancement (modules/patternkit_media_library/js/patternkit.jsoneditor.media_library.js)
   • Added blur event listener to image source fields (fields ending with .src)
   • Fetches attributes via AJAX when field loses focus
   • Populates sibling fields (alt, width, height, title) with fetched values
   • Only populates alt and title if they're currently empty
   • Width and height are always updated

Testing

• Comprehensive unit tests for MediaAttributeService covering:
  • URL normalization (relative, absolute, external URLs)
  • Base URL stripping for local site URLs
  • File and media entity lookups
  • Attribute extraction
  • Error handling
• Functional JavaScript test verifying blur event behavior

Steps to reproduce

Setup

1. Install Patternkit module with patternkit_media_library submodule
2. Create a media entity with an image that has alt text, width, height, and title set
3. Create or edit a pattern block that has an image field with nested structure (e.g., image.src, image.alt, image.width, image.height, image.title)

Test the feature

1. Navigate to edit a pattern block in Layout Builder
2. Find an image source field (ending in .src)
3. Paste or type a file URL that matches a media entity (e.g., /sites/default/files/image.jpg)
4. Click away from the field or press Tab to blur the field
5. Observe that alt text, width, height, and title are automatically populated

Test preservation of user values

1. Enter a custom alt text value in the alt field
2. Paste a URL into the image source field
3. Blur the field
4. Verify that the custom alt text is preserved and not overwritten

Test edge cases (what should NOT happen)

External URLs

1. Paste an external URL (e.g., https://example.com/image.jpg) into the image source field
2. Blur the field
3. Expected: No attributes are fetched or populated. The system should not attempt to fetch attributes for external URLs that don't match the local site.

Missing/non-existent files

1. Paste a URL to a file that doesn't exist (e.g., /sites/default/files/nonexistent.jpg) into the image source field
2. Blur the field
3. Expected: No attributes are fetched or populated. The system should gracefully handle missing files without errors.

URLs without associated media entities

1. Paste a URL to a file that exists but has no associated media entity
2. Blur the field
3. Expected: No attributes are fetched or populated. The system should not populate fields if no media entity is found.

Invalid URLs

1. Paste an invalid or malformed URL into the image source field
2. Blur the field
3. Expected: No errors are displayed to the user. The system should handle invalid URLs gracefully without breaking the form.

Absolute URLs to local site

1. Paste an absolute URL that matches the local site (e.g., https://yoursite.com/sites/default/files/image.jpg)
2. Blur the field
3. Expected: Attributes are fetched and populated correctly. The system should recognize local site URLs and convert them to relative paths for matching.

Expected result

• When a URL is pasted into an image source field and the field loses focus, attributes are automatically fetched and populated
• Alt text and title are only populated if they're empty
• Width and height are always updated
• User-entered alt text and title values are preserved
• External URLs are ignored (no errors)
• Missing files are handled gracefully (no errors)
• Files without associated media entities don't populate attributes (no errors)
• Invalid URLs are handled gracefully (no errors displayed to user)
• Absolute URLs to the local site are correctly recognized and converted to relative paths

Actual result

✓ Feature works as expected. Attributes are fetched on blur and populated appropriately, with user values preserved.

Files changed

• modules/patternkit_media_library/src/MediaAttributeService.php (NEW)
• modules/patternkit_media_library/src/Controller/PatternkitMediaLibraryController.php
• modules/patternkit_media_library/patternkit_media_library.services.yml
• modules/patternkit_media_library/patternkit_media_library.routing.yml
• modules/patternkit_media_library/js/patternkit.jsoneditor.media_library.js
• modules/patternkit_media_library/tests/src/Unit/MediaAttributeServiceTest.php (NEW)
• modules/patternkit_media_library/tests/src/FunctionalJavascript/JsonEditorMediaSelectionTest.php

API changes

• New service: patternkit_media_library.media_attributes
• New route: patternkit.media_library.attributes_by_url

Configuration

No configuration changes required. The feature works automatically for all image source fields in JSON Editor forms.