online image preview, screenshots update

src/layer/embed-image/index.md

@@ -1,15 +1,47 @@
 ---
-description: HTML widget can be used to embed an online image in the attributes form of your survey layer.
+description: Preview online images in the attributes form of your survey layer using the Attachment or HTML widgets.
 ---
 
 # How to Embed an Image
+Online images can be displayed in the attributes form of a survey layer. There are two options:
+- [Using the Attachment widget](#using-the-attachment-widget) is a straight-forward option to preview an online image in the form. Tapping the image in the form in the <MobileAppNameShort /> opens the image, so you can explore it in more detail directly in the app.
+- [The HTML widget](#using-the-html-widget) uses a link stored in a field to display the image. Tapping the image in the form in the <MobileAppNameShort /> opens the image in a web browser (outside of the app).
 
-The [**HTML widget**](../info-widgets/#html-widget) can be used to display online images in the <MobileAppNameShort />.
+![Mergin Maps mobile app online image preview](./mobile-embed-image.webp "Mergin Maps mobile app online image preview")
 
 ::: tip Example project available
-Clone <MerginMapsProject id="documentation/forms-display-images-and-files" /> to how this works.
+Both options are included in our example project <MerginMapsProject id="documentation/forms-display-images-and-files" />. Clone it to see how they work.
+:::
+
+## Using the attachment widget
+The attachment widget can be configured to display online images in the form of a survey layer.
+
+The survey layer needs to have a text field for storing the full URL link (here: `photo`).
+
+1. Right-click on the survey layer, select **Properties** and go to the **Attributes form** tab.
+2. In the list of **Available Widgets** select the text field you want to work with (here: `photo`).
+3. In the **Widget Type** tab:
+   - From the drop-down menu, select the **Attachment** widget
+   - Store the path as **Absolute path**
+   - Set the **Integrated Document Viewer** to use the type **Web View**
+
+![QGIS Attachment widget setup for online images preview](./qgis-form-attachment-widget.webp "QGIS Attachment widget setup for online images preview")
+
+4. **Apply** the changes
+
+Online images can now be displayed in the form, both in QGIS (left) and in <MobileAppName /> (right):
+![Online image preview in QGIS and in Mergin Maps mobile app](./qgis-mobile-form-online-image-attachment.webp "Online image preview in QGIS and in Mergin Maps mobile app")
+
+When you click or tap on the image, it will open directly in the form and you can zoom in.
+
+::: details Image preview in QGIS
+Some QGIS versions may not display the preview of the image correctly. This issue does not occur in <MobileAppNameShort />. Therefore we recommend trying the setup by opening the form in the <MobileAppNameShort /> to make sure it works as intended.
 :::
 
+## Using the HTML widget <Badge text="Advanced" type="warning"/>
+
+The [**HTML widget**](../info-widgets/#html-widget) can be used to display online images in the <MobileAppNameShort />.
+
 Your layer should contain a text field for storing the full URL link (here: `link`). 
 
 To show an online image in the form, [add the HTML widget to the form](../info-widgets/) and configure it with this expression (replace `link` with the name of the appropriate field in your layer): 
@@ -18,9 +50,11 @@ To show an online image in the form, [add the HTML widget to the form](../info-w
 <script>document.write(expression.evaluate("'<a href=\"'||attribute( @feature, 'link' )||'\"><img src=\"'||attribute( @feature, 'link' )||'\" width=300></a>'"));</script>
 ```
 
-Make sure that the HTML widget works before taking it to the field by testing it in the <MobileAppNameShort />. It should look something like this:
+Make sure that the HTML widget works before taking it to the field by testing it in the <MobileAppNameShort />. It should display the online image both in QGIS (left) and in the <MobileAppNameShort /> (right):
+
+![HTML widget in QGIS and in Mergin Maps mobile app](./qgis-mobile-form-online-image-html.webp "HTML widget in QGIS and in Mergin Maps mobile app")
 
-![HTML widget in QGIS and in Mergin Maps mobile app](./qgis-mobile-html-form.webp "HTML widget in QGIS and in Mergin Maps mobile app")
+When you click or tap on the image, it will open in a web browser.
 
 ::: details Image preview in QGIS
 Some QGIS versions may not display the preview of the image correctly. This issue does not occur in <MobileAppNameShort />. Therefore we recommend trying the setup by opening the form in the <MobileAppNameShort /> to make sure it works as intended.

src/layer/form-layout/index.md

@@ -27,11 +27,15 @@ QGIS Drag and Drop designer is an easy tool for defining the form layouts:
 <Badge text="since QGIS 3.30" type="tip"/>
 The Spacer widget can be useful if you want to have some space between the fields in your form or add a horizontal line. 
 
+::: tip Example project available
+The spacer widget is used in <MerginMapsProject id="documentation/forms-display-images-and-files" />.
+:::
+
 It can be found in *Available Widgets* in the *Other Widgets* section when using the [Drag and Drop Designer](#qgis-drag-and-drop-designer).
 ![QGIS forms Spacer Widget](./qgis-form-spacer-widget.jpg "QGIS Spacer Widget")
 
 When adding the spacer widget to the form, there is an option to check the **Draw horizontal line** option. Otherwise, a vertical space will be added to the form.
 ![QGIS Spacer Widget configuration](./qgis-configure-spacer-widget.jpg "QGIS Spacer Widget configuration")
 
 And this is how the spacer widget looks like in the form in QGIS (left) and in the mobile app (right).
-![Spacer widget in QGIS and mobile app form](./spacer-widget-forms.jpg "Spacer widget in QGIS and mobile app form")
+![Spacer widget in QGIS and mobile app form](./spacer-widget-forms.webp "Spacer widget in QGIS and mobile app form")

src/layer/open-file/index.md

@@ -24,11 +24,11 @@ This setup is used in our public project <MerginMapsProject id="documentation/fo
    <a href="project://my-pdf.pdf">Open File</a>
    ```
 
-![QGIS attributes form open local file using HTML widget](./qgis-form-open-file-html-widget.jpg "QGIS attributes form open local file using HTML widget")
+![QGIS attributes form open local file using HTML widget](./qgis-form-open-file-html-widget.webp "QGIS attributes form open local file using HTML widget")
 
 In the <MobileAppNameShort />, you can tap the *Open File* link to open the PDF file using the default application of your device.
 
-![Open a local PDF file in Mergin Maps mobile app](./mobile-forms-open-file-html-widget.jpg "Open a local PDF file in Mergin Maps mobile app")
+![Open a local PDF file in Mergin Maps mobile app](./mobile-forms-open-file-html-widget.webp "Open a local PDF file in Mergin Maps mobile app")
 
 ## Open local files using default values <Badge text="Advanced" type="warning"/>
 
@@ -47,9 +47,9 @@ This setup is used in our public project <MerginMapsProject id="documentation/fo
    '<a href="project://my-pdf.pdf">Open File</a>'
    ```
 
-![QGIS attributes form open local file](./qgis-form-open-file-default-value.jpg "QGIS attributes form open local file")
+![QGIS attributes form open local file](./qgis-form-open-file-default-value.webp "QGIS attributes form open local file")
 
 In the <MobileAppNameShort />, you can tap the *Open File* link to open the PDF file using the default application of your device.
 
-![Open a local PDF file in Mergin Maps mobile app](./mobile-forms-open-file-default-value.jpg "Open a local PDF file in Mergin Maps mobile app")
+![Open a local PDF file in Mergin Maps mobile app](./mobile-forms-open-file-default-value.webp "Open a local PDF file in Mergin Maps mobile app")
 

src/layer/photos/index.md

@@ -37,7 +37,7 @@ To add photos to features using the <MobileAppNameShort />, the attributes form
 To set up the attachment widget:
 1. Right-click on a layer, select **Properties** and go to the **Attributes form** tab.
 2. In the list of **Available Widgets** select the text field you want to work with.
-3. In the **Widget Display** tab:
+3. In the **Widget Type** tab:
    - From the drop-down menu, select **Attachment**
    - **Default path** defines where images will be saved. If it is not defined, the project home folder will be used.
    - Store the path as **Relative to project path** or **Relative to default path** depending on how you want to store the paths.
@@ -115,6 +115,10 @@ Now when you click on a feature that contains a photo, it will be displayed in t
 
 ![Mergin Maps mobile app photo displayed in form](./qgis-form-view-photo.jpg "Mergin Maps mobile app photo displayed in form")
 
+:::tip Preview online images
+It is also possible to display online images in the form. See [How to Embed an Image](../embed-image/) for more details.
+:::
+
 ::: details Image preview in QGIS
 Some QGIS versions may not display the preview of the image correctly. This issue does not occur in <MobileAppNameShort />. Therefore we recommend trying the setup by opening the form in the <MobileAppNameShort /> to make sure it works as intended.
 :::

src/misc/write-docs/index.md

@@ -157,6 +157,10 @@ All projects referenced in the documentation use <MainPlatformName /> workspace
 
 For users that are referenced in the documentation (e.g. screenshots or in texts), it is best to use generic <MainPlatformName /> users `jack`, `jill`, `sarah`, etc. and generic workspaces.
 
+To reference online images, we can use, e.g.:
+
+![Mergin Maps sample image](./sample-pic.jpg "Mergin Maps sample image")
+
 ### Documentation folder structure
 Every section of the docs (e.g. Get Started, Install & Sign Up, Manage Account & Project, ...) has its folder.