Opening an attachment in a grandchild feature by clicking on a thumbail

Question

If you have a feature with a child feature ('observations') with its own child feature ('photos of observations) which provides an image attachment, is there some way to open the image by clicking on the thumbnail in the attribute table?

Here is a situation where it would be useful to be able to this:

where the grandchild thumbnail is a bit to the right of center at the bottom. This kind of facility of course is automatic in QField, and the picture can be opened from windows explorer by a copy-paste from the file name, but is there a way to do it with one click? The same, of course, for child features such as View from Location in the above.

Answer 1

It can be achieved by using a QML widget to make an interactive thumbnail in the attribute table of the photos of observations layer.

The path used for each photo is relative to the folder where the QGIS project is saved using the @project_home variable - ⚠️I don't know if this works the same in QField⚠️

Widget creation

• Select Drag and Drop Designer from the drop down at the top of the Attributes Form Dialog
• Drag QML Widget into the Form Layout column
• Double-click to edit the widget

Widget configuration

QML code

import QtQuick 2.0

Rectangle {
    id: patch
    width: 100; height: 100
    
    Image {
        id: thumbnail
        width: parent.width
        height: parent.height
        fillMode: Image.PreserveAspectCrop
        source: expression.evaluate("'file:///' || @project_home || '/' || \"path\"")
        smooth: true
        z: parent.z+1
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true
        onEntered: thumbnail.opacity = 0.6
        onExited: thumbnail.opacity = 1.0
        onClicked: Qt.openUrlExternally(expression.evaluate("'file:///' || @project_home || '/' || \"path\""))
        cursorShape: Qt.PointingHandCursor
    }
}

The expression.evaluate() function is generated when an expression is created with the editor and inserted in the QML code using the button. The expression concatenates 'file:///' with the directory where the QGIS project is saved and the relative path of the photo in the attribute table:

'file:///' || @project_home || '/' || "path"

Result

This is the attribute table (form view) of the grandparent layer.

References

• The interactivity was based on a very stripped down version of this blog post
• Scaling an image in QML while cropping to a rectangle's size (adding and scaling an image)
• MouseArea QML Type (changing the cursor shape)
• QML: MouseArea pressed and hover (hover behaviour)