printmyblog icon indicating copy to clipboard operation
printmyblog copied to clipboard

Dynamically resize images to fit better on pages

Open mnelson4 opened this issue 3 years ago • 1 comments

Some folks want:

  • eliminate whitespace
  • maintain image placement related to other content

Right now in PMB you can basically do one or the other. But I just learned of a way to have images be dynamically resized according to the remaining space on the page: https://www.princexml.com/forum/topic/4673/what-is-the-best-way-to-reduce-whitespace-before-images?p=1#23543

v1

  • [x] only resize "pmb-dynamic-resize" elements
  • [x] When getting page's HTML, remove all script tags
  • [x] remove all JS (or at least disable it) when submitting to DocRaptor
  • [x] run the prince JS
  • [x] change all "prince-script" (an invalid tag) into regular script tags
  • [x] those "prince scripts" will get all those pmb-resizable images to take up the remaining space

v2

  • [x] Add option to dynamically resize images (start off assuming any images over 1/4 of the pagesize will be dynamically resized)
  • [x] have option to set minimum image size when resizing
  • [x] in JS: find all images in that range and mark them as pmb-dynamic-resize (but ignore images with "pmb-dont-dynamic-resize")

mnelson4 avatar Feb 04 '22 17:02 mnelson4

  • [ ] trouble: images with captions can be too small. When image size is limited by width (or really in any case except page height) we should resize the image itself, not the figure. Not sure about floaters...
  • [ ] pmb_image wrapper on floating classicpress images with no captions is borked. Shoudl probably avoid pmb_image in pro...
  • [x] should add styles based on what limited resized image size to help debug

mnelson4 avatar Mar 18 '22 19:03 mnelson4