pkgdown icon indicating copy to clipboard operation
pkgdown copied to clipboard

Target `<source srcset="...">` for redirecting figures

Open yjunechoe opened this issue 1 year ago • 1 comments

Currently, redirecting image relative paths only targets <img src="...">:

https://github.com/r-lib/pkgdown/blob/3979e7c0afbba4503248dc8a6d04fe0a2e03f26f/R/tweak-tags.R#L82-L91

But it'd be nice if this also targeted the srcset attribute of <source> tags, which can host variants of an image based on specific media rules (light/dark mode, window sizes, etc.).

In my use case, I render readme examples with {asciicast} using its dark mode support, which renders to markdown like so:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="man/figures/README-/setup-io-dark.svg">
  <img src="man/figures/README-/setup-io.svg" style="display: block; margin: auto;" />
</picture>

However, the pkgdown html only redirects the relative path to the light-mode image in <img> and not the dark-mode image in <source>

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="man/figures/README-/setup-io-dark.svg">
  <img src="reference/figures/README-/setup-io.svg" style="display: block; margin: auto;"></source>
</picture>

A minimally-invasive fix might involve defining a new tweak_source_srcset() variant and simply calling it where tweak_img_src() is called. Happy to work on a PR for this if this is within scope!

yjunechoe avatar Feb 19 '24 19:02 yjunechoe