Resolved

Stock page fails to handle multiple file formats and ultrawide layouts

Astro
Frontend
Image Processing
CSS
Bash
JSON
Responsive Design
SEO

Stock page script only processed Sony ARW files and lacked support for DJI DNG/MP4 formats | Ultrawide panoramas displayed poorly in fixed grid layout | Container overflow caused right-edge clipping

The stock footage page required enhancements to support multiple file formats, responsive ultrawide layouts, and improved metadata handling. The solution involved extending file processing capabilities, fixing responsive design issues, and enhancing accessibility for SEO tags.

Issue

The stock page had several critical limitations:

  1. File Format Support: Only processed Sony ARW files, excluding DJI DNG and MP4 formats, resulting in missing thumbnails for drone footage.
  2. Ultrawide Layout Issues: Panoramas with aspect ratios of 2.4:1 or wider were cramped in a fixed 2-column grid layout, causing horizontal overflow and clipping.
  3. Metadata Gaps: Missing entries for newer Sony camera models (e.g., A7C series, A9 III) and incomplete panorama detection based on manual tagging.
  4. Accessibility: SEO-relevant tags were visually hidden but lacked proper screen reader compatibility.

Culprit

File Format Limitation

The existing thumbnail generation process relied on a hardcoded pattern for ARW files, excluding other formats. Video previews were unsupported due to dependencies on tools that couldn’t extract previews from MP4 files.

Layout Problems

The CSS used the content-box sizing model, which caused the container width (1200px + padding) to exceed viewport bounds, leading to overflow and clipped content. The grid system did not account for aspect ratio variations in ultrawide images.

Metadata Gaps

The camera sensor database was incomplete for newer models, and panorama detection relied on inconsistent manual tagging rather than standardized filename patterns.

Solution

Multi-format Processing

The solution expanded file format support to include DNG and MP4 files using pattern-based matching. Video previews were generated using a tool capable of extracting thumbnails from MP4 files, ensuring consistent thumbnails across all supported formats.

Responsive Layout Fixes

A responsive detection system was implemented to identify ultrawide images (aspect ratio ≥ 2.4:1) and apply conditional styling. The container overflow was resolved by switching to the border-box sizing model, ensuring proper padding and width calculations. Conditional CSS classes dynamically adjusted the layout for ultrawide images.

Metadata Enhancements

The camera sensor database was updated to include entries for newer Sony models. Automatic panorama detection was introduced based on standardized filename patterns (e.g., _pano. or _stitch. suffixes), reducing reliance on manual tagging.

Accessibility

SEO tags were made screen-reader accessible using a visually hidden class that maintains readability while ensuring compliance with accessibility standards.

This approach ensured comprehensive file format support, responsive and accessible layouts, and scalable metadata management while maintaining design integrity and user experience.