[TASK] Restore the backend section

Many screenshots are outdated and the content also needs to be updated.

We have to do that step by step however.

These contents where deleted with
#145

Resolves: #416
Releases: main, 13.4, 12.4

Author: linawolf

Documentation/Concepts/Backend/FileModule/Index.rst

@@ -0,0 +1,70 @@
+.. include:: /Includes.rst.txt
+.. index::
+   Modules; Filelist
+   Filelist
+.. _file-module:
+
+===================
+The Filelist module
+===================
+
+The **FILE > Filelist** module is where you can manage
+all the media associated with your TYPO3 web site.
+
+.. index::
+   Files; Management
+   Directories; fileadmin
+.. _managing-files:
+
+Managing files in the TYPO3 CMS
+===============================
+
+Files including documents and images are managed in the
+Filelist module. Similar to the **WEB > List** module,
+it displays a navigation tree, which corresponds to the file
+structure on the server, and a list of all files for the
+selected directory.
+
+.. include:: /Images/AutomaticScreenshots/FilelistModule/FilelistModule.rst.txt
+
+For admin users, the folder displayed by default is called
+"fileadmin/ (auto-generated)" and corresponds to the
+:file:`fileadmin/` folder located under the document root
+folder on your web server.
+
+Using these files inside content elements to display them
+or link to them in your web site is covered in the
+:ref:`Editors Tutorial <t3editors:images>`.
+
+.. note::
+
+   There are extensions which make it possible to connect to remote
+   storage pools (like a WebDAV server or an Amazon S3 account) and work
+   with the files as if they were on the TYPO3 CMS server.
+
+
+.. index:: pair: Files; Clipboard
+
+.. _file-module-clipboard:
+
+Clipboard
+---------
+
+There's a clipboard just like in the *List* module.
+
+.. include:: /Images/AutomaticScreenshots/FilelistModule/FileClipboard.rst.txt
+
+Using the action icons, files can be renamed or replaced
+(just hover over the icons and you will get a help text).
+
+
+.. index:: Files; Upload
+.. _uploading-files:
+
+Uploading new files
+-------------------
+
+You can upload files to a given folder by using the context menu
+or to the current directory by using the action icon in the docheader.
+
+.. include:: /Images/AutomaticScreenshots/FilelistModule/FileUpload.rst.txt

Documentation/Concepts/Backend/GeneralBackendStructure/ContextMenu/Index.rst

@@ -0,0 +1,25 @@
+.. include:: /Includes.rst.txt
+.. index:: Context menu
+.. _context-menu:
+
+=================
+The context menus
+=================
+
+While learning about the :ref:`page tree <page-tree>`,
+we were introduced to contextual menus
+when selecting icons in the Page module.
+
+Contextual menus exist throughout the CMS's
+backend. You will notice that different sets of
+icons appear depending on what page you are on
+what actions you are performing.
+
+For example, there's a contextual menu in the **WEB > List** view:
+
+.. include:: /Images/AutomaticScreenshots/ListModule/ContextMenu.rst.txt
+
+or in the **FILE > Filelist** view:
+
+.. include:: /Images/AutomaticScreenshots/FilelistModule/ContextMenu.rst.txt
+

Documentation/Concepts/Backend/GeneralBackendStructure/Index.rst

@@ -0,0 +1,47 @@
+.. include:: /Includes.rst.txt
+.. index::
+   Backend
+   Modules
+.. _docheader:
+.. _general-backend-structure:
+
+=========================
+General backend structure
+=========================
+
+Here is a complete overview of the backend interface and its structure.
+
+Situated in the center left of page is the
+*page tree* and to its right the (main) *content area*.
+
+Top bar (top)
+   This gives you access to your user settings, logout, search
+   etc.
+
+Module menu (left)
+   This is the main menu of the TYPO3 CMS backend. It is divided
+   into main modules (:guilabel:`WEB`, :guilabel:`FILE`, etc.) and
+   their sub-modules.
+
+Page tree (middle)
+   This can be used to browse through and select pages.
+
+Content area (right)
+   This is where you can edit pages and content elements.
+
+Docheader (top)
+   The *docheader* contains contextual icons including close, save and preview.
+   It also features other information and a drop-down menu with further actions
+   which will appear depending on what actions you are performing.
+
+.. include:: /Images/AutomaticScreenshots/BackendOverview/BackendAreasOverview.rst.txt
+
+We will have a closer look at the individual parts in the next pages.
+
+..  toctree::
+    :maxdepth: 1
+    :titlesonly:
+
+    TopBar/Index
+    PageTree/Index
+    ContextMenu/Index

Documentation/Concepts/Backend/GeneralBackendStructure/PageTree/Index.rst

@@ -0,0 +1,222 @@
+.. include:: /Includes.rst.txt
+.. index:: Backend; Page tree
+.. _page-tree:
+
+=========
+Page tree
+=========
+
+.. sectionauthor:: name <email>
+
+The page tree represents the hierarchical structure of your site and its pages. In
+most cases this corresponds exactly to the navigation structure
+of your web site. The page tree can be expanded by clicking
+the arrow to the left of each page.
+
+.. rst-class:: bignums
+
+
+1. :ref:`Enter the backend <backend-login>` and select the page module
+
+   Click on **WEB** > **Page** now.
+
+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".
+
+   Your page tree should look like this:
+
+   .. include:: /Images/AutomaticScreenshots/PageTree/PageTree.rst.txt
+
+
+3. View page in the frontend:
+
+   To view the page in the frontend, click on the :guilabel:`View webpage`
+   icon in the Docheader.
+
+   .. include:: /Images/AutomaticScreenshots/PageModule/ViewWebpage.rst.txt
+
+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 web site corresponds to the first
+level menu pages in the page tree. The sub-menu of the :guilabel:`"Content Examples"`
+page in the frontend corresponds to the entries beneath "Content Examples" in the page tree.
+
+.. index:: Root page
+
+Working with the page tree
+==========================
+
+Remember the components of the backend from the :ref:`previous page <general-backend-structure>`?
+
+.. include:: /Images/AutomaticScreenshots/BackendOverview/BackendAreasOverview.rst.txt
+
+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 web site.
+   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.
+
+.. 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 pages in the page tree.
+
+Content area:
+   Clicking on a pages 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 the whole page title.
+
+   .. include:: /Images/AutomaticScreenshots/PageTree/ContextMenu.rst.txt
+
+
+.. index:: Page tree; Context menu
+.. _the-context-menu:
+
+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)
+
+- **Edit**: Lets you edit the page properties
+
+- **New**: Create a new page
+
+
+.. important::
+
+   This creates a new page under the current page on the same level in the page
+   tree:
+
+   .. code-block:: none
+
+      parent
+       |
+       ---> current page
+       |
+       ---> new page
+
+   If you wish to create a new page, as subpage of current page, use "More options"
+   > 'Create New' wizard" or use :ref:`new-page-drag-and-drop`.
+
+   .. code-block:: none
+
+      parent
+       |
+       --> current page
+            |
+            ---> new page
+
+
+- **Info**: Displays information about the page
+
+- **Copy**: Copies the page
+
+- **Cut**: Cuts the page
+
+- **More options**:
+
+  - **More options ... > 'Create New' wizard**: Same as "New", but you can select where
+    the new page is to be created.
+
+  - ...
+
+  - **More options ... > Export**: Opens the export tool and preselects the selected page
+
+  - **More options ... > Import**: Opens the import tool and preselects the selected
+    page
+
+- **Disable**: Disables the page (so it isn't accessible from the frontend
+  anymore)
+
+- **Delete**: Deletes the page
+
+- **History/Undo**: Shows the change history of the page (who did which
+  changes when)
+
+
+.. index:: Pages; Create
+.. _new-page-drag-and-drop:
+
+Create new pages with drag and drop
+===================================
+
+You can also create new pages using drag and drop.
+
+.. rst-class:: bignums
+
+1. Clicking on the "Create new pages" icon (top left of the page tree)
+
+2. Drag and drop a "Standard" page to its desired location in the page tree.
+
+
+   .. figure:: /Images/ManualScreenshots/PageTree/Dragndop1.png
+      :class: with-shadow
+
+   .. figure:: /Images/ManualScreenshots/PageTree/Dragndop2.png
+      :class: with-shadow
+
+3. A new page has now been created at the desired location.
+
+   By default it will be called "[Default Title]" which can be changed
+   right away by entering a new title.
+
+   .. figure:: /Images/ManualScreenshots/PageTree/Dragndop3.png
+      :class: with-shadow
+
+
+.. index:: Modules; View
+.. _the-view-module:
+
+The view module
+===============
+
+It is also possible to view a page without having to leave the backend. By selecting the View module,
+backend users are able to preview individual pages and test them against various screen sizes,
+by accessing the drop-down menu at the top.
+
+.. figure:: /Images/ManualScreenshots/Modules/ViewModule.png
+   :alt: Viewing a page directly in the backend
+   :class: with-shadow
+
+
+.. index:: Page tree; Collapse
+.. _collapse-page-tree:
+
+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
+
+
+.. index:: Pages; Edit
+.. _editing-pages:
+
+Editing pages
+=============
+
+Modifying an existing page or adding a new one is covered in the
+:ref:`Editors Tutorial <t3editors:pages>`.
+
+Next we will look at how content is placed on pages.