Log in / Register

Forum › How do I...?

Switch between image source based on some input parameter

twouters
Hi, I have the following problem:

Based on 'some' input parameter to Prince command line, I need to switch between two or more sources of an image. In practice right now, it will be a low resolution and high resolution version of the same image. We would prefer it if prince would only load the correct image because the high resolution images could be very big (so the recompression option is less viable as it would impact performance a lot).

Reading through the documentation, one possible solution seemed to be to pass a custom media type using the --media command line switch and then using something like:

<picture>
	<source srcset="lowres.jpg" media="lowres">
	<img srcset="highres.jpg" alt="my image" />
</picture>


Unfortunately, prince doesn't seem to support srcset. So I added a polyfill for this and enabled javascript with --javascript. But this doesn't work. We assume because the matchMedia() function is not available in prince. So I added a polyfill for that too, but it relies on window.media or window.styleMedia which are undefined in prince...

So my question is, is there a good polyfill for matchMedia in prince? Or does anyone know an easier/cleaner way to solve the problem? Maybe using media features or some dpi command line switch?

As far as I could tell the --raster options are only relevant if you are ok with the output being an image (which we don't want). And --css-dpi would affect all css dimensions, not just for images.

Thanks for any pointers.
markbrown
Hi,

You can pass in script and style files on the command line, so another approach might be to delete the unwanted images with some javascript or to manipulate the styling with some CSS (e.g., so all have display:none except the chosen ones).

Mark
hallvord
Hi twouters,
there may be some requirement or complication I'm missing, but the following simplistic approach works for me:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Thread 4356: picture, source</title>
    <style>
      @media lowres {
        img[media=hires] {display: none;}
      }
      @media hires {
        img[media=lowres] {display: none;}
      }
    </style>
  </head>
  <body>
    <p>
      <picture>
      	<img src="4356-lowres.jpg" media="lowres">
      	<img src="4356-hires.jpg" media="hires">
      </picture>
    </p>
  </body>
</html>


And running Prince with arguments like prince --media=lowres file.htm.

Perhaps inventing a media attribute for IMG isn't quite kosher.. You can call it data-media or data-mode or some such for more reliable future compatibility. Also I should note that I don't know if it has other side effects to pass in a made-up media keyword - like styles in 
@meda print
sections perhaps not working anymore.. but I hope this gives you some ideas you can build on to do what you need.

Announcement: repos for tests/utils

Edited by hallvord