diff --git a/docs/User Guide/!!!meta.json b/docs/User Guide/!!!meta.json index 5e52dec25..7f170d7a8 100644 --- a/docs/User Guide/!!!meta.json +++ b/docs/User Guide/!!!meta.json @@ -2329,13 +2329,85 @@ "format": "markdown", "dataFileName": "Images.md", "attachments": [ + { + "attachmentId": "40jG4olRNAlc", + "title": "image.png", + "role": "image", + "mime": "image/png", + "position": 10, + "dataFileName": "Images_image.png" + }, + { + "attachmentId": "9EQBwdObLpnJ", + "title": "image.png", + "role": "image", + "mime": "image/png", + "position": 10, + "dataFileName": "1_Images_image.png" + }, + { + "attachmentId": "bDkYm34QEH5a", + "title": "image.png", + "role": "image", + "mime": "image/jpg", + "position": 10, + "dataFileName": "2_Images_image.png" + }, + { + "attachmentId": "Bi9LiB0eMbcH", + "title": "image.png", + "role": "image", + "mime": "image/jpg", + "position": 10, + "dataFileName": "3_Images_image.png" + }, + { + "attachmentId": "dRgFtpOcHwke", + "title": "image.png", + "role": "image", + "mime": "image/jpg", + "position": 10, + "dataFileName": "4_Images_image.png" + }, + { + "attachmentId": "g7xB3E2Dva2q", + "title": "image.png", + "role": "image", + "mime": "image/png", + "position": 10, + "dataFileName": "5_Images_image.png" + }, + { + "attachmentId": "HcyBaQS2SjkL", + "title": "image.png", + "role": "image", + "mime": "image/png", + "position": 10, + "dataFileName": "6_Images_image.png" + }, + { + "attachmentId": "Ilz9SuEj39RF", + "title": "image.png", + "role": "image", + "mime": "image/png", + "position": 10, + "dataFileName": "7_Images_image.png" + }, { "attachmentId": "MTsRB4C0yvKX", "title": "image.png", "role": "image", "mime": "image/jpg", "position": 10, - "dataFileName": "Images_image.png" + "dataFileName": "8_Images_image.png" + }, + { + "attachmentId": "NZJRGKS6yDeg", + "title": "image.png", + "role": "image", + "mime": "image/jpg", + "position": 10, + "dataFileName": "9_Images_image.png" }, { "attachmentId": "PUjxzv10IJkx", @@ -2343,7 +2415,23 @@ "role": "image", "mime": "image/jpg", "position": 10, - "dataFileName": "1_Images_image.png" + "dataFileName": "10_Images_image.png" + }, + { + "attachmentId": "qJXx7vPPD4JW", + "title": "image.png", + "role": "image", + "mime": "image/png", + "position": 10, + "dataFileName": "11_Images_image.png" + }, + { + "attachmentId": "SoDKgOmDoyc1", + "title": "image.png", + "role": "image", + "mime": "image/png", + "position": 10, + "dataFileName": "12_Images_image.png" } ] }, diff --git a/docs/User Guide/User Guide/Basic Concepts/Note/10_Images_image.png b/docs/User Guide/User Guide/Basic Concepts/Note/10_Images_image.png new file mode 100644 index 000000000..0167e759b Binary files /dev/null and b/docs/User Guide/User Guide/Basic Concepts/Note/10_Images_image.png differ diff --git a/docs/User Guide/User Guide/Basic Concepts/Note/11_Images_image.png b/docs/User Guide/User Guide/Basic Concepts/Note/11_Images_image.png new file mode 100644 index 000000000..b7bd3af59 Binary files /dev/null and b/docs/User Guide/User Guide/Basic Concepts/Note/11_Images_image.png differ diff --git a/docs/User Guide/User Guide/Basic Concepts/Note/12_Images_image.png b/docs/User Guide/User Guide/Basic Concepts/Note/12_Images_image.png new file mode 100644 index 000000000..71537a769 Binary files /dev/null and b/docs/User Guide/User Guide/Basic Concepts/Note/12_Images_image.png differ diff --git a/docs/User Guide/User Guide/Basic Concepts/Note/1_Images_image.png b/docs/User Guide/User Guide/Basic Concepts/Note/1_Images_image.png index 0167e759b..b7bd3af59 100644 Binary files a/docs/User Guide/User Guide/Basic Concepts/Note/1_Images_image.png and b/docs/User Guide/User Guide/Basic Concepts/Note/1_Images_image.png differ diff --git a/docs/User Guide/User Guide/Basic Concepts/Note/2_Images_image.png b/docs/User Guide/User Guide/Basic Concepts/Note/2_Images_image.png new file mode 100644 index 000000000..a4e23ef9a Binary files /dev/null and b/docs/User Guide/User Guide/Basic Concepts/Note/2_Images_image.png differ diff --git a/docs/User Guide/User Guide/Basic Concepts/Note/3_Images_image.png b/docs/User Guide/User Guide/Basic Concepts/Note/3_Images_image.png new file mode 100644 index 000000000..08a40b0d0 Binary files /dev/null and b/docs/User Guide/User Guide/Basic Concepts/Note/3_Images_image.png differ diff --git a/docs/User Guide/User Guide/Basic Concepts/Note/4_Images_image.png b/docs/User Guide/User Guide/Basic Concepts/Note/4_Images_image.png new file mode 100644 index 000000000..297d49ee5 Binary files /dev/null and b/docs/User Guide/User Guide/Basic Concepts/Note/4_Images_image.png differ diff --git a/docs/User Guide/User Guide/Basic Concepts/Note/5_Images_image.png b/docs/User Guide/User Guide/Basic Concepts/Note/5_Images_image.png new file mode 100644 index 000000000..11bb32b67 Binary files /dev/null and b/docs/User Guide/User Guide/Basic Concepts/Note/5_Images_image.png differ diff --git a/docs/User Guide/User Guide/Basic Concepts/Note/6_Images_image.png b/docs/User Guide/User Guide/Basic Concepts/Note/6_Images_image.png new file mode 100644 index 000000000..a0b1f2579 Binary files /dev/null and b/docs/User Guide/User Guide/Basic Concepts/Note/6_Images_image.png differ diff --git a/docs/User Guide/User Guide/Basic Concepts/Note/7_Images_image.png b/docs/User Guide/User Guide/Basic Concepts/Note/7_Images_image.png new file mode 100644 index 000000000..a0b1f2579 Binary files /dev/null and b/docs/User Guide/User Guide/Basic Concepts/Note/7_Images_image.png differ diff --git a/docs/User Guide/User Guide/Basic Concepts/Note/8_Images_image.png b/docs/User Guide/User Guide/Basic Concepts/Note/8_Images_image.png new file mode 100644 index 000000000..f8c5cf48f Binary files /dev/null and b/docs/User Guide/User Guide/Basic Concepts/Note/8_Images_image.png differ diff --git a/docs/User Guide/User Guide/Basic Concepts/Note/9_Images_image.png b/docs/User Guide/User Guide/Basic Concepts/Note/9_Images_image.png new file mode 100644 index 000000000..731df83bb Binary files /dev/null and b/docs/User Guide/User Guide/Basic Concepts/Note/9_Images_image.png differ diff --git a/docs/User Guide/User Guide/Basic Concepts/Note/Images.md b/docs/User Guide/User Guide/Basic Concepts/Note/Images.md index 7c25e8f3a..56273e28e 100644 --- a/docs/User Guide/User Guide/Basic Concepts/Note/Images.md +++ b/docs/User Guide/User Guide/Basic Concepts/Note/Images.md @@ -7,14 +7,30 @@ An image can be uploaded in the form of note's [attachment](Attachments.md) or a To add an image to the note, simply drag it from file explorer onto the note editor inside Trilium and the image will be uploaded. -![](1_Images_image.png) +![](10_Images_image.png) Alternatively you can click on block toolbar and then on "Insert image": -![](Images_image.png) +![](8_Images_image.png) You can also copy and paste an image from web - the image will be (asynchronously) downloaded and embedded. +## Configuring the images + +Clicking on an image will reveal a popup with multiple options: +![](11_Images_image.png) + +### Alignment + +The first set of options configure the alignment are, in order: + +| Icon | Option | Preview | Description | +| --- | --- | --- | --- | +| ![](7_Images_image.png) | Inline | ![](2_Images_image.png) | As the name suggests, the name can be put inside a paragraph and moved around similarly as if it was a block of text. Use drag & drop or cut-paste to move it around. | +| ![](12_Images_image.png) | Centered image | ![](3_Images_image.png) | The image will be displayed as a block and centered, not allowing text in either the left or right of it. | +| ![](5_Images_image.png) | Wrap text | ![](9_Images_image.png) | The image will be displayed to the left or the right of the text. | +| ![](Images_image.png) | Block align | ![](4_Images_image.png) | Similarly to _Centered image_, the image will be displayed as a block and aligned either to the left or to the right, but not allowing text to flow on either of its sides. | + ## Compression Since Trilium isn't really meant to be primary storage for image data, it attempts to compress and resize (with pretty aggressive settings) uploaded images before storing them to the database. You may then notice some quality degradation. Basic quality settings is available in Options -> Other. diff --git a/docs/User Guide/User Guide/Basic Concepts/Note/Images_image.png b/docs/User Guide/User Guide/Basic Concepts/Note/Images_image.png index f8c5cf48f..3183542b3 100644 Binary files a/docs/User Guide/User Guide/Basic Concepts/Note/Images_image.png and b/docs/User Guide/User Guide/Basic Concepts/Note/Images_image.png differ diff --git a/src/public/app/doc_notes/en/User Guide/!!!meta.json b/src/public/app/doc_notes/en/User Guide/!!!meta.json index 6598222f9..6c3b60629 100644 --- a/src/public/app/doc_notes/en/User Guide/!!!meta.json +++ b/src/public/app/doc_notes/en/User Guide/!!!meta.json @@ -2329,13 +2329,85 @@ "format": "html", "dataFileName": "Images.html", "attachments": [ + { + "attachmentId": "40jG4olRNAlc", + "title": "image.png", + "role": "image", + "mime": "image/png", + "position": 10, + "dataFileName": "Images_image.png" + }, + { + "attachmentId": "9EQBwdObLpnJ", + "title": "image.png", + "role": "image", + "mime": "image/png", + "position": 10, + "dataFileName": "1_Images_image.png" + }, + { + "attachmentId": "bDkYm34QEH5a", + "title": "image.png", + "role": "image", + "mime": "image/jpg", + "position": 10, + "dataFileName": "2_Images_image.png" + }, + { + "attachmentId": "Bi9LiB0eMbcH", + "title": "image.png", + "role": "image", + "mime": "image/jpg", + "position": 10, + "dataFileName": "3_Images_image.png" + }, + { + "attachmentId": "dRgFtpOcHwke", + "title": "image.png", + "role": "image", + "mime": "image/jpg", + "position": 10, + "dataFileName": "4_Images_image.png" + }, + { + "attachmentId": "g7xB3E2Dva2q", + "title": "image.png", + "role": "image", + "mime": "image/png", + "position": 10, + "dataFileName": "5_Images_image.png" + }, + { + "attachmentId": "HcyBaQS2SjkL", + "title": "image.png", + "role": "image", + "mime": "image/png", + "position": 10, + "dataFileName": "6_Images_image.png" + }, + { + "attachmentId": "Ilz9SuEj39RF", + "title": "image.png", + "role": "image", + "mime": "image/png", + "position": 10, + "dataFileName": "7_Images_image.png" + }, { "attachmentId": "MTsRB4C0yvKX", "title": "image.png", "role": "image", "mime": "image/jpg", "position": 10, - "dataFileName": "Images_image.png" + "dataFileName": "8_Images_image.png" + }, + { + "attachmentId": "NZJRGKS6yDeg", + "title": "image.png", + "role": "image", + "mime": "image/jpg", + "position": 10, + "dataFileName": "9_Images_image.png" }, { "attachmentId": "PUjxzv10IJkx", @@ -2343,7 +2415,23 @@ "role": "image", "mime": "image/jpg", "position": 10, - "dataFileName": "1_Images_image.png" + "dataFileName": "10_Images_image.png" + }, + { + "attachmentId": "qJXx7vPPD4JW", + "title": "image.png", + "role": "image", + "mime": "image/png", + "position": 10, + "dataFileName": "11_Images_image.png" + }, + { + "attachmentId": "SoDKgOmDoyc1", + "title": "image.png", + "role": "image", + "mime": "image/png", + "position": 10, + "dataFileName": "12_Images_image.png" } ] }, diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/10_Images_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/10_Images_image.png new file mode 100644 index 000000000..0167e759b Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/10_Images_image.png differ diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/11_Images_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/11_Images_image.png new file mode 100644 index 000000000..b7bd3af59 Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/11_Images_image.png differ diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/12_Images_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/12_Images_image.png new file mode 100644 index 000000000..71537a769 Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/12_Images_image.png differ diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/1_Images_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/1_Images_image.png index 0167e759b..b7bd3af59 100644 Binary files a/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/1_Images_image.png and b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/1_Images_image.png differ diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/2_Images_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/2_Images_image.png new file mode 100644 index 000000000..a4e23ef9a Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/2_Images_image.png differ diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/3_Images_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/3_Images_image.png new file mode 100644 index 000000000..08a40b0d0 Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/3_Images_image.png differ diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/4_Images_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/4_Images_image.png new file mode 100644 index 000000000..297d49ee5 Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/4_Images_image.png differ diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/5_Images_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/5_Images_image.png new file mode 100644 index 000000000..11bb32b67 Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/5_Images_image.png differ diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/6_Images_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/6_Images_image.png new file mode 100644 index 000000000..a0b1f2579 Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/6_Images_image.png differ diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/7_Images_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/7_Images_image.png new file mode 100644 index 000000000..a0b1f2579 Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/7_Images_image.png differ diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/8_Images_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/8_Images_image.png new file mode 100644 index 000000000..f8c5cf48f Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/8_Images_image.png differ diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/9_Images_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/9_Images_image.png new file mode 100644 index 000000000..731df83bb Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/9_Images_image.png differ diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/Images.html b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/Images.html index 62862588d..951b4a26e 100644 --- a/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/Images.html +++ b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/Images.html @@ -20,30 +20,112 @@ into the note tree. Its reference can be copied into a text note, in order to display it in the text itself.

- -

Uploading images

- +

Uploading images

To add an image to the note, simply drag it from file explorer onto the note editor inside Trilium and the image will be uploaded.

- +

Alternatively you can click on block toolbar and then on "Insert image":

- +

You can also copy and paste an image from web - the image will be (asynchronously) downloaded and embedded.

- -

Compression

- -

Since Trilium isn't really meant to be primary storage for image data, - it attempts to compress and resize (with pretty aggressive settings) uploaded - images before storing them to the database. You may then notice some quality - degradation. Basic quality settings is available in Options -> Other.

-

If you want to save images in their original resolution, it is recommended - to save them as attachment to note (top-right "Note actions -> Import - files").

+

Configuring the images

+

Clicking on an image will reveal a popup with multiple options: +
+ +

+

Alignment

+

The first set of options configure the alignment are, in order:

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
IconOptionPreviewDescription
+ + Inline +
+ +
+ 		As the name suggests, the name can be put inside a paragraph and moved + around similarly as if it was a block of text. Use drag & drop or cut-paste + to move it around.
+ + Centered image +
+ +
+ 		The image will be displayed as a block and centered, not allowing text + in either the left or right of it.
+ + Wrap text +
+ +
+

 

+ 		The image will be displayed to the left or the right of the text.
+ + Block align +
+ +
+ 		Similarly to Centered image, the image will be displayed as a block + and aligned either to the left or to the right, but not allowing text to + flow on either of its sides.
+
+

Compression

+

Since Trilium isn't really meant to be primary storage for image data, + it attempts to compress and resize (with pretty aggressive settings) uploaded + images before storing them to the database. You may then notice some quality + degradation. Basic quality settings is available in Options -> Other.

+

If you want to save images in their original resolution, it is recommended + to save them as attachment to note (top-right "Note actions -> Import + files").

diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/Images_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/Images_image.png index f8c5cf48f..3183542b3 100644 Binary files a/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/Images_image.png and b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/Images_image.png differ