Merge "Merge remote-tracking branch 'origin/qds/dev'"

doc/qtdesignstudio/examples/doc/treadmilMcu.qdoc

@@ -22,7 +22,7 @@
     \section1 Getting the MCU Treadmill design to Figma
 
     \list 1
-        \li Get the optimized MCU Treadmill for Figma design from \l {https://git.qt.io/public-demos/qtdesign-studio/-/blob/treadmill-revision-revision/examples/TreadmillMcuDemo/figmadesign/McuDemo.fig} {here}.
+        \li Get the optimized MCU Treadmill for Figma design from \l {https://git.qt.io/public-demos/qtdesign-studio/-/blob/master/examples/TreadmillMcuDemo/figmadesign/McuDemo.fig} {here}.
         \li Go to \l {https://www.figma.com/}{Figma} and log in.
         \li Open the downloaded MCU Treadmill design in Figma.
     \endlist

doc/qtdesignstudio/src/best practices/best-practices-glow.qdoc

@@ -14,7 +14,7 @@
     using image-based lighting) or add ambient light. Using the glow effect is one way to make your
     scene more realistic.
 
-    \image glow-example.webp
+    \image {glow-example.webp} {An example showing the difference between using a glow effect and not using a glow effect.}
 
     \section1 Creating a project with ExtendedSceneEnvironment
 
@@ -29,7 +29,7 @@
     \uicontrol {ExtendedSceneEnvironment} component from \uicontrol Components to
     the \uicontrol 2D or \uicontrol Navigator view.
 
-    \image ext-scene-env-navigator.webp
+    \image {ext-scene-env-navigator.webp} {The ExtendedSceneEnvironment in the Navigator view.}
 
     \section1 Enabling the Glow effect
 
@@ -37,7 +37,7 @@
     then, in the \uicontrol Properties view, select \uicontrol Enabled in the
     \uicontrol Glow section.
 
-    \image glow-properties.webp
+    \image {glow-properties.webp} {The Glow effect properties in the Properties view.}
 
     \note When setting up or experimenting with the glow effect, use the \l {Blend Modes}{Replace}
     blend mode to see the effect more clearly.
@@ -52,7 +52,7 @@
     properties is to change them directly in the \uicontrol Properties view in \QDS and see the
     changes live in the \uicontrol 2D view.
 
-    \image glow-example-project.webp
+    \image {glow-example-project.webp} {The Flashlight Example project running.}
 
     \section1 Basic properties
 
@@ -96,13 +96,13 @@
         \li Example
       \row
         \li Bloom disabled
-        \li \image bleed-scale-no.webp
+        \li \image {bleed-scale-no.webp} {A close-up of a light in the scene with Bloom disabled.}
       \row
         \li 8
-        \li \image bleed-scale-8.webp
+        \li \image {bleed-scale-8.webp} {A close-up of a light in the scene with HDR Scale set to 8.}
       \row
         \li 1
-        \li \image bleed-scale-1.webp
+        \li \image {bleed-scale-1.webp} {A close-up of a light in the scene with HDR Scale set to 1.}
     \endtable
 
     \section1 Blur Levels
@@ -122,13 +122,13 @@
         \li Example
       \row
         \li 1, 2, 3
-        \li \image glow_low_blur_levels.webp
+        \li \image {glow_low_blur_levels.webp} {A close-up of a light in the scene with Blur level set to 1, 2, 3.}
       \row
         \li 5, 6, 7
-        \li \image glow_high_blur_levels.webp
+        \li \image {glow_high_blur_levels.webp} {A close-up of a light in the scene with Blur level set to 5, 6, 7.}
       \row
         \li 1, 2, 3, 4, 5, 6, 7
-        \li \image glow_all_blur_levels.webp
+        \li \image {glow_all_blur_levels.webp} {A close-up of a light in the scene with Blur level set to 1, 2, 3, 4, 5, 6, 7.}
       \endtable
 
     \section2 Blend modes
@@ -143,21 +143,21 @@
       \row
         \li Additive
         \li Often recommended for outdoor scenes with a visible sky or sun.
-        \li \image glow-additive-blend.webp
+        \li \image {glow-additive-blend.webp} {A close-up of a light in the scene with Blend mode set to Additive.}
       \row
         \li Screen
         \li Similar to \uicontrol {Additive}, but the result is less bright.
-        \li \image glow-screen-blend.webp
+        \li \image {glow-screen-blend.webp} {A close-up of a light in the scene with Blend mode set to Additive.}
       \row
         \li SoftLight
         \li Often recommended for in-door environments.
-        \li \image glow-softlight-blend.webp
+        \li \image {glow-softlight-blend.webp} {A close-up of a light in the scene with Blend mode set to SoftLight.}
       \row
         \li Replace
         \li Does not perform any blending, but displays only the contribution
         the glow effect would blend with the actual content. In practice, this is useful for
         experimenting and troubleshooting when setting up the glow effect.
-        \li \image glow-replace-blend.webp
+        \li \image {glow-replace-blend.webp} {A close-up of a light in the scene with Blend mode set to Replace.}
     \endtable
 
     \section1 Improvement properties
@@ -187,13 +187,13 @@
         \li Example
       \row
         \li No effect
-        \li \image glow-no-enhancment.webp
+        \li \image {glow-no-enhancment.webp} {A close-up of a light in the scene with no effect.}
       \row
         \li High Quality
-        \li \image glow-high-quality.webp
+        \li \image {glow-high-quality.webp} {A close-up of a light in the scene with the High Quality effect.}
       \row
         \li Bicubic Upsampling
-        \li \image glow-bicubic.webp
+        \li \image {glow-bicubic.webp} {A close-up of a light in the scene with the Bicubic Upsampling effect.}
     \endtable
 
 

doc/qtdesignstudio/src/best practices/best-practices-shader-code.qdoc

@@ -146,7 +146,7 @@
 
     You can control these settings either from the \uicontrol Properties view or from code.
 
-    \image timeRunning_property.webp
+    \image {timeRunning_property.webp} {The Running setting turned on in the Properties view.}
 
     \code
         NorthernLights {

doc/qtdesignstudio/src/components/qtquick-components-custom.qdoc

@@ -13,7 +13,7 @@
     new components that you can create instances of. You can then use the
     instances of the new components in other components.
 
-    \image qtquick-components-custom.png "Custom components in My Components"
+    \image {qtquick-components-custom.png} {Custom components in My Components.}
 
     Custom components are stored in \uicontrol Components >
     \uicontrol {My Components}. You can create instances of custom components
@@ -86,7 +86,7 @@
     in \uicontrol Navigator or the \uicontrol {2D} view, and select
     \uicontrol {Create Component} in the context menu.
 
-    \image qtcreator-move-component-into-separate-file.png
+    \image {qtcreator-move-component-into-separate-file.png} {The Move Component into Separate File dialog.}
 
     Give the new component a name, and select whether properties are set for
     the new component or for the original one.
@@ -117,7 +117,7 @@
     \uicontrol Navigator or \uicontrol {2D} view and select
     \uicontrol {Merge File with Template} in the context menu.
 
-    \image qmldesigner-merge-with-template.png "Merge with Template dialog"
+    \image {qmldesigner-merge-with-template.png} {The Merge with Template dialog.}
 
     In the \uicontrol Template field, select the file to use as a template.
 */

doc/qtdesignstudio/src/components/qtquick-controls.qdoc

@@ -13,7 +13,7 @@
     available in \uicontrol Components >
     \uicontrol {Qt Quick Controls} > \uicontrol Controls.
 
-    \image qtquick-designer-qtquickcontrols-types.png "Qt Quick Controls components"
+    \image {qtquick-designer-qtquickcontrols-types.png} {The Qt Quick Controls components in the Components view.}
 
     The following types of controls are available for user interaction:
 
@@ -36,7 +36,7 @@
 
     You can set control properties in the \l Properties view.
 
-    \image qtquick-designer-control-properties.png "Control section in Properties"
+    \image {qtquick-designer-control-properties.png} {The Control section in the Properties view.}
 
     The \uicontrol Enable check box indicates whether the control is enabled.
 
@@ -64,7 +64,7 @@
     most suitable for a use case and discuss the values you can set for button
     properties in the \uicontrol Properties view.
 
-    \image qtquick-designer-button-types.png "Button controls in the 2D view"
+    \image {qtquick-designer-button-types.png} {Different types of button controls in the 2D view.}
 
     Recommendations for buttons that contain text:
 
@@ -387,20 +387,20 @@
     \target progress-bar-control
     \section2 Progress Bar
 
-    \image qtquickcontrols2-progressbar.gif "Progress bar"
+    \image {qtquickcontrols2-progressbar.gif} {An animation of a Progress Bar running.}
 
     \uicontrol {Progress Bar} indicates the progress of an operation. You
     can specify the initial value in the \uicontrol Value field, but it
     should be updated regularly. Specify the range in the \uicontrol From
     and \uicontrol To fields, which can both contain any value.
 
-    \image qtquick-designer-progressbar-properties.png "Progress Bar properties"
+    \image {qtquick-designer-progressbar-properties.png} {The Progress Bar section in the Properties view.}
 
     Select the \uicontrol Indeterminate check box when unable to determine the
     size of the item being downloaded, or if the download progress might get
     interrupted due to a network failure.
 
-    \image qtquickcontrols2-progressbar-indeterminate.gif
+    \image {qtquickcontrols2-progressbar-indeterminate.gif} {A runnning Progress Bar with the Indeterminate property turned on.}
 
     The indeterminate mode is similar to a \l {Busy Indicator} in that both can
     be used to indicate background activity. Due to their visual differences,
@@ -561,7 +561,7 @@
 
     \section2 Tumbler
 
-    \image qtquickcontrols2-tumbler-wrap.gif
+    \image {qtquickcontrols2-tumbler-wrap.gif} {An animation of a Tumbler with multiple wheels spinning.}
 
     \uicontrol Tumbler allows users to select an option from a spinnable
     \e wheel of items. It is useful when there are too many options to use, for
@@ -573,7 +573,7 @@
     field. Select the index of the current option in the
     \uicontrol {Current index} field.
 
-    \image qtquick-designer-tumbler-properties.png "Tumbler properties"
+    \image {qtquick-designer-tumbler-properties.png} {The Tumbler section in the Properties view.}
 
     To enable wrapping, select the \uicontrol Wrap check box.
 
@@ -600,18 +600,18 @@
     If the total width of the buttons exceeds the available width of the tab
     bar, it automatically becomes \l{Flickable}{flickable}.
 
-    \image qtquickcontrols2-tabbar-flickable.png
+    \image {qtquickcontrols2-tabbar-flickable.png} {A Tab Bar exceeding the available width.}
 
     \section1 Tool Bar
 
-    \image qtquickcontrols2-toolbar.png
+    \image {qtquickcontrols2-toolbar.png} {A Tool Bar}
 
     \uicontrol {Tool Bar} contains application-wide and context-sensitive
     actions and controls, such as navigation buttons and search fields. A
     toolbar is commonly used as a header or footer of an \l ApplicationWindow.
     Select the toolbar position in the \uicontrol Position field.
 
-    \image qtquick-designer-toolbar-properties.png "Tool Bar properties"
+    \image {qtquick-designer-toolbar-properties.png} {The Tool Bar section in the Properties View.}
 
     \uicontrol {Tool Button} is nearly identical to \l Button, but it has a
     graphical appearance that makes it more suitable for insertion into a

doc/qtdesignstudio/src/components/qtquick-images.qdoc

@@ -204,12 +204,12 @@
     the ISO icon in the \l Navigator or \l {2D} view, and then select
     \uicontrol {Choose Icon} in the context menu.
 
-    \image studio-iso-icon.png
+    \image {studio-iso-icon.png} {An Iso Icon selected in the 2D view.}
 
     You can use the \l{Picking colors}{color picker} in \l Properties to
     set the value of \uicontrol {Icon color}.
 
-    \image iso-icon-browser.png
+    \image {iso-icon-browser.png} {The Iso Icon browser window.}
 
     \section1 Summary of the image components
 

doc/qtdesignstudio/src/components/qtquick-shapes.qdoc

@@ -199,7 +199,7 @@
     fields in the \uicontrol Opacity section are used to hide and show either
     the front or back side of the item at a time.
 
-    \image studio-flipable.png
+    \image {studio-flipable.png} {A Flipable in the 2D, Navigator, and Properties view.}
 
     The \uicontrol {Flip angle} property is used to animate the angle
     of the component to produce the flipping effect. The value of the

doc/qtdesignstudio/src/developers/studio-accessing-output-issues-and-warnings.qdoc

@@ -8,7 +8,7 @@
 
     \title Accessing output, issue, and warning messages
 
-    \image studio-output-view.webp Qt Design Studio Output view
+    \image {studio-output-view.webp} {The Qt Design Studio Output view.}
 
     \QDS projects generate output information that represent the
     executed processes. It also shows you the issues that stop a project from
@@ -41,10 +41,10 @@
             \li Message example
         \row
             \li Issue notification
-            \li \image studio-issue-message.webp
+            \li \image {studio-issue-message.webp} {Example issue notification in the Output view.}
         \row
             \li Warning notification
-            \li \image studio-warning-message.webp
+            \li \image {studio-warning-message.webp} {Example warning notification in the Output view.}
 
     \endtable
 

doc/qtdesignstudio/src/developers/studio-jump-to-the-code.qdoc

@@ -26,7 +26,7 @@
         \li Select \uicontrol {Jump to the Code}.
     \endlist
 
-    \image jump-to-the-code-from-navigator-view.webp
+    \image {jump-to-the-code-from-navigator-view.webp} {Selecting Jump to the Code from the context menu in the Navigator view.}
 
     \section1 Jump to the Code from the 2D view
 
@@ -35,7 +35,7 @@
         \li Select \uicontrol {Jump to the Code}.
     \endlist
 
-    \image jump-to-the-code-from-2D-view.webp
+    \image {jump-to-the-code-from-2D-view.webp} {Selecting Jump to the Code from the context menu in the 2D view.}
 
     \note Alternatively, you can select the component in the \uicontrol {Navigator} view
     or in the \uicontrol {2D} view and select \key {F4}. That takes you to the code
@@ -50,7 +50,7 @@
         \li Select \uicontrol {Jump to the Code}.
     \endlist
 
-    \image jump-to-the-code-from-state-view.webp
+    \image {jump-to-the-code-from-state-view.webp} {Selecting Jump to the Code from the context menu in the States view.}
 
     \section1 Jump to the Code from the Connections view
 
@@ -60,6 +60,6 @@
             to jump to the code segment related to the connection.
     \endlist
 
-    \image jump-to-the-code-from-connections-view.webp
+    \image {jump-to-the-code-from-connections-view.webp} {Selecting Jump to the Code from the context menu in the Connections view.}
 
 */

doc/qtdesignstudio/src/effects-concept.qdoc

@@ -19,7 +19,7 @@
 designed for both experienced developers and beginners, simplifying the process of developing
 visual effects without requiring extensive knowledge of shader coding.
 
-\image northern-lights-effect.webp
+\image {northern-lights-effect.webp} {A northern lights effect in Effect Composer.}
 
 Key features of the \QDS Effect Composer:
 

doc/qtdesignstudio/src/mcus/qtdesignstudio-creating-projects-for-mcus.qdoc

@@ -12,7 +12,7 @@
     project. When you create a project with the wizard, all the necessary files
     are created, you can adjust the project settings, and save custom presets.
 
-    \image studio-preset-for-mcus.png
+    \image studio-preset-for-mcus.png {The Qt for MCU preset on the Qt Design Studio Welcome page.}
 
     Using the \uicontrol {\QMCU} preset creates an application that uses a subset
     of the default components that you can deploy, run, and debug on MCU boards.

doc/qtdesignstudio/src/mcus/qtdesignstudio-developing-applications-for-mcus.qdoc

@@ -18,7 +18,7 @@
     mode to modify UI files (.ui.qml). For more information, see
     \l {Implementing applications}.
 
-    \image qds-mcu-target-deployment.png
+    \image {qds-mcu-target-deployment.png} {The workflow of using Qt Design Studio and Qt for MCUs to create an application for an MCU target device.}
 
     With Qt Creator, you can test, preview, and fine-tune your designs directly
     on the desktop or on an actual MCU target device. As a developer you can use

doc/qtdesignstudio/src/overviews/qt-design-viewer-navigation.qdoc

@@ -68,7 +68,7 @@
 
     \endlist
 
-    \image web-navigation-components.png
+    \image {web-navigation-components.png} {The structure of the web application in the Navigator view.}
 
     \section1 Creating the pages
 
@@ -88,7 +88,7 @@
       \li Set \uicontrol {Root Item} to \e Rectangle.
     \endlist
 
-    \image web-navigation-new-file.png
+    \image {web-navigation-new-file.png} {The New File dialog.}
 
     When you have created the new page, select \e rectangle in
     \uicontrol Navigator, and in the \uicontrol Properties view:
@@ -114,7 +114,7 @@
           \li Top, 100
           \li Left, 50
         \endlist
-        \image web-navigation-page-margins.png
+        \image {web-navigation-page-margins.png} {The Anchor and Margin properties for the web application header.}
     \endlist
 
 Now, with the first page done, create two more pages in the same way. For these
@@ -124,13 +124,13 @@ You can change the file that you are working on from the drop-down menu in the
 toolbar. Now, select \e Screen01.ui.qml from this menu to go back to your
 main page.
 
-\image web-navigation-change-file.png
+\image {web-navigation-change-file.png} {Changing the file in top toolbar.}
 
 You can see the pages you created under \uicontrol {My Components} in the
 \uicontrol Components view. To edit a component, right-click it in
 \uicontrol Components and select \uicontrol {Edit Component}
 
-\image web-navigation-page-components.png
+\image {web-navigation-page-components.png} {The web app pages in the Components view.}
 
 \section1 Organizing the pages
 
@@ -139,7 +139,7 @@ To organize the pages vertically:
 \list 1
   \li From \uicontrol Components, drag each of the pages to
   \e columnLayout in \uicontrol Navigator.
-  \image web-navigation-components-2.png
+  \image {web-navigation-components-2.png} {}
   \li Select \e columnLayout in Navigator and in \uicontrol Properties:
     \list
       \li Next to \uicontrol Size > \uicontrol W and \uicontrol Size >
@@ -189,7 +189,7 @@ main rectangle so that it adapts to the window size:
   \imageactioniconbinding
   next to \uicontrol Width and select \uicontrol {Set Binding}.
   \li Enter \c {Window.width}
-  \image web-navigation-size-binding.png
+  \image {web-navigation-size-binding.png} {Window.width set in Binding Editor.}
   \li Repeat step 2 and 3 for \uicontrol Height and set the value to
   \c {Window.height}.
 \endlist
@@ -226,7 +226,7 @@ vertically to the correct place:
   \li Select \imageactioniconbinding
   next to \uicontrol Width and select \uicontrol {Set Binding}.
   \li Enter \c {parent.width}.
-  \image web-navigation-size-binding-2.png
+  \image {web-navigation-size-binding-2.png} {parent.width set in Binding Editor.}
   \li In \uicontrol Navigator:
     \list 1
       \li Select \e Button and on the \uicontrol Button tab in \uicontrol Properties,

doc/qtdesignstudio/src/qtbridge/qtbridge-figma-overview.qdoc

@@ -13,7 +13,7 @@
     You can use \QBF to export designs from Figma to a \e {.qtbridge}
     archive that you can \l{Importing 2D Assets}{import} to projects in \QDS.
 
-    \image studio-figma-export.png
+    \image {studio-figma-export.png} {Qt Bridge for Figma open in Figma.}
 
     The following topics describe setting up and using \QBF:
 

doc/qtdesignstudio/src/qtbridge/qtbridge-figma-using.qdoc

@@ -226,7 +226,7 @@
 
     \section2 Settings
 
-    \image qt-figma-bridge-settings.png
+    \image {qt-figma-bridge-settings.png} {The Qt Bridge for Figma settings window in Figma.}
 
     You can export assets in the selected format (JPG, PNG, or SVG).
 

doc/qtdesignstudio/src/qtbridge/qtbridge-ps-overview.qdoc

@@ -13,7 +13,7 @@
     You can use \QBPS to export designs from Adobe Photoshop to \e {.metadata}
     format that you can \l{Importing 2D Assets}{import} to projects in \QDS.
 
-    \image studio-ps-export.png
+    \image {studio-ps-export.png} {Qt Bridge for Photoshop open in Adobe Photoshop.}
 
     The following topics describe setting up and using \QBPS:
 

doc/qtdesignstudio/src/qtbridge/qtbridge-ps-setup.qdoc

@@ -81,7 +81,7 @@
             enter a password in the \uicontrol Password field.
         \li To test that the connection is working properly, start \QBPS and
             select the settings icon in the top right corner.
-            \image qt-bridge-settings.png
+            \image {qt-bridge-settings.png} {The Qt Bridge for Photoshop settings window in Adobe Photoshop.}
         \li In the \uicontrol Password field, enter the password you entered in
             Adobe Photoshop and select \uicontrol {Connect}.
         \li In the \uicontrol {Export Path} group, select the folder button

doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc

@@ -133,7 +133,7 @@
     \l{Property Aliases}{property aliases} to fetch the values from other
     properties.
 
-    \image qt-bridge.png
+    \image {qt-bridge.png} {The Qt Bridge for Photoshop default home screen.}
 
     \section2 Specifying settings for exporting assets
 
@@ -238,7 +238,7 @@
     In the \uicontrol {ID Suffix} field, specify an ID suffix that will be
     appended to all auto generated IDs.
 
-    \image qt-bridge-qml-id-settings.png
+    \image {qt-bridge-qml-id-settings.png} {The ID Prefix field highlighted in the settings.}
 
     \section1 Cloning documents
 
@@ -246,7 +246,7 @@
     allows the user to filter out certain kind of layers and groups. In the \QBPS
     \uicontrol Settings dialog, select \uicontrol {Clone} to start cloning the document.
 
-    \image qt-bridge-clone.png
+    \image {qt-bridge-clone.png} {The Clone button highlighted in the Clone document settings.}
 
     \section2 Clone options
     The following exclusion options can be selected to exclude certain kind of layers and
@@ -273,7 +273,7 @@
     \note The sanitization is done in memory and the document must be saved to
     keep the sanitized state.
 
-    \image qt-bridge-sanitize.png
+    \image {qt-bridge-sanitize.png} {The Sanitize button highlighted in the settings.}
 
     \section1 Extending \QBPS
     You can change the default behavior of \QBPS with the help of a JSX script. One can write
@@ -297,11 +297,11 @@
             PSD layer instance.
     \endlist
 
-    \note Please refer to \l {https://www.adobe.com/devnet/photoshop/scripting.html}
+    \note See the \l {https://www.adobe.com/devnet/photoshop/scripting.html}
     {Adobe Photoshop CC Javascript} scripting guide to understand the object model and \e Document
     and \e Layer instances.
 
-    \image qt-bridge-override.png
+    \image {qt-bridge-override.png} {The Script Path field highlighted in the settings.}
 
     In the \QBPS \uicontrol Settings dialog, select \uicontrol {Override JSX Script} to set the
     override JSX script.
@@ -317,14 +317,14 @@
     Select the \uicontrol Import button to launch the \uicontrol Import panel. Alternatively, \QB
     import can be launched from \uicontrol Window > \uicontrol Extensions.
 
-    \image qt-bridge-import.png
+    \image {qt-bridge-import.png} {The Qt Bridge import dialog.}
 
     Create a new PSD document and launch the \uicontrol Import dialog. Open the metadata file to
     import and select \uicontrol Import.
 
     \note The import process removes all the existing layers in the selected PSD document.
 
-    \image qt-bridge-import-warning.png
+    \image {qt-bridge-import-warning.png} {An import warning in the Qt Bridge import dialog.}
 
     The following guidelines are followed to generate the Photoshop document:
     \list

doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-overview.qdoc

@@ -13,7 +13,7 @@
     You can use \QBSK to export designs from Sketch to \e {.metadata}
     format that you can \l{Importing 2D Assets}{import} to projects in \QDS.
 
-    \image studio-sketch-export.png
+    \image {studio-sketch-export.png} {Qt Bridge for Sketch open in Sketch.}
 
     The following topics describe setting up and using \QBSK:
 

doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-using.qdoc

@@ -160,7 +160,7 @@
     component in \QDS. Or you could export a button as a Qt Quick Controls
     \l Button component.
 
-    \image qt-sketch-bridge.png
+    \image {qt-sketch-bridge.png} {Qt Bridge for Sketch open with default settings.}
 
     \section2 Specifying settings for exporting assets
 
@@ -253,7 +253,7 @@
     You can export assets into JPG, PNG, or SVG format. To specify export path
     and asset format, select \uicontrol Settings.
 
-    \image qt-sketch-bridge-settings.png
+    \image {qt-sketch-bridge-settings.png} {Qt Bridge for Sketch export settings with export path and asset format specified.}
 
     \QBSK exports assets to a .qtbridge archive named after your
     Sketch file. By default, the directory is  located inside the parent directory
@@ -303,5 +303,5 @@
     To export a library, select \uicontrol Export. \QBSK asks you whether you want to export the
     complete library or to unlink the symbols.
 
-    \image qt-sketch-bridge-library.png
+    \image {qt-sketch-bridge-library.png} {Qt Bridge for Sketch Export Library dialog.}
 */

doc/qtdesignstudio/src/qtbridge/qtbridge-xd-overview.qdoc

@@ -16,7 +16,7 @@
     You can use \QBXD to export designs from Adobe XD to \e {.qtbridge}
     format that you can \l{Importing 2D Assets}{import} to projects in \QDS.
 
-    \image qt-bridge-xd.png
+    \image {qt-bridge-xd.png} {The Qt Bridge for Adobe XD open in Adobe XD.}
 
     The following topics describe setting up and using \QBXD:
 

doc/qtdesignstudio/src/qtbridge/qtbridge-xd-setup.qdoc

@@ -29,7 +29,7 @@
     \note Since the plugin is not distributed through Adobe's marketplace, during
     the installation Adobe XD might warn about the third-party developer.
 
-    \image qt-bridge-xd-warn.png
+    \image {qt-bridge-xd-warn.png} {The Install Qt Bridge plugin warning dialog.}
 
     You can launch the plugin from \uicontrol Plugins > \uicontrol {\QB}.
 */

doc/qtdesignstudio/src/qtbridge/qtbridge-xd-using.qdoc

@@ -68,7 +68,7 @@
     exported. The \uicontrol {Home} panel displays and allows layer annotation for
     export.
 
-    \image qt-bridge-xd-home.png
+    \image {qt-bridge-xd-home.png} {The Qt Bridge for Adobe XD home panel.}
 
     \list 1
         \li In the \uicontrol ID field, enter a unique and descriptive name.
@@ -180,8 +180,8 @@
     \list 1
       \li Select \uicontrol Settings.
 
-          \image qt-bridge-xd-menu.png
-          \image qt-bridge-xd-settings.png
+          \image {qt-bridge-xd-menu.png} {Settings selected in the file menu.}
+          \image {qt-bridge-xd-settings.png} {The Qt Bridge for Adobe XD Settings panel.}
       \li You can now edit the following settings:
 
         \list

doc/qtdesignstudio/src/qtdesignstudio-exporting-and-importing.qdoc

@@ -19,7 +19,7 @@
 
     The following image describes the workflow in a basic way using \QBPS and \QDS:
 
-    \image studio-workflow.png
+    \image {studio-workflow.png} {The complete designer-developer workflow from design tool to a finished application.}
 
     The workflow consists of the following steps:
 

doc/qtdesignstudio/src/qtdesignstudio-qt-runtime-version.qdocinc

@@ -5,6 +5,6 @@
     \QDS runs projects using a specific version of Qt.
     In \QDS, find the Qt runtime version in the bottom toolbar.
 
-    \image studio-qt-development-kit.webp
+    \image {studio-qt-development-kit.webp} {The kit selector dropdown menu in the bottom toolbar.}
 //! [qt-runtime-version]
 */

doc/qtdesignstudio/src/qtdesignstudio-using-effect-maker-effects.qdoc

@@ -23,11 +23,11 @@
       \li Right-click in the \uicontrol Assets view and
       select \uicontrol {New Effect}.
       \QDS creates an effect file and opens it in \QQEM.
-      \image qt-quick-effect-maker.webp
+      \image {qt-quick-effect-maker.webp} {The Qt Effect Maker default view.}
       \li Edit the effect.
       \li In \QQEM, go to \uicontrol File > \uicontrol Save.
       \li With the default settings, select \uicontrol OK.
-      \image effect-maker-export.png
+      \image {effect-maker-export.png} {Qt Effect Maker export effect dialog.}
     \endlist
 
     Now, you can close \QQEM and return to \QDS and apply the
@@ -39,6 +39,6 @@
     from the \uicontrol Assets view to the component in the \uicontrol 2D or
     \uicontrol Navigator view.
 
-    \image apply-effect-maker-effect.webp
+    \image {apply-effect-maker-effect.webp} {Qt Design Studio with a Qt Effect Maker effect applied.}
 
 */

doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-camera.qdoc

@@ -137,7 +137,7 @@
       \li In \uicontrol Navigator, select the camera.
       \li In \uicontrol Properties > \uicontrol {Look-at-Node}, select the object that
       the camera should look at.
-      \image camera-look-at-node.webp
+      \image {camera-look-at-node.webp} {Selecting the Look-at-Node object in the Camera sections in the Properties view.}
     \endlist
 
     When you set a camera to look at an object, the camera automatically rotates to

doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc

@@ -186,7 +186,7 @@
 
     In the 3D view, you can show a small window displaying the camera view.
 
-    \image 3d-view-camera-view.webp
+    \image {3d-view-camera-view.webp} {The Camera view in the 3D view.}
 
     To toggle this view,
     select \imagevisibilityon

doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-importing.qdoc

@@ -23,7 +23,7 @@
     For more information about exporting 3D graphics, see
     \l{Exporting 3D assets}.
 
-    \image studio-import-3d.webp
+    \image {studio-import-3d.webp} {The Asset Import dialog.}
 
     \section1 Importing a 3D asset
 

doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-lights.qdoc

@@ -249,7 +249,7 @@
       \li Select \uicontrol Bake.
     \endlist
 
-    \image bake-lights-dialog.png
+    \image {bake-lights-dialog.png} {The Lights Baking Setup dialog.}
 
     \section2 Manually baking lightmaps for a 3D model
 
@@ -261,7 +261,7 @@
     \list 1
       \li From \uicontrol Components, drag a \uicontrol {Baked Lightmap} component
           to the 3D model in the \uicontrol Navigator view.
-      \image baked-lightmaps-navigator.png
+      \image {baked-lightmaps-navigator.png} {The Baked Lightmap component in the Navigator view.}
       \li In the \uicontrol Navigator view, select \e bakedLightmap, and in the
           \uicontrol Properties view:
         \list
@@ -289,15 +289,15 @@
     \list 1
       \li In the \uicontrol Navigator view, right-click the subcomponent and select
       \uicontrol {Edit Component}.
-      \image baked-lightmaps-edit-component.png
+      \image {baked-lightmaps-edit-component.png} {Selecting Edit Component from the context menu in the Navigator view.}
       \li In the \uicontrol Navigator view, select the root component.
       \li In the \uicontrol Properties view, select \imageplus
       in the \uicontrol {Local Custom Properties} section.
       \li Add a new property, set \uicontrol Type to alias.
-      \image baked-lightmaps-add-property.png
+      \image {baked-lightmaps-add-property.png} {The Add New Property dialog.}
       \li For the property, set the value to the ID of the 3D model that you want
       to bake lightmaps for.
-      \image baked-lightmaps-property-value.png
+      \image {baked-lightmaps-property-value.png} {The custom property set to sphere in the Local Custom Tab in the Properties view.}
       \li In the \uicontrol Navigator view, select the 3D model and in the \uicontrol Properties
       view:
         \list
@@ -306,10 +306,10 @@
         \endlist
       \li Save your changes (\key {Ctrl+S}) and return to the main project file. To do this, select
       the bread crumb in the top toolbar.
-      \image baked-lightmaps-exit-component.png
+      \image {baked-lightmaps-exit-component.png} {Selecting the main project file bread crumb in the top toolbar.}
       \li From the \uicontrol Components view, drag a \uicontrol {Baked Lightmap} component to the
       subcomponent in the \uicontrol Navigator view.
-      \image baked-lightmaps-navigator-blm.png
+      \image {baked-lightmaps-navigator-blm.png} {The Baked Lightmap component in the Navigator view.}
       \li In the \uicontrol Navigator view, select the subcomponent and go to the
       \uicontrol Code view.
       \li In the \uicontrol Code view, you need to set the properties for the model inside the sub

doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-loader-3d.qdoc

@@ -67,10 +67,10 @@
       \li From \uicontrol {Components}, drag a \uicontrol Loader3D component to
       \e scene in the \uicontrol Navigator or \uicontrol{3D} view.
       \li In \uicontrol {Navigator}, select \e{loader3D}.
-      \image loader3d-navigator.png
+      \image {loader3d-navigator.png} {The loader3D component in the Navigator view.}
       \li In \uicontrol {Properties}, select \uicontrol{Source} and select a
       QML file.
-      \image loader3d-select-source.png
+      \image {loader3d-select-source.png} {Setting the Loader3D Source setting in the Properties view.}
     \endlist
 
     \section1 Setting Loader3D to load a Component3D component
@@ -85,12 +85,12 @@
       \li In \uicontrol {Navigator}, select the filter icon and clear
       \uicontrol {Show Only Visible Components}. This makes the \uicontrol Component3D
       component visible in \uicontrol Navigator.
-      \image navigator-show-all-loader.png
+      \image {navigator-show-all-loader.png} {Toggling component visibility in the Navigator view.}
       \li In \uicontrol {Navigator}, select \e{loader3D}.
       \li In \uicontrol {Properties}, select \uicontrol{Source Component}
       and select \e {component3D}.
 
-      \image loader3d-select-source-component.png
+      \image {loader3d-select-source-component.png} {Selecting Source Component in the Properties view.}
     \endlist
 
     \section1 Setting the Visibility of loading components
@@ -101,7 +101,7 @@
         \list 1
             \li In \uicontrol Properties > \uicontrol Loader3D, select the
                 \uicontrol Asynchronous check box.
-                \image loader3d-visibility.png
+                \image {loader3d-visibility.png} {The Asynchronous setting turned on in the Properties view.}
             \li In \uicontrol {Visibility},
                 select \imageactionicon
                 to open the actions menu, and then select \uicontrol {Set Binding}.

doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-particles.qdoc

@@ -311,7 +311,7 @@
       \uicontrol Navigator. You can also drag it to the \uicontrol{3D} view.
     \endlist
 
-    \image studio-3d-particles-sprite-template.png
+    \image {studio-3d-particles-sprite-template.png} {The particle system template components in the Component view.}
 
     \section1 Performance considerations
 
@@ -536,7 +536,7 @@
     Specify properties for line particles in \uicontrol Properties >
     \uicontrol {Line Particle}.
 
-    \image studio-3d-properties-line-particle.png
+    \image {studio-3d-properties-line-particle.png} {The Line Particle properties in the Properties view.}
 
     \uicontrol {Segments} defines the number of segments in each line.
 
@@ -845,7 +845,7 @@
     Specify properties for emit bursts in \uicontrol Properties >
     \uicontrol {Dynamic Burst}.
 
-    \image studio-3d-properties-particle-dynamic-burst.png
+    \image {studio-3d-properties-particle-dynamic-burst.png} {The Dynamic Burst properties in the Properties view.}
 
     \uicontrol {Trigger Mode} defines when the burst is triggered:
 
@@ -1022,7 +1022,7 @@
     Specify settings for \uicontrol Repeller component instances in
     \uicontrol Properties > \uicontrol {Particle Repeller}.
 
-    \image studio-3d-properties-particle-repeller.png
+    \image {studio-3d-properties-particle-repeller.png} {The Repeller properties in the Properties view.}
 
     \uicontrol {Outer Radius} defines the outer radius of the repeller. The
     particle is not affected until it enters this radius and the repel
@@ -1038,7 +1038,7 @@
     \uicontrol {Scale Affector} scales particles based on their lifetime and
     other parameters.
 
-    \image studio-3d-properties-particle-scale-affector.png
+    \image {studio-3d-properties-particle-scale-affector.png} {The Particle Scale Affector properties in the Properties view.}
 
     \uicontrol {Minimum Size} defines the minimum size that the affector can
     scale particles to.

doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-repeater-3d.qdoc

@@ -74,7 +74,7 @@
       \e scene in \uicontrol Navigator.
       \li Select \e repeater3D in \uicontrol Navigator and in
       \uicontrol Properties, set \uicontrol Model to 4.
-      \image repeater3d-model-property.png
+      \image {repeater3d-model-property.png} {The Repeater Model property set to 4 in the Properties view.}
     \endlist
     Now, you have set up the \uicontrol Repeater3D component to use a numeric
     model that draws four instances of the same item. Next, you need to add the
@@ -90,11 +90,11 @@
       \li Select \uicontrol {Set binding} to open \uicontrol {Binding Editor}.
       \li In the binding editor, enter \c{index * 150}. This sets the X
       location to increase by 150 for each of the cube instances.
-      \image repeater3d-index-binding.png
+      \image {repeater3d-index-binding.png} {index * 150 set in Bindings Editor.}
       \li Select \uicontrol OK and go to the \uicontrol{3D} view to see the
       result.
     \endlist
-    \image repeater3d-numeric-model.webp
+    \image {repeater3d-numeric-model.webp} {Four cubes rendered with the Repeater component in the 3D view.}
 
     \section1 Adding a Repeater3D component with a List Model
 
@@ -172,7 +172,7 @@
     \list 1
       \li From \uicontrol Components, drag a \uicontrol Sphere to \e _3DRepeater
       in \uicontrol Navigator.
-      \image repeater3d-listmodel-navigator.png
+      \image {repeater3d-listmodel-navigator.png} {The Sphere component in the Navigator view.}
       \li Select \e sphere in \uicontrol Navigator and in the \uicontrol Properties view, select
       \imageactionicon
       next to \uicontrol Scale > \uicontrol X.
@@ -180,7 +180,7 @@
       \li In the binding editor, enter \c{radius}. This sets the X
       scale to the radius value defined in the list model for each of the sphere
       instances.
-      \image repeater3d-radius-binding.png
+      \image {repeater3d-radius-binding.png} {radius set in Binding Editor.}
       \li Select \uicontrol OK.
       \li Repeat steps 2 to 5 for \uicontrol Scale > \uicontrol Y and
       \uicontrol Scale > \uicontrol Z.
@@ -196,7 +196,7 @@
       \li Select \uicontrol {Set binding} to open \uicontrol {Binding Editor}.
       \li In the binding editor, enter \c{index * 1000}. This sets the X
       location to increase by 1000 for each of the sphere instances.
-      \image repeater3d-location-binding.png
+      \image {repeater3d-location-binding.png} {index * 1000 set in Binding Editor.}
       \li Select \uicontrol OK and go to the \uicontrol{3D} view to see the
       result. You need to zoom out to see all the spheres.
     \endlist

doc/qtdesignstudio/src/qtquickdesigner-components/qtdesignstudio-logic-helpers.qdoc

@@ -246,7 +246,7 @@
     is under or over the going value. We then use \uicontrol {And Operator}
     components to determine whether the value is below minimum or above maximum.
 
-    \image studio-logic-helper-combining-example.gif
+    \image {studio-logic-helper-combining-example.gif} {An animated example of an app combining several logic helpers.}
 
     We use one \uicontrol {String Mapper} component to map the
     slider value to a \uicontrol Text component that displays the price, as
@@ -295,7 +295,7 @@
     and sell hints. For this purpose, we create the states and set
     \c when conditions for them.
 
-    \image studio-logic-helper-combining-example.png
+    \image {studio-logic-helper-combining-example.png} {The different stats of the app in the States view.}
 
     First, we create a \e tooLow state and set a \c when condition to
     apply it when the value of the \uicontrol {Below min} field of

doc/qtdesignstudio/src/reference/qtdesignstudio-keyboard-shortcuts.qdoc

@@ -14,7 +14,7 @@
     To view all \QDS functions in and their keyboard shortcuts, select
     \preferences > \uicontrol Environment > \uicontrol Keyboard.
 
-    \image qtcreator-keyboard-shortcuts.png
+    \image {qtcreator-keyboard-shortcuts.png} {Keyboard shortcut settings.}
 
     The shortcuts that are displayed in red color are associated with several
     functions. \QDS executes the function that is available in the current

doc/qtdesignstudio/src/views/qtquick-connection-editor-bindings.qdoc

@@ -25,7 +25,7 @@
 
     You can create bindings between components in \uicontrol Bindings.
 
-    \image qmldesigner-bindings.webp
+    \image {qmldesigner-bindings.webp} {The Bindings tab in the Connections view.}
 
     \section1 Creating bindings between component properties
 
@@ -35,7 +35,7 @@
 
         \li Place two components in the \uicontrol {2D} view.
 
-        \image qmldesigner-components-before-binding.webp
+        \image {qmldesigner-components-before-binding.webp} {Two components next to each other in the 2D view.}
 
         \li Name the first component as \e {viewBox}.
         \li Name the second component as \e {connectBox}.
@@ -46,7 +46,7 @@
              (\uicontrol Add) button to add a binding to the currently selected
             component.
 
-        \image qmldesigner-updated-bindings-editor.webp
+        \image qmldesigner-updated-bindings-editor.webp {The Add Binding dialog.}
 
         \li From the pop-up \uicontrol {Bindings editor}, in the \uicontrol From section,
             select \e {viewBox} as the parent component, then select its \uicontrol {border.color}
@@ -58,7 +58,7 @@
             instantly getting applied to the \uicontrol {color} of the \e {connectBox}
             component.
 
-        \image qmldesigner-components-after-binding.webp
+        \image qmldesigner-components-after-binding.webp {Two components next to each other in the 2D view with the property binding applied.}
 
     \endlist
 

doc/qtdesignstudio/src/views/qtquick-connection-editor-properties.qdoc

@@ -40,9 +40,9 @@
         \li Select the \imageplus
             (\uicontrol Add) button to add a custom property for the currently
             selected component.
-            \image add-local-custom-property.png
+            \image {add-local-custom-property.png} {Selecting the Add button in the Properties view.}
         \li Set the \uicontrol Name and \uicontrol Type for the property.
-            \image add-new-property-dialog.png
+            \image {add-new-property-dialog.png} {Selecting the Type for the property in the Add New Property dialog.}
     \endlist
 
     \section1 Binding a property value
@@ -69,14 +69,14 @@
             \uicontrol {2D} view or in the \uicontrol {Navigator} view.
         \li Select \uicontrol {Properties} from the \uicontrol {Connections} view.
 
-            \image add-updated-local-custom-property.webp
+            \image {add-updated-local-custom-property.webp} {The Properties tab in the Connections view.}
 
         \li Select the \imageplus
              (\uicontrol Add) button to add a Custom property.
         \li From the pop-up \uicontrol {Custom property editor}, select the \uicontrol {Type}
             of the property you want to include.
 
-            \image add-updated-local-custom-property-editor.webp
+            \image {add-updated-local-custom-property-editor.webp} {The Custom Property Editor dialog.}
 
         \li Next, set the \uicontrol{Name} of the property.
         \li Set a value to the Custom property in the \uicontrol {Value} field.

doc/qtdesignstudio/src/views/qtquick-connection-editor-signals.qdoc

@@ -45,7 +45,7 @@
     put \b {logical conditions} on this \uicontrol Actions to control them
     according to your needs.
 
-    \image qmldesigner-connections-advanced.webp
+    \image {qmldesigner-connections-advanced.webp} {The Connections tab in the Connections view.}
 
     Initiate a new connection for a component:
 
@@ -57,7 +57,7 @@
             (\uicontrol Add) button to add a connection.
     \endlist
 
-    \image qmldesigner-connections-editor.webp
+    \image {qmldesigner-connections-editor.webp} {The Add Connection dialog.}
 
     Connect component \uicontrol Signal to \uicontrol Action:
 
@@ -108,7 +108,7 @@
       \li Follow the steps described above in Connect component \uicontrol Signal to
           \uicontrol Action. For a list of \uicontrol Actions and their properties, see
           \l {Action Properties}.
-          \image qmldesigner-connections-ConditionalAction-Autometic.webp
+          \image {qmldesigner-connections-ConditionalAction-Autometic.webp} {The Add Connection dialog with a JavaScript expression.}
       \li Open the \uicontrol {Manual Code Edit} window from the
           \uicontrol {Connections} view and write JavaScript expressions with components
           and logical expressions manually.
@@ -118,7 +118,7 @@
             level \e {if-else} expression. For nested level \e {if-else} expressions,
             use the \uicontrol {Manual Code Edit}.
 
-        \image qmldesigner-connections-ConditionalAction-Manual.webp
+        \image {qmldesigner-connections-ConditionalAction-Manual.webp} {A JavaScript code snippet in the Manual Code Edit dialog.}
     \endlist
 
     \section2 Action properties

doc/qtdesignstudio/src/views/qtquick-navigator.qdoc

@@ -162,7 +162,7 @@
     (\uicontrol Export) button in \uicontrol Navigator to export
     a component as a property alias with a valid alias reference.
 
-    \image qmldesigner-export-item.png
+    \image {qmldesigner-export-item.png} {Selecting the Export button in the Navigator view.}
 
     You can then use the property alias in other components to
     \l{Working with connections}{create connections} to this component.

doc/qtdesignstudio/src/views/qtquick-properties-view.qdoc

@@ -44,7 +44,7 @@
         \li A property that has been added inside a component.
     \endtable
 
-    \image custom-properties.png
+    \image {custom-properties.png} {Local Custom Properties and Exposed Custom Properties settings in the Settings view.}
 
     \section1 Viewing changes in properties
 
@@ -81,21 +81,21 @@
 
     \table
         \row
-            \li \image qmldesigner-boolean-true.png
+            \li \image {qmldesigner-boolean-true.png} {The Visibility property selected but not highlighted.}
             \li TRUE
             \li The component is visible by default. The visibility might be
                 overridden by the visibility set in the base state.
         \row
-            \li \image qmldesigner-boolean-true-blue.png
+            \li \image {qmldesigner-boolean-true-blue.png} {The Visibility property selected and highlighted.}
             \li TRUE (highlighted)
             \li The component is explicitly set to visible.
         \row
-            \li \image qmldesigner-boolean-false.png
+            \li \image {qmldesigner-boolean-false.png} {The Visibility property not selected and not highlighted.}
             \li FALSE
             \li The component is hidden by default. The visibility might be
                 overridden by the visibility set in the base state.
         \row
-            \li \image qmldesigner-boolean-false-blue.png
+            \li \image {qmldesigner-boolean-false-blue.png} {The Visibility property not selected but highlighted.}
             \li FALSE (hightlighted)
             \li The component is explicitly set to hidden.
     \endtable

doc/qtdesignstudio/src/views/qtquick-properties.qdoc

@@ -208,7 +208,7 @@
     or \uicontrol Vertical in the \uicontrol {Gradient Controls} section of the
     color picker.
 
-    \image qtquick-designer-gradient-stops.gif
+    \image {qtquick-designer-gradient-stops.gif} {An Animation showing how to add and remove gradient stops.}
 
     Calculating gradients can be computationally expensive compared to the
     use of solid color fills or images. Consider using gradients only for
@@ -462,5 +462,5 @@
     you can also right-click components to open the inline editors from the
     context menu.
 
-    \image qmldesigner-inline-editing.png
+    \image qmldesigner-inline-editing.png {Selecting Edit Color from the context menu in the 2D view.}
 */

doc/qtdesignstudio/src/views/qtquick-states.qdoc

@@ -183,10 +183,10 @@
 
     Here, extended states are not used:
 
-    \image no-extended-state.webp
+    \image {no-extended-state.webp} {Three states in the States view with no extended state.}
 
     Here, \e State2 is extended from \e State1:
 
-    \image extended-state.webp
+    \image {extended-state.webp} {Three states in the States view with State2 extended from State1.}
 
 */

doc/qtdesignstudio/src/views/qtquick-timeline.qdoc

@@ -37,7 +37,7 @@
                 of the timeline. Negative values are allowed.
                 \li In the \uicontrol {End frame} field, set the last frame
                 of the timeline.
-                \image timeline-settings-dialog.png
+                \image {timeline-settings-dialog.png} {The Timeline Settings dialog.}
             \endlist
         \li On the \uicontrol {Animation Settings} tab:
             \list
@@ -87,13 +87,13 @@
        . This creates another timeline.
        \li In the table below the \uicontrol {Animation Settings} tab, set the
        Timeline for the state where you want to use it.
-       \image timeline-settings-dialog-second.png
+       \image {timeline-settings-dialog-second.png} {Two timelines in the Timeline Settings dialog.}
     \endlist
     To set the keyframe values for the timeline you created, first select the
     state in \uicontrol {States} and the timeline is available in
     \uicontrol{Timelines}.
 
-    \image timeline-states.webp
+    \image {timeline-states.webp} {The Timeline and States views.}
 
     \section2 Setting keyframe values
 
@@ -114,11 +114,11 @@
         \li In the \l Properties view, select \imageactionicon
             (\uicontrol Actions) > \uicontrol {Insert Keyframe} for the property
             that you want to animate.
-            \image timeline-insert-keyframe.png
+            \image {timeline-insert-keyframe.png} {Selecting Insert Keyframe from the Action drop-down menu in the Properties view.}
         \li In the \l Timeline view, select the
             \uicontrol {Per Property Recording} button
             to start recording property changes.
-            \image timeline-per-property-recording.webp
+            \image {timeline-per-property-recording.webp} {Selecting the Per Property Recording button in the Timeline view.}
         \li Ensure that the playhead is in frame 0 and enter the value of the
             property in the field next to the property name on the timeline.
             Select \key Enter to save the value.
@@ -155,7 +155,7 @@
         next to the \uicontrol {Animation Settings} tab to delete the
         animation. If you have several animations, delete all.
         \li In \uicontrol {Expression binding}, enter \c {slider.value}.
-        \image timeline-settings-property-binding.png
+        \image {timeline-settings-property-binding.png} {Expression binding set to slider.value in the Timeline Settings dialog.}
     \endlist
 
     \section2 Binding animations to states
@@ -172,7 +172,7 @@
           the timeline with the animation you want to bind to the state.
           \li Double-click the value in the \uicontrol Animation field and
           select the animation you want to bind to the state.
-          \image timeline-bind-animation-state.png
+          \image {timeline-bind-animation-state.png} {Selecting an Animation in the Timeline Settings dialog window to bind it to a state.}
         \endlist
     \endlist
     To bind a state to a certain keyframe in an animation without running the

doc/qtdesignstudio/src/views/studio-content-library.qdoc

@@ -26,7 +26,7 @@
     Assets added to \uicontrol {User Assets} are always available in \uicontrol {Content Library}
     regardless of what project you are working on.
 
-    \image content-library.webp
+    \image {content-library.webp} {The Materials tab in the Content Library view.}
 
     \section1 Adding a material to your project
 
@@ -86,7 +86,7 @@
 
     \section1 User Assets
 
-    \image user-assets.webp
+    \image {user-assets.webp} {The User Assets tab in the Content Library view.}
 
     Add assets to \uicontrol {User Assets} to access them in any project.
 

doc/qtdesignstudio/src/views/studio-qtinsight.qdoc

@@ -21,7 +21,7 @@
     \l{https://www.qt.io/product/insight/onboarding-instructions}{Getting Started with Qt Insight}
     documentation.
 
-    \image qt-insight-view.png
+    \image {qt-insight-view.png} {The Qt Insight view.}
 
     In \QDS, you can do the following with Qt Insight:
     \list

doc/qtdesignstudio/src/views/studio-translations.qdoc

@@ -106,13 +106,13 @@
           \li \uicontrol{Exceeds boundaries} highlights translations where
           the text is too long to fit in the text object.
         \endlist
-        \image translation-tester.png
+        \image {translation-tester.png} {The Translation Tester dialog with all highlights selected.}
       \li Select \uicontrol{Run Tests}.
     \endlist
 
     When the test has completed, you can see the test result highlights in
     the \uicontrol {2D} view.
-    \image qml-translation-test-result.png
+    \image {qml-translation-test-result.png} {The Test Results dialog.}
 
     If the test finds an error, it is highlighted for all languages. For
     example, if a translation is missing for Swedish, it is also highlighted

share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryTextureContextMenu.qml

@@ -13,12 +13,14 @@ StudioControls.Menu {
     property var targetTexture: null
     property bool hasSceneEnv: false
     property bool showRemoveAction: false // true: adds an option to remove targetTexture
+    property bool showInGraphicalShellVisible: false
 
     property bool canUse3D: targetTexture && ContentLibraryBackend.rootView.hasQuick3DImport && ContentLibraryBackend.rootView.hasMaterialLibrary
 
-    function popupMenu(targetTexture = null)
+    function popupMenu(targetTexture = null, showInGraphicalShellItemVisible = false)
     {
         this.targetTexture = targetTexture
+        root.showInGraphicalShellVisible = showInGraphicalShellItemVisible
         ContentLibraryBackend.rootView.updateSceneEnvState();
         popup()
     }
@@ -49,4 +51,20 @@ StudioControls.Menu {
         height: visible ? implicitHeight : 0
         onTriggered: ContentLibraryBackend.userModel.removeTexture(root.targetTexture)
     }
+
+    StudioControls.MenuSeparator {
+        visible: root.showInGraphicalShellVisible
+        height: visible ? StudioTheme.Values.border : 0
+    }
+
+    StudioControls.MenuItem {
+        text: ContentLibraryBackend.rootView.showInGraphicalShellMsg
+
+        visible: root.showInGraphicalShellVisible
+        height: visible ? implicitHeight : 0
+
+        onTriggered: {
+            ContentLibraryBackend.rootView.showInGraphicalShell(root.targetTexture.textureParentPath)
+        }
+    }
 }

share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryUserView.qml

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
 
 import QtQuick
+import QtQuick.Layouts
 import Qt.labs.qmlmodels
 import HelperWidgets as HelperWidgets
 import StudioControls as StudioControls
@@ -79,9 +80,37 @@ Item {
         }
     }
 
+    ColumnLayout {
+        id: col
+
+        anchors.fill: parent
+        spacing: 0
+
+        Rectangle {
+            id: toolbar
+
+            width: parent.width
+            height: StudioTheme.Values.toolbarHeight
+            color: StudioTheme.Values.themeToolbarBackground
+
+            HelperWidgets.AbstractButton {
+                style: StudioTheme.Values.viewBarButtonStyle
+                buttonIcon: StudioTheme.Constants.add_medium
+                enabled: (this.hasMaterial ?? false)
+                      && hasModelSelection
+                      && hasQuick3DImport
+                      && hasMaterialLibrary
+                tooltip: qsTr("Add a custom bundle folder.")
+                onClicked: ContentLibraryBackend.rootView.browseBundleFolder()
+                x: 5 // left margin
+            }
+        }
+
         HelperWidgets.ScrollView {
             id: scrollView
-        anchors.fill: parent
+
+            Layout.fillWidth: true
+            Layout.fillHeight: true
 
             clip: true
             interactive: !ctxMenuItem.opened && !ctxMenuTexture.opened
@@ -104,14 +133,23 @@ Item {
                         bottomPadding: StudioTheme.Values.sectionPadding
 
                         caption: categoryTitle
+                        captionTooltip: section.isCustomCat ? categoryBundlePath : ""
                         dropEnabled: true
                         category: "ContentLib_User"
+                        showCloseButton: section.isCustomCat
+                        closeButtonToolTip: qsTr("Remove folder")
+                        closeButtonIcon: StudioTheme.Constants.deletepermanently_small
+
+                        onCloseButtonClicked: {
+                            ContentLibraryBackend.userModel.removeBundleDir(index)
+                        }
 
                         function expandSection() {
                             section.expanded = true
                         }
 
                         property alias count: repeater.count
+                        property bool isCustomCat: !["Textures", "Materials", "3D"].includes(section.caption);
 
                         onCountChanged: root.assignMaxCount()
 
@@ -125,6 +163,7 @@ Item {
                             drag.accepted = (categoryTitle === "Textures" && hasTexture)
                                          || (categoryTitle === "Materials" && drag.formats[0] === "application/vnd.qtdesignstudio.material")
                                          || (categoryTitle === "3D" && has3DNode)
+                                         || (section.isCustomCat && hasTexture)
 
                             section.highlight = drag.accepted
                         }
@@ -147,16 +186,26 @@ Item {
                                 ContentLibraryBackend.rootView.acceptMaterialDrop(drag.getDataAsString(drag.formats[0]))
                             } else if (categoryTitle === "3D") {
                                 ContentLibraryBackend.rootView.accept3DDrop(drag.getDataAsArrayBuffer(drag.formats[0]))
+                            } else { // custom bundle folder
+                                if (drag.formats[0] === "application/vnd.qtdesignstudio.assets")
+                                    ContentLibraryBackend.rootView.acceptTexturesDrop(drag.urls, categoryBundlePath)
+                                else if (drag.formats[0] === "application/vnd.qtdesignstudio.texture")
+                                    ContentLibraryBackend.rootView.acceptTextureDrop(drag.getDataAsString(drag.formats[0]), categoryBundlePath)
                             }
                         }
 
                         Grid {
+                            id: grid
+
                             width: section.width - section.leftPadding - section.rightPadding
                             spacing: StudioTheme.Values.sectionGridSpacing
                             columns: root.numColumns
 
+                            property int catIdx: index
+
                             Repeater {
                                 id: repeater
+
                                 model: categoryItems
 
                                 delegate: DelegateChooser {
@@ -179,7 +228,7 @@ Item {
                                             width: root.cellWidth
                                             height: root.cellWidth // for textures use a square size since there is no name row
 
-                                        onShowContextMenu: ctxMenuTexture.popupMenu(modelData)
+                                            onShowContextMenu: ctxMenuTexture.popupMenu(modelData, grid.catIdx > 2)
                                         }
                                     }
                                     DelegateChoice {
@@ -215,17 +264,19 @@ Item {
                                                                             : categoryTitle.toLowerCase()
                                 if (!ContentLibraryBackend.rootView.isQt6Project) {
                                     qsTr("<b>Content Library</b> is not supported in Qt5 projects.")
-                            } else if (!ContentLibraryBackend.rootView.hasQuick3DImport && categoryTitle !== "Textures") {
+                                } else if (!ContentLibraryBackend.rootView.hasQuick3DImport
+                                           && categoryTitle !== "Textures" && !section.isCustomCat) {
                                     qsTr('To use %1, add the <b>QtQuick3D</b> module and the <b>View3D</b>
                                          component in the <b>Components</b> view, or click
                                          <a href=\"#add_import\"><span style=\"text-decoration:none;color:%2\">
                                          here</span></a>.')
                                     .arg(categoryName)
                                     .arg(StudioTheme.Values.themeInteraction)
-                            } else if (!ContentLibraryBackend.rootView.hasMaterialLibrary && categoryTitle !== "Textures") {
+                                } else if (!ContentLibraryBackend.rootView.hasMaterialLibrary
+                                           && categoryTitle !== "Textures" && !section.isCustomCat) {
                                     qsTr("<b>Content Library</b> is disabled inside a non-visual component.")
                                 } else if (categoryEmpty) {
-                                qsTr("There are no "+ categoryName + " in the <b>User Assets</b>.")
+                                    qsTr("There are no items in this category.")
                                 } else {
                                     ""
                                 }
@@ -251,3 +302,4 @@ Item {
             }
         }
     }
+}

share/qtcreator/qmldesigner/designsystem/Main.qml

@@ -23,12 +23,11 @@ Rectangle {
     readonly property int cellWidth: 200
     readonly property int cellHeight: 40
 
-    readonly property color textColor: "#ffffff"
-    readonly property color iconColor: "#959595"
-    readonly property color backgroundColor: "#2c2c2c"
-    readonly property color borderColor: "#444444"
+    readonly property color backgroundColor: StudioTheme.Values.themePanelBackground
+    // TODO This is not a proper color value, but will be fixed with new design
+    readonly property color borderColor: StudioTheme.Values.themeControlBackground_topToolbarHover
 
-    readonly property int borderWidth: 1
+    readonly property int borderWidth: StudioTheme.Values.border
 
     readonly property int textSize: 18
     readonly property int iconSize: 16
@@ -127,7 +126,7 @@ Rectangle {
             overlayInvalid.show()
         }
 
-        function showHeaderData(section: int, orientation: var) {
+        function showHeaderData(section: int, orientation: var, message: string) {
             if (orientation === Qt.Horizontal) {
                 overlayInvalid.parent = horizontalHeaderView.contentItem
                 overlayInvalid.cellItem = horizontalHeaderView.itemAtCell(Qt.point(overlay.section, 0))
@@ -136,7 +135,7 @@ Rectangle {
                 overlayInvalid.cellItem = verticalHeaderView.itemAtCell(Qt.point(0, overlay.section))
             }
 
-            notification.message = qsTr("This name is already in use, please use a different name.")
+            notification.message = message
 
             overlayInvalid.show()
         }
@@ -1095,8 +1094,14 @@ Rectangle {
                 // Revoke active focus from text field by forcing active focus on another item
                 tableView.forceActiveFocus()
 
-                if (!result && overlayTextField.previousText !== overlayTextField.text)
-                    overlayInvalid.showHeaderData(overlay.section, overlay.orientation)
+                if (overlayTextField.text === "")
+                    overlayInvalid.showHeaderData(overlay.section,
+                                                  overlay.orientation,
+                                                  qsTr("No name found, please enter a valid name."))
+                else if (!result && overlayTextField.previousText !== overlayTextField.text)
+                    overlayInvalid.showHeaderData(overlay.section,
+                                                  overlay.orientation,
+                                                  qsTr("This name is already in use, please use a different name."))
             }
 
             Text {

share/qtcreator/qmldesigner/effectComposerQmlSources/BlurHelper.qml

@@ -4,6 +4,7 @@
 // This file should match the BlurHelper.qml in qtquickdesigner repository, except for shader paths
 
 import QtQuick
+import EffectComposerPropertyData
 
 Item {
     id: rootItem
@@ -20,8 +21,8 @@ Item {
         visible: false
         layer.enabled: true
         layer.smooth: true
-        vertexShader: g_propertyData.blur_vs_path
-        fragmentShader: g_propertyData.blur_fs_path
+        vertexShader: GlobalPropertyData?.blur_vs_path ?? ""
+        fragmentShader: GlobalPropertyData?.blur_fs_path ?? ""
     }
 
     QtObject {

share/qtcreator/qmldesigner/effectComposerQmlSources/EffectComposerPreview.qml

@@ -7,6 +7,7 @@ import HelperWidgets as HelperWidgets
 import StudioControls as StudioControls
 import StudioTheme as StudioTheme
 import EffectComposerBackend
+import EffectComposerPropertyData
 
 Column {
     id: root
@@ -298,8 +299,8 @@ Column {
             BlurHelper {
                 id: blurHelper
                 source: source
-                property int blurMax: g_propertyData.blur_helper_max_level ? g_propertyData.blur_helper_max_level : 64
-                property real blurMultiplier: g_propertyData.blurMultiplier ? g_propertyData.blurMultiplier : 0
+                property int blurMax: GlobalPropertyData?.blur_helper_max_level ?? 64
+                property real blurMultiplier: GlobalPropertyData?.blurMultiplier ?? 0
             }
 
             Item {

share/qtcreator/qmldesigner/effectComposerQmlSources/EffectCompositionNode.qml

@@ -80,9 +80,10 @@ HelperWidgets.Section {
         function showNodeExistsWarning(enable)
         {
             infoText.text = qsTr("An effect with this name already exists.\nSuffix was added to make the name unique.")
-            infoTimer.restart()
-            infoText.visible = enable
             infoText.color = StudioTheme.Values.themeWarning
+            infoText.visible = enable
+            if (infoText.visible)
+                infoTimer.restart()
         }
 
         function showNodeAddedToLibraryInfo(message)
@@ -95,15 +96,17 @@ HelperWidgets.Section {
                 infoText.text = message
                 infoText.color = StudioTheme.Values.themeInteraction
             }
-            infoTimer.restart()
             infoText.visible = message !== ""
+            if (infoText.visible)
+                infoTimer.restart()
         }
 
         function showNeedRenameInfo()
         {
+            infoTimer.stop()
             infoText.text = qsTr("A built-in effect with this name already exists in the library.\nPlease rename the effect before adding it to the library.")
-            infoText.visible = true
             infoText.color = StudioTheme.Values.themeWarning
+            infoText.visible = true
         }
 
         onVisibleChanged: {
@@ -120,7 +123,7 @@ HelperWidgets.Section {
 
             onTriggered: {
                 infoText.visible = false
-                infoTimer.running = false
+                infoTimer.stop()
             }
         }
     }