TYPO3-Documentation · linawolf · Apr 2, 2026 · Apr 2, 2026
diff --git a/Documentation/Concepts/Backend/GeneralBackendStructure/ContextMenu/Index.rst b/Documentation/Concepts/Backend/GeneralBackendStructure/ContextMenu/Index.rst
@@ -17,8 +17,14 @@ what actions you are performing.
 
 For example, there is a contextual menu in the :guilabel:`Content > Records` view:
 
-.. include:: /Images/AutomaticScreenshots/RecordsModule/ContextMenu.rst.txt
+..  figure:: /Images/ManualScreenshots/PageTree/ContextMenu.png
+    :class: with-shadow
+
+    The contextual menu in the Media module
 
 or in the :guilabel:`Media` view:
 
-.. include:: /Images/AutomaticScreenshots/FilelistModule/ContextMenu.rst.txt
+..  figure:: /Images/ManualScreenshots/PageTree/ContextMenu.png
+    :class: with-shadow
+
+    The contextual menu in the Media module
diff --git a/Documentation/Concepts/Backend/GeneralBackendStructure/PageTree/Index.rst b/Documentation/Concepts/Backend/GeneralBackendStructure/PageTree/Index.rst
@@ -11,38 +11,44 @@ most cases this corresponds exactly to the navigation structure
 of your website. The page tree can be expanded by clicking
 the arrow to the left of each page.
 
-.. rst-class:: bignums
+..  rst-class:: bignums
 
 
-1. :ref:`Enter the backend <backend-login>` and select the :guilabel:`Content > Layout` module
+1.  :ref:`Enter the backend <backend-login>` and select the :guilabel:`Content > Layout` module
 
-   Click on :guilabel:`Content > Layout` now.
+    Click on :guilabel:`Content > Layout` now.
 
-2. Look at the page tree in the backend:
+2.  Look at the page tree in the backend:
 
-   For example, click on the arrow next to the page called "Congratulations",
-   and then "Content Examples".
+    For example, click on the arrow next to the page called "Congratulations",
+    and then "Content Examples".
 
-   Your page tree should look like this:
+    Your page tree should look like this:
 
-   .. include:: /Images/AutomaticScreenshots/PageTree/PageTree.rst.txt
+    ..  figure:: /Images/ManualScreenshots/PageTree/PageTree.png
+        :class: with-shadow
 
+        The page tree with the "Content Examples" page expanded
 
-3. View page in the frontend:
 
-   To view the page in the frontend, click on the :guilabel:`View webpage`
-   icon in the Docheader.
+3.  View page in the frontend:
 
-   .. include:: /Images/AutomaticScreenshots/PageModule/ViewWebpage.rst.txt
+    To view the page in the frontend, click on the :guilabel:`View webpage`
+    icon in the Docheader.
 
-4. Now take a look at the navigation in the frontend.
+    ..  figure:: /Images/ManualScreenshots/Modules/Layout/ViewWebpage.png
+        :class: with-shadow
 
-   Click on :guilabel:`CONTENT EXAMPLES` in the main menu on top and then
-   select :guilabel:`Media` from the sub-menu:
+        View current page in the frontend
 
-   .. figure:: /Images/ManualScreenshots/Frontend/FrontendPage.png
-      :alt: Frontend of the Introduction Package
-      :class: with-shadow
+4.  Now take a look at the navigation in the frontend.
+
+    Click on :guilabel:`CONTENT EXAMPLES` in the main menu on top and then
+    select :guilabel:`Media` from the sub-menu:
+
+    ..  figure:: /Images/ManualScreenshots/Frontend/FrontendPage.png
+        :alt: Frontend of the Introduction Package
+        :class: with-shadow
 
 The main menu on top of your website corresponds to the first
 level menu pages in the page tree. The sub-menu of the :guilabel:`"Content Examples"`
@@ -57,26 +63,33 @@ We will now look at some components of the page tree a little more closely:
 
 
 Root page
-   The page with the globe icon represents the root of your website.
-   Multiple websites can exist within a single installation of TYPO3.
-   The top node with the TYPO3 logo is a special container which is used
-   to store shared resources such as file mounts and backend user records.
+    The page with the globe icon represents the root of your website.
+    Multiple websites can exist within a single installation of TYPO3.
+    The top node with the TYPO3 logo is a special container which is used
+    to store shared resources such as file mounts and backend user records.
+
+..  figure:: /Images/ManualScreenshots/PageTree/RootPage.png
+    :class: with-shadow
+
+    Root page of the Introduction Package
 
-.. include:: /Images/AutomaticScreenshots/PageTree/RootPage.rst.txt
 
 Modules:
-   Some modules make use of the page tree, but not all. The presence of the page tree
-   implies that the module depends upon the selection of a specific page in the page tree.
+    Some modules make use of the page tree, but not all. The presence of the page tree
+    implies that the module depends upon the selection of a specific page in the page tree.
 
 Content area:
-   Clicking on a page's title opens that page in the content area to
-   the right. Hovering over the icon of a page will display its internal id.
+    Clicking on a page's title opens that page in the content area to
+    the right. Hovering over the icon of a page will display its internal id.
 
 Context menu:
-   1. A click on the page icon will open the context menu. 2. **Or**, you
-   can right click on the whole page title.
+    1. A click on the page icon will open the context menu. 2. **Or**, you
+    can right click on the whole page title.
 
-   .. include:: /Images/AutomaticScreenshots/PageTree/ContextMenu.rst.txt
+    ..  figure:: /Images/ManualScreenshots/PageTree/ContextMenu.png
+        :class: with-shadow
+
+        The contextual menu in the Media module
 
 
 .. index:: Page tree; Context menu
@@ -88,36 +101,36 @@ The context menu
 The context menu of a page is used to access the most common
 page related functions. Here is what these options do:
 
-- **Show**: Opens the page you clicked in the browser (frontend)
+-   **Show**: Opens the page you clicked in the browser (frontend)
 
-- **Edit**: Lets you edit the page properties
+-   **Edit**: Lets you edit the page properties
 
-- **New**: Create a new page
+-   **New**: Create a new page
 
 
-.. important::
+..  important::
 
-   This creates a new page under the current page on the same level in the page
-   tree:
+    This creates a new page under the current page on the same level in the page
+    tree:
 
-   .. code-block:: none
+    .. code-block:: none
 
-      parent
-       |
-       ---> current page
-       |
-       ---> new page
+       parent
+        |
+        ---> current page
+        |
+        ---> new page
 
-   If you wish to create a new page as a subpage of the current page, use "More options"
-   > 'Create New' wizard" or use :ref:`new-page-drag-and-drop`.
+    If you wish to create a new page as a subpage of the current page, use "More options"
+    > 'Create New' wizard" or use :ref:`new-page-drag-and-drop`.
 
-   .. code-block:: none
+    .. code-block:: none
 
-      parent
-       |
-       --> current page
-            |
-            ---> new page
+       parent
+        |
+        --> current page
+             |
+             ---> new page
 
 
 - **Info**: Displays information about the page
@@ -201,7 +214,10 @@ Collapsing the page tree
 The page tree can be collapsed to gain screen space, by clicking on the second icon
 on the left in the top bar.
 
-.. include:: /Images/AutomaticScreenshots/PageTree/CollapsePageTree.rst.txt
+..  figure:: /Images/ManualScreenshots/PageTree/CollapsePageTree.png
+    :class: with-shadow
+
+    Collapse or expand the page tree
 
 
 .. index:: Pages; Edit

diff --git a/Documentation/Concepts/Backend/GeneralBackendStructure/TopBar/Index.rst b/Documentation/Concepts/Backend/GeneralBackendStructure/TopBar/Index.rst
@@ -11,7 +11,11 @@ The top bar features a set of menus that allow you to quickly carry out common a
 The top bar also contains specific information about your instance of TYPO3
 including the name of your site and also the version of TYPO3 it is currently running.
 
-.. include:: /Images/AutomaticScreenshots/BackendOverview/BackendTopBar.rst.txt
+..  figure:: /Images/ManualScreenshots/Backend/BackendTopBar.png
+    :alt:
+
+    The top bar
+
 
 #. To the left is the icon for **minimizing the Module Menu**.
 #. Next comes the **TYPO3 CMS logo**

diff --git a/Documentation/Concepts/Backend/StatusModule/Index.rst b/Documentation/Concepts/Backend/StatusModule/Index.rst
@@ -20,4 +20,7 @@ you quickly identify which pages are translated and which are
 not. You can also so set how many levels down the page tree you
 wish to analyze.
 
-.. include:: /Images/AutomaticScreenshots/Modules/LocalizationOverview.rst.txt
+..  figure:: /Images/ManualScreenshots/Modules/LocalizationOverview.png
+    :class: with-shadow
+
+    Viewing translation status, two levels deep
diff --git a/Documentation/Images/AutomaticScreenshots/BackendOverview/BackendTopBar.rst.txt b/Documentation/Images/AutomaticScreenshots/BackendOverview/BackendTopBar.rst.txt
diff --git a/Documentation/Images/AutomaticScreenshots/ExtensionManager/UninstallExtension.png b/Documentation/Images/AutomaticScreenshots/ExtensionManager/UninstallExtension.png
diff --git a/...ntation/Images/AutomaticScreenshots/ExtensionManager/UninstallExtension.rst.txt b/...ntation/Images/AutomaticScreenshots/ExtensionManager/UninstallExtension.rst.txt
diff --git a/Documentation/Images/AutomaticScreenshots/FilelistModule/ContextMenu.rst.txt b/Documentation/Images/AutomaticScreenshots/FilelistModule/ContextMenu.rst.txt
diff --git a/Documentation/Images/AutomaticScreenshots/Frontend/IntroductionPackageHome.png b/Documentation/Images/AutomaticScreenshots/Frontend/IntroductionPackageHome.png
diff --git a/Documentation/Images/AutomaticScreenshots/Frontend/IntroductionPackageHome.rst.txt b/Documentation/Images/AutomaticScreenshots/Frontend/IntroductionPackageHome.rst.txt
diff --git a/Documentation/Images/AutomaticScreenshots/Modules/ConfigurationModule.png b/Documentation/Images/AutomaticScreenshots/Modules/ConfigurationModule.png
diff --git a/Documentation/Images/AutomaticScreenshots/Modules/ConfigurationModule.rst.txt b/Documentation/Images/AutomaticScreenshots/Modules/ConfigurationModule.rst.txt
diff --git a/Documentation/Images/AutomaticScreenshots/Modules/LocalizationOverview.rst.txt b/Documentation/Images/AutomaticScreenshots/Modules/LocalizationOverview.rst.txt
diff --git a/Documentation/Images/AutomaticScreenshots/PageModule/ViewWebpage.rst.txt b/Documentation/Images/AutomaticScreenshots/PageModule/ViewWebpage.rst.txt
diff --git a/Documentation/Images/AutomaticScreenshots/PageTree/CollapsePageTree.rst.txt b/Documentation/Images/AutomaticScreenshots/PageTree/CollapsePageTree.rst.txt
diff --git a/Documentation/Images/AutomaticScreenshots/PageTree/ContextMenu.rst.txt b/Documentation/Images/AutomaticScreenshots/PageTree/ContextMenu.rst.txt
diff --git a/Documentation/Images/AutomaticScreenshots/PageTree/PageTree.rst.txt b/Documentation/Images/AutomaticScreenshots/PageTree/PageTree.rst.txt
diff --git a/Documentation/Images/AutomaticScreenshots/PageTree/RootPage.rst.txt b/Documentation/Images/AutomaticScreenshots/PageTree/RootPage.rst.txt
diff --git a/Documentation/Images/AutomaticScreenshots/RecordsModule/ContextMenu.png b/Documentation/Images/AutomaticScreenshots/RecordsModule/ContextMenu.png
diff --git a/Documentation/Images/AutomaticScreenshots/RecordsModule/ContextMenu.rst.txt b/Documentation/Images/AutomaticScreenshots/RecordsModule/ContextMenu.rst.txt
diff --git a/...enshots/BackendOverview/BackendTopBar.png → ...nualScreenshots/Backend/BackendTopBar.png b/...enshots/BackendOverview/BackendTopBar.png → ...nualScreenshots/Backend/BackendTopBar.png
diff --git a/...creenshots/FilelistModule/ContextMenu.png → ...ts/Modules/FilelistModule/ContextMenu.png b/...creenshots/FilelistModule/ContextMenu.png → ...ts/Modules/FilelistModule/ContextMenu.png
diff --git a/...ticScreenshots/PageModule/ViewWebpage.png → ...creenshots/Modules/Layout/ViewWebpage.png b/...ticScreenshots/PageModule/ViewWebpage.png → ...creenshots/Modules/Layout/ViewWebpage.png
diff --git a/...eenshots/Modules/LocalizationOverview.png → ...eenshots/Modules/LocalizationOverview.png b/...eenshots/Modules/LocalizationOverview.png → ...eenshots/Modules/LocalizationOverview.png
diff --git a/...Screenshots/PageTree/CollapsePageTree.png → ...Screenshots/PageTree/CollapsePageTree.png b/...Screenshots/PageTree/CollapsePageTree.png → ...Screenshots/PageTree/CollapsePageTree.png
diff --git a/...maticScreenshots/PageTree/ContextMenu.png → ...anualScreenshots/PageTree/ContextMenu.png b/...maticScreenshots/PageTree/ContextMenu.png → ...anualScreenshots/PageTree/ContextMenu.png
diff --git a/...utomaticScreenshots/PageTree/PageTree.png → ...s/ManualScreenshots/PageTree/PageTree.png b/...utomaticScreenshots/PageTree/PageTree.png → ...s/ManualScreenshots/PageTree/PageTree.png
diff --git a/...utomaticScreenshots/PageTree/RootPage.png → ...s/ManualScreenshots/PageTree/RootPage.png b/...utomaticScreenshots/PageTree/RootPage.png → ...s/ManualScreenshots/PageTree/RootPage.png
diff --git a/Documentation/ProjectTemplates/IntroductionPackage/Index.rst b/Documentation/ProjectTemplates/IntroductionPackage/Index.rst
@@ -89,5 +89,3 @@ The "Introduction Package" creates a number of pre-built pages within the page t
 
     Click on the :guilabel:`"View webpage"` icon (with an eye) to view the page
     in the frontend.
-
-..  include:: /Images/AutomaticScreenshots/Frontend/IntroductionPackageHome.rst.txt
Original file line number	Diff line number	Diff line change
Expand Up		@@ -89,5 +89,3 @@ The "Introduction Package" creates a number of pre-built pages within the page t

		Click on the :guilabel:`"View webpage"` icon (with an eye) to view the page
		in the frontend.

		.. include:: /Images/AutomaticScreenshots/Frontend/IntroductionPackageHome.rst.txt