online image preview, screenshots update

Author: alex-cit

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/embed-image/mobile-embed-image.webp

@@ -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")