Skip to content

feat: add mobile image variant sources to pictures#2433

Draft
ArnaudLigny wants to merge 6 commits into
masterfrom
image-mobile
Draft

feat: add mobile image variant sources to pictures#2433
ArnaudLigny wants to merge 6 commits into
masterfrom
image-mobile

Conversation

@ArnaudLigny

Copy link
Copy Markdown
Member

This pull request adds support for mobile image variants throughout the codebase, allowing the system to automatically detect and serve mobile-specific image files (e.g., image.mobile.png) using the <picture> element and appropriate media queries. The changes include configuration options for mobile variants, logic to generate mobile <source> elements, and tests to verify the new functionality.

Support for mobile image variants:

  • Added mobile_suffix and mobile_media_query configuration options to both config/default.php and tests/fixtures/website/config.yml, enabling specification of mobile image variants and their associated media queries. [1] [2] [3] [4]
  • Implemented buildMobileAssetPath and buildMobileSourceAttributes methods in src/Asset/Image.php to construct and handle mobile image variant paths and <source> attributes for responsive images. [1] [2]

Rendering and parsing enhancements:

  • Updated src/Converter/Parsedown.php to detect mobile image variants, cache their source attributes, and inject them into the <picture> element alongside dark variants, ensuring correct rendering in markdown. [1] [2] [3] [4] [5]
  • Updated src/Renderer/Extension/Core.php to build and include mobile <source> elements in the HTML output for images, using the new configuration options and logic. [1] [2]

Testing:

  • Enhanced integration tests in tests/IntegrationTests.php to verify that mobile variant sources are present in the generated HTML with correct media attributes and file paths.

Introduce configurable mobile image variants (`mobile_suffix` and `mobile_media_query`) for both page body parsing and layout image rendering. The image pipeline now auto-detects mobile sibling assets, generates responsive `<source>` entries (including format conversions/fallbacks), and prepends them in `<picture>` output alongside dark-mode variants. Integration fixtures/tests were updated with a mobile logo asset and assertions for media/source output ordering.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR adds first-class support for mobile-specific image variants (e.g., image.mobile.png) so Cecil can emit <picture> elements containing additional <source> entries targeting mobile via a configurable media query.

Changes:

  • Added mobile_suffix and mobile_media_query configuration for both Markdown-rendered images and Twig html() rendering.
  • Implemented mobile-variant path detection and <source> attribute generation for responsive/format variants.
  • Extended integration tests + fixtures to validate mobile variant <source> output.

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
config/default.php Adds default configuration options for mobile image variants (pages + layouts).
src/Asset/Image.php Implements mobile-variant path building and <source> attribute generation.
src/Converter/Parsedown.php Detects/caches mobile variant sources and injects them into Markdown-generated <picture>.
src/Renderer/Extension/Core.php Emits mobile <source> elements when rendering images via Twig extension.
tests/fixtures/website/config.yml Enables mobile variant settings in the integration test fixture site.
tests/IntegrationTests.php Asserts generated HTML contains the expected mobile variant <source> and media query.

Comment thread src/Asset/Image.php
Comment thread src/Asset/Image.php
Comment thread config/default.php Outdated
Comment thread config/default.php Outdated
@ArnaudLigny ArnaudLigny self-assigned this Jul 7, 2026
ArnaudLigny and others added 5 commits July 8, 2026 01:20
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants