feat(docs): document adjusting image alignment

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"
 										}
 									]
 								},

src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/Note/Images.html

@@ -20,30 +20,112 @@
           into the <a href="../Navigation/Tree%20Concepts.html">note tree</a>. Its
           reference can be copied into a text note, in order to display it in the
           text itself.</p>
-        
-<h2>Uploading images</h2>
-
+        <h2>Uploading images</h2>
         <p>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.</p>
         <p>
-          <img src="1_Images_image.png" alt="" />
+          <img src="10_Images_image.png" alt="">
         </p>
         <p>Alternatively you can click on block toolbar and then on "Insert image":</p>
         <p>
-          <img src="Images_image.png" alt="" />
+          <img src="8_Images_image.png" alt="">
         </p>
         <p>You can also copy and paste an image from web - the image will be (asynchronously)
           downloaded and embedded.</p>
-        
-<h2>Compression</h2>
-
-        <p>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 -&gt; Other.</p>
-        <p>If you want to save images in their original resolution, it is recommended
-          to save them as attachment to note (top-right "Note actions -&gt; Import
-          files").</p>
+        <h2>Configuring the images</h2>
+        <p>Clicking on an image will reveal a popup with multiple options:
+          <br>
+          <img src="11_Images_image.png" width="285" height="35">
+        </p>
+        <h3>Alignment</h3>
+        <p>The first set of options configure the alignment are, in order:</p>
+        <figure
+        class="table" style="width:100%;">
+          <table class="ck-table-resized">
+            <colgroup>
+              <col style="width:5.52%;">
+                <col style="width:13.93%;">
+                  <col style="width:35.94%;">
+                    <col style="width:44.61%;">
+            </colgroup>
+            <thead>
+              <tr>
+                <th>Icon</th>
+                <th>Option</th>
+                <th>Preview</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  <img src="7_Images_image.png" width="16" height="13">
+                </td>
+                <td>Inline</td>
+                <td>
+                  <figure class="image">
+                    <img style="aspect-ratio:576/125;" src="2_Images_image.png" width="576"
+                    height="125">
+                  </figure>
+                </td>
+                <td>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 &amp; drop or cut-paste
+                  to move it around.</td>
+              </tr>
+              <tr>
+                <td>
+                  <img src="12_Images_image.png" width="16" height="13">
+                </td>
+                <td>Centered image</td>
+                <td>
+                  <figure class="image">
+                    <img style="aspect-ratio:564/236;" src="3_Images_image.png" width="564"
+                    height="236">
+                  </figure>
+                </td>
+                <td>The image will be displayed as a block and centered, not allowing text
+                  in either the left or right of it.</td>
+              </tr>
+              <tr>
+                <td>
+                  <img src="5_Images_image.png" width="33" height="13">
+                </td>
+                <td>Wrap text</td>
+                <td>
+                  <figure class="image">
+                    <img style="aspect-ratio:577/200;" src="9_Images_image.png" width="577"
+                    height="200">
+                  </figure>
+                  <p>&nbsp;</p>
+                </td>
+                <td>The image will be displayed to the left or the right of the text.</td>
+              </tr>
+              <tr>
+                <td>
+                  <img src="Images_image.png" width="16" height="13">
+                </td>
+                <td>Block align</td>
+                <td>
+                  <figure class="image">
+                    <img style="aspect-ratio:578/240;" src="4_Images_image.png" width="578"
+                    height="240">
+                  </figure>
+                </td>
+                <td>Similarly to <i>Centered image</i>, 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.</td>
+              </tr>
+            </tbody>
+          </table>
+          </figure>
+          <h2>Compression</h2>
+          <p>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 -&gt; Other.</p>
+          <p>If you want to save images in their original resolution, it is recommended
+            to save them as attachment to note (top-right "Note actions -&gt; Import
+            files").</p>
       </div>
     </div>
   </body>