Add a doc on how to add inline images

docs/mkdocs-base.yml

@@ -37,6 +37,7 @@ nav:
                 - Harvesting GeoContext Data: "./admin/geocontext-harvesting.md"
           - Customization:
                 - Embedding Video on the Landing Page: "./admin/embed-video-on-landing-page.md"
+                - Adding Inline Images on the Landing Page: "./admin/add-inline-images.md"
 
     - Resources:
           - Contributing: ./contributing.md

docs/src/admin/add-inline-images.md

@@ -0,0 +1,51 @@
+# Adding Inline Images on the Landing Page
+
+This guide will help you display images inline, just like the one below:
+
+![Inline image](img/Screenshot%202023-07-16%20at%2012.35.47%20PM.png)
+
+-   Start by navigating to the section editor on the landing page. Once there, create a new section.
+
+-   To facilitate the upcoming steps, switch the editor to full-screen mode. Click on 'maximize' to do this.
+
+![Inline image2](img/Screenshot%202023-07-16%20at%2012.40.09%20PM.png)
+
+-   Next, click on the 'Table' button.
+
+![Inline image2](img/Screenshot%202023-07-16%20at%2012.41.13%20PM.png)
+
+-   For this example, we want to showcase three inline images, each with its title underneath. To do this, create a table with 3 columns and 2 rows. Ensure the border width is set to 0.
+
+![Inline image2](img/Screenshot%202023-07-16%20at%201.25.14%20PM.png)
+
+-   Start with the titles so you can easily add images later. Click on the 2nd row and input the corresponding text.
+
+![Inline image3](img/Screenshot%202023-07-16%20at%201.09.22%20PM.png)
+
+To switch to the next column, simply press the 'Tab' key on your keyboard.
+
+-   To centralize the text and images in the table, select all contents by pressing Ctrl+A (Cmd+A for Mac). Then, click the 'center alignment' option.
+
+![Inline image4](img/Screenshot%202023-07-16%20at%201.12.26%20PM.png)
+
+-   Now, let's add the images. Click on the first row and select the 'Image' icon.
+
+![Inline image5](img/Screenshot%202023-07-16%20at%201.13.49%20PM.png)
+
+-   Navigate to the 'Upload' tab, choose the desired image file, then click on 'Send it to the Server'.
+
+![Inline image6](img/Screenshot%202023-07-16%20at%201.16.52%20PM.png)
+
+-   Once the image is uploaded, the 'Image Info' tab will open. Set the image width to 300 (to avoid the image taking up the whole screen) and the HSpace (horizontal padding) to 10.
+
+![Inline image6](img/Screenshot%202023-07-16%20at%201.20.04%20PM.png)
+
+-   Follow the same steps for the other two columns. Your table should look something like this:
+
+![Inline image7](img/Screenshot%202023-07-16%20at%201.21.52%20PM.png)
+
+-   Click on 'Maximize' once more to exit the full-screen mode. Click 'Save' to preserve your changes.
+
+-   Verify that the newly created landing page section has been added to the current theme. This will ensure your changes are visible on the landing page.
+
+![Inline image7](img/Screenshot%202023-07-16%20at%201.23.51%20PM.png)