Image display size

[eemantsal]

If you insert an image to illustrate some text, it seems it' not possible to resize its display, right? I haven't seen any tool to modify the display size ot he images (while keeping the original resolution), which is a problem especially if you are going to print or export to PDF your note, because if the image is too big it will overflow the page. The option or reducing them and once done, insert them in QOwnNotes is a tedious task and ruins original resolution, so if you print your note, those reduced images would lose sharpness. Would it be possible to resize images easily?

[pbek]

Thank you for your suggestion, I already tried to work on that.

Currently I'm reducing the display width to 980px for embedded images in the preview (if they are larger than that). Without using a fully fledged browser for the preview (what would increase the size of QOwnNotes dramatically) I'm not able to resize the images to the width of the preview pane.

I will close this task now and keep it for future reference in case of QOwnNotes will use a fully fledged browser in the future. Just answer here if you did mean something different.

[eemantsal]

Hmm, no, I don't think I meant anything different, just being able to reduce an image's size to accomodate it to a basic page layout we may want, and then, when printing, having the original image size in pixels fit in the modified size in centimeters, so our image doesn't loss sharpness; pretty much like when you reduce dimensions in, say, The Gimp to print a multimegapixels photo to an A5 sized paper sheet, but all the pixels of the image are preserved, so reducing the size in fact increases the resolution in pixels per cm/inch. As you see my english isn't the best possible, heheh, but I hope I've explained myself decently.

BTW, I share your point: I also think it's better to keep QON slim and agile tan increase its size a lot. If only some day this feature request can be realized, great, but this feture can obviously be done with other software like common word processors, so, it's ok, if it has to wait.

[pbek]

QOwnNotes does no image processing because it has no concept of paper sizes. There only is a plain text file to edit and a html preview of rendered markdown. There also aren't any specifications of image sizes in markdown and screen sizes of users vary. Maybe I can set the image size in the preview to the size preview pane.

[pbek]

I implemented that now in the just released version 16.04.18. Can you please report back if it works for you?

[eemantsal]

What should I test exactly, should the images be resizeable now? I don't notice any difference in the new verison, sorry. :-/

[pbek]

from the changelog:

• the width of images in the preview will now be reduced to the width of the preview pane if they are larger than that

[piyo-gh]

I think this feature doesn't work on Windows, because path to image file is file:///C/... on Windows.

[pbek]

Thank you for your report. What doesn't work under windows? The resizing of images in the preview or the preview of images at all? How was the image embedded into the note (please describe the process)?

[piyo-gh]

Preview of images is ok, but resizing of images doesn't work on Windows at all. Images are always orignal size in preview panel.

[pbek]

You are right, it doesn't work and it really has to do something to do with the image size detection under windows. I will fix that in the next release. Thank you for the report!

[eemantsal]

«the width of images in the preview will now be reduced to the width of the preview pane if they are larger than that»

No, doesn't work here either (Linux, KDE/Plasma 5). Images are always the same size, no matter how wide I set the program's window.

[pbek]

@eemantsal which version of QOwnNotes did you test? can you please post the image link from the note and the image which use used?

[eemantsal]

QON 16.04.18, I think it's the most recent so far, no? Can images be uploaded here, in GitHub? It seems that not, right?

[pbek]

Most recent is 16.05.0 but your version should be ok. You can upload files right here in the comment.

[eemantsal]

Definitely I need to improve my attention, heheh: I hadn't seen that right below this text box theres a link to attach files (>_<) Besides, I hadn't notice that there is a new version, so I've updated and done a couple of tests, now on the version 16.05.0:

Test A

• With QON's window maximized vertically but just occupying about half of my horizontal screen size, I insert a screenshot, 1075x1115 px., from this page; the preview is almost correctly fit to the preview's pane size; I say "almost", because, as you can see in the first screenshot, at the lower right corner, there's a slight disadjustment, QON doesn't fit the image perfectly. It is a very minor fail, nevertheless.
• Now if I maximize QON's window totally, the image remains the same size. There's also a failure that makes QON to increase the left pane a lot, but not the edit and preview panes, so I had to adjust them by hand. Anyway, we are talking about image resize now, so, after adjusting by hand, the result can be seen in the second screenshot, QON_A2.png
• Let's now revert to the original window size by right clicking on the maximize window button of Kwin. The aformentioned bug appears again and makes the panes' size to be somehow screwed, but what matters now is that the image preview isn't resized to a correct window fit, again.

Test B

• With QON's window completely maximized I delete the image and insert it again. The image is narrower than my screen, so doesn't occupy all the peview pane, but you can see that it is at his total size just looking at the letters that aren't distorted at all (you would probably need to open the full image to appreciate it, not just the previews here in this comment).
• Reverting to initial window size (100% vertical screen size, about 50% horizontal), the image remains the same size.

So, the conclusion seems to be that QON resizes the preview to the pane size we have when we insert the images, but then such size keeps invariable no matter the size of the pane.

[eemantsal]

Yes, a few minutes after I asked I saw there were a new version and that it is posible to upload images in GitHub, and even better, to compose very well structured markdown notes. I was composing my previous comment when you replied. Thanks anyway.

[pbek]

Thank you for your test. The size doesn't change dynamically when you resize the window or pane (we would need a full blown browser to do that or regenerate the html code on every resize, what we don't do yet), the size is set hard as soon as the html is generated. The size should adapt (get smaller) when you edit the note or when you reload the note. Can you confirm that this is happening?

[eemantsal]

Ah, I didnt know that. Yes, as you say, just typing a character in the edit pane or reload makes the preview readapt almost correctly (the slight disadjustment I mentioned before persists).

[pbek]

I already made it 10px smaller than the preview, I will try to make it even smaller in 16.05.1. (I can't read the width of the content on the screen.)

[pbek]

16.05.1 is now out, could you please test and report back, @piyo-gh and @eemantsal?

[eemantsal]

When I first open the note, it's like before, the image preview is a bit bigger than the preview pane size:

And one can use the sliders to move a bit to the right:

But when editing the note or reloading the note's folder the preview adjusts well, adding those few empty pixels you mention at the right margin:

[pbek]

I see, does that happen when you switch from a note preview without a vertical scrollbar (or no note at all) to this note preview that needs a scrollbar? I'm not sure if I can fix that...

[eemantsal]

You mean if it happens when I open a note that requires little space in the preview pane, so QON doesn't need to draw the vertical scroll bar, and then I open another note that needs more vertical space ergo QON will draw the scroll bar, right? If I'm not misunderstanding you, yes, the behavior is the same: if I come from a note with a few content, or no content at all, and then I go to that note I've been using as example here, the preview overflows a little the preview pane's size, but if I reload the notes folder or start editing the note, the preview adapts to fit completely into the preview pane and adds a few pixels margin at the right.

This issue is certainly a very minor one. I think most of us can perfectly live with it, if trying to fix it is going to be a pain.

[pbek]

In the next release the note preview is now regenerated once a second (otherwise the resize will be very laggy) when the preview pane is resized to readjust the width of embedded images.

Oh yes, that was a pain to implement, I had to jump over several major obstacles. :smile_cat:

[piyo-gh]

I tried v16.15.1 and it works perfectly on Windows. Thank you.

[pbek]

great, thank you, @piyo-gh

[eemantsal]

I wanted to talk, again, about what was the real motive of this issue I opened: real image resize into a note. I've been reading and seen that in fact Markdown is supposed to permit resizing images. In several webpages, like this one or this other, and many more (it's rather widespread across Internet) I have read that adding " =widthxheight" to the image URL works in many Markdown editors, but it doesn't in QON. I know that Markdown also admits HTML code, and as HTML is way more powerful we could solve all these issues and many more with HTML, as long as QON accepts it, but if we use a Markdown editor and like its simple syntax we should stick as much as possible to Markdown language, I think. I don't know all the Markdown syntax and features, but could QON's Markdown support be as complete as possible?

[pbek]

QOwnNotes depends on https://github.com/ali-rantakari/peg-markdown-highlight and https://github.com/hoedown/hoedown for markdown highlighting and markdown to html conversion. Maybe you should file your request directly at their issue page.

[pbek]

And I guess QOwnNotes never will support html code. Don't get me wrong, I'm also a web developer and I love HTML, but it is not at all suited for taking notes. And that's what QOwnNotes is all about, taking notes very quickly and as plain as possible, getting your mind empty to allow more creative things to happen there. QOwnNotes is no desktop publishing solution, that's not what markdown was meant for anyway...

[pbek]

Version 16.05.2 is now out.

[eemantsal]

QOwnNotes depends on https://github.com/ali-rantakari/peg-markdown-highlight and https://github.com/hoedown/hoedown for markdown highlighting and markdown to html conversion. Maybe you should file your request directly at their issue page.

Ah, I thought Markdown was a standarized language and those features were included in its specifications. I didn't know there were so different Markdown types with different capabilities.

...taking notes very quickly and as plain as possible, getting your mind empty to allow more creative things to happen there. QOwnNotes is no desktop publishing solution, that's not what markdown was meant for anyway...

Ok, I think I probably got a wrong idea over Markdown's purpose; it seemed to me something half way between plain txt and HTML; you know, all those titles, bold text, italics, tables, bullets, etc... are features rather far from simple plain text writing and more proximate to what a word procesor does. I thought of MD not only as a plain text editor language but also as a kind of "drafts" or short and basic documents composer; that's why I thought that elementary image support and layouting just fitted into that idea. Anyway you have done a great and surprisingly rapid job. Thanks for it.

[pbek]

@eemantsal yes, markdown is used when you don't want to spend time with styling... like you can do here in the GitHub comments.

btw, does the resizing of images in the preview now work better for you?

[eemantsal]

Well, that's the contradiction I see in this matter: Giving text a format, even if quickly with Markdown, is indeed spend time with styling, not as much as with other techniques, like HTML language, that's sure, but everything that goes beyond just typing letters IS spend time with styling. That's why I said that, for me, Markdown is also a sort of quick and simple "document" composer: on one side you can just write plan text notes with no style at all, that's real plain text, bold, italics or titles are not plain text; on the other side you can do simple "documents" with not too fancy but still formatted text, titles, tables, numbered/bulleted/etc lists, images..., but not as complex as you could do with HTML; somthing halfway between plain text and HTML. I don't know what were the original motivations for making Markdown language, but the following is definitely not plan text but genuine document edition as you could do with LibreOffice:

The image is linked from MarkdownX' s project page

As with many other technologies I think people is extending the use of MD beyond what their creators imagined. If it is into Markdown capacities to resize and align images, a Markdown editor should support all Markdown's features, not just some. for plain text notes we have many dedicated app in every platform. It's just my humble opinion, and QON is, of course, your project, not mine; but I don't think one should enclose himself into a fixed idea but consider that a project can be expanded to make it broader and satisfy a bigger community of users. Unfortunately there's no app for HTML notes in OwnCloud, AFAIK, so QON could fill that gap. But I understand that this would increae the complexity of QON ergo the manpower needed, so I don't try to convice you to change your view about QON's purpose, just to explain my pont of view, and I'm not going to deny it: with a little hope some developer reads this and probably agrees with me so they start coding, heheh.

And about your question, yes, if I resize QOWN's window, now images are resized almost inmediately without needing to edit or update the view. But the left panel -the one that shows the notes and the navgation structure- gets all the new extra size while the panel with both edit and Markdown preview remains the same size. If you need more details I can open a new issue and post some screenshots in the next days, when I have mor free time.

[pbek]

Yes, it's about complexity. HTML is 1000 times more complex than markdown. And QOwnNotes is foremost a plain text notepad (with markdown support). There are not a whole bunch of people who are even using embedded images. But maybe the developers of the libraries add support for some extended features of markdown if you ask them...

About the resize, I guess that depends a bit on the operating system, here under Linux / KDE all panes are resized... But I think that's not a big deal. Thank you for testing!

[funkotron]

@pbek Images don't get resized to fit the preview panel on OSX.

The following implementation would be ideal: https://stackoverflow.com/a/21242579/499200

[pbek]

Images don't get resized to fit the preview panel on OSX.

Can you please explain in more detail and step by step what you did, what happened and what you expected.

The following implementation would be ideal: https://stackoverflow.com/a/21242579/499200

I'm sorry that isn't supported by the markdown to html library.

[pbek]

For me the images are down-scaled to fit into the preview panel on macOS...

[funkotron]

Images aren't scaled for me. I've updated to the latest version.

[pbek]

I can't reproduce that, are you using some scripts?

Could you please use the issue assistant in the Help menu to post this issue so you can provide needed information more easily?

The menu entry is named Post questions, feature requests or issues.