Images in wiki page and in export pdf (client side)

Help / Discuss
#1

I have a wiki page with several images that are screenshots taken on a 1920x1080 screen. I usually change the image size in the wiki page (through the Advanced tab of the Edit image dialog) to 800x(whatever keeps the ratio), but it of course can be zoomed in when reading the page.

The issue I’m having is with the PDF export (have set it to be client-side, but I guess it would be the same with the newer server-side solutions).

I have seen the following:

  1. the wiki-resized image in heavily blurred, as if it was stretched back from the resized version (while the image is narrow on the wiki page, it has full width in the PDF), while the unresized image is much more readable
  2. I tried with BMP, PNG and JPEG formats, but none of them respect the DPI I set to the image when exported to the PDF (being a render from a web page I don’t know whether that makes any sense, it just seemes something to try)

Trying to make ad educated guess, I’d say that (1) is due to the fact that the image is resized with height and width HTML img tag attributes, that remain valid when exporting to PDF.

I randomly searched about this and discovered the picture HTML element - that I didn’t know about - maybe it could help here.

Shouldn't headings always be block-level elements?
#2

I found this on Jira Loading... but I’m not totally sure it fits here.

#3

May be the following technique helps you:

XWiki contains 2 defined CSS classes:
.hidden-print for content that will be shown on the screen, but not printed
.visible-print for content that will be printed but not shown on the screen

With a bit manual input and a helping macro you can define different styles for showing the image on the screen and the printed one.

The following velocity macro is a proof of concept:

{{velocity}}
#macro (imagePrint $screen $printer)
(% class="hidden-print"%)[[image:$screen]](%%)(% class="visible-print%)[[image:$printer]](%%)
#end
{{/velocity}}

A call like

{{velocity}}
#imagePrint ("mypicture.png" ,'mypicture.png||style="width:10cm;border:3pt solid red"')
{{velocity}}

will generate a printed image of a forced 10cm width and additionally surrounded with a red border.

#4

Will check your code, thanks, though this sounds like a bug to me.

#5

Hi,

Would be good to specify the XWiki version you’re using. And best is to provide a sample page / content that can be used to reproduce the problem. Or at least the precise steps to reproduce the problem.

Have you made any changes to the PDF Export administration section? Since you’re talking about “client-side” I assume you’re using the default settings which means the PDF export is done using the user’s browser. If that is the case, did you notice any difference between browsers (e.g. Chrome vs. Firefox)?

With client-side PDF export the output should be very similar to what you see in view mode. I’m not aware of any issue regarding images, besides Loading... ,

Thanks,
Marius

1 Like
#6

Sorry, sometimes I forget it: I’m on XWiki 14.10.13

I’m attaching the… no, seems that’s not supported.
I’ve uploaded it on the first online service I found XWiki image PDF export test-3.pdf | DocDroid let me know if you have any issue accessing it.

Anyway, the steps roughly are:

  • I took a screenshot of my whole screen (1920 pixels width)
  • pasted twice in a wiki page
  • once without further changes
  • the other editing its width in the Edit image dialog

Then exported to PDF - I have XWiki set to client-side PDF Export.

No I don’t (think I) have, but here they are:
immagine

Same, with Firefox and Chrome.

But when producing the test for this post I effectively noticed a detail: the issue arises after a certain width.
When the set width is under 700 pixels, the rendered image in the PDF is narrower than the page.

When the width is 700px or more, the image is as wide as the whole page, much like the first image (the one that’s been pasted without changing its width), but differently from that one, it’s content is hardly readable.

Now I think I got why it is like that: when the image is “larger” enough (no DPI info looks to be taken into account so I guess a default DPI is used to convert pixels to millimeters), its width is set so it fits the page width (without being vertically cut), but the base image on which this transformation is applied is the wiki edited image (probably the attributes in the img tag are used), not the original, bigger one.