Automatic Scaling of Images (Export or Print PDF)

[Athanasios_Ladas]

IDEA:
While in a document, by clicking a button or with shorcut combo, remnote automatically scales up to maximum every image of each bullet (which is not hidden). In that way the content of the images can be shown for all bullet points and Printing to A4-Paper looks briliant.

BACKGROUND:
While certainly RemNote is about digital-learning (I am a big fan of it, like you guys), it is usefull to print out the accumulated and dense knowledge in real world paper. Because you can make books with a lot of pages (multi-dimensions) and not need for that hundert monitors, which would be the way digitally. As you can see from my screenshot, next to each bullet-point I like to save images which describe the bullet-point, but I always scale them down to the minimum so that I can review them whenever I want but they do not clutter up the document. Would you be interested to implement this? Is it a tedious task or rather not? Please let me know and thank you in advance!

[hannesfrank]

That is a pretty cool usage of images!

You can overwrite image width with Custom CSS.

How stuff looks when printed is also controlled by CSS. The current printing style is far from optimized though.

Not tested yet but max width images should be something along the lines of the following (based on a snippet by @dukkha):

@media print {
  .react-resizable, img {
     max-width: none !important;
     width: 100% !important;
     height: auto !important;
  }
}

There are multiple variations for when to enlarge the images, e.g. only when printing (the above snippet) and/or when the document is tagged with a certain styling tag.

[Badjer]

So if we were wanting to enlarge it in situations where we were not printing we would simply replace the @print with a tag presumably?

[Athanasios_Ladas]

Thank you, yes, its really very practical to use the images like that.

I am kind of a noob with css so bare with me

I tried creating one custom-css with the given code. For testing I set one tag #printmax. Then taged the desired document. The print out did not give the desired results.

Does the code apply to the taged bullet point only or also all the children bullet points?

When you find the time to check on this, please let me know.

Thanks, much appreciated!

[dukkha]

I think it should be:

        @media print { 
          .react-resizable, img {
             max-width: none !important;
             width: 100% !important;
             height: auto !important;
          }
        }

[Athanasios_Ladas]

@dukkha

Works perfectly!

And how could we get the document to maximize the images with tagging?

We call this function?

.tree-node-container[data-rem-container-tags~=imagemax]

How is the syntax?

[dukkha]

I think it’s:

[data-rem-container-tags~="imagemax"] .react-resizable,
[data-rem-container-tags~="imagemax"] img,
[data-document-tags~="imagemax"] .react-resizable,
[data-document-tags~="imagemax"] img  {
     max-width: none !important;
     width: 100% !important;
     height: auto !important;
}

[Athanasios_Ladas]

@dukkha yes, exactly that works! Thank you a lot!

Now, one last cool option would be to combine both of your code to make a super-combo namely to utilize the tagging and the @media print -for the scenario that someone wants to tag beforehand the documents which later by printout need enlarged images.

Another option would be to play around with the ratio, in other words to create a set of tags for example #image20, #image40 etc since some pictures differ from other. In that way the prinout can be optimized.

Thank you!

[dukkha]

@Athanasios_Ladas

1. just copy the second code snippet and wrap it with @media print { } ，which will be only for print mode.
2. you can use #image20 with the code below:

[data-rem-container-tags~="image20"] .react-resizable,
[data-document-tags~="image20"] .react-resizable
  {
     max-width: none !important;
     width: 100% !important;
     height: auto !important;
}

[data-rem-container-tags~="image20"] img,
[data-document-tags~="image20"] img {
     max-width: none !important;
     width: 20% !important;    /* change the 20% here to what you want */
     height: auto !important;
}

[Athanasios_Ladas]

I will test it and report back for the people in the forum.

Because screenshots/ photos can be made anywhere and can provide content from various sources, being able to handle these images in the remnote documents (when printing or viewing) is really useful.

So thanks for the implementation