[Backport 13.4] [TASK] Update Content element Image (#198)

* [TASK] Update Content element Image

releases: main, 13.4

* [TASK] Update Content element Image

releases: main, 13.4

* Apply suggestions from code review

Co-authored-by: Stefan Frömken <froemken@gmail.com>

* Update Documentation/ContentElements/Images/Index.rst

Co-authored-by: Stefan Frömken <froemken@gmail.com>

* Update Documentation/ContentElements/Images/Index.rst

---------

Co-authored-by: lina.wolf <lwolf@w-commerce.de>
Co-authored-by: Lina Wolf <48202465+linawolf@users.noreply.github.com>
Co-authored-by: Stefan Frömken <froemken@gmail.com>

Documentation/ContentElements/Images/Index.rst

@@ -7,40 +7,39 @@
 Working with images
 ===================
 
+..  image:: /Images/ManualScreenshots/ContentElements/Images.png
+    :alt: Content element Images in the TYPO3 backend
+    :class: img-thumbnail float-end ms-1
+    :width: 250
+
 For content elements that support images (for example Text & Images, Text &
-Media, Images Only), you will see an :guilabel:`Images` tab when you create or edit
-the content element.
+Media, Images Only), you will see an :guilabel:`Images` or :guilabel:`Media`
+tab when you create or edit the content element.
 
-.. include:: /Images/AutomaticScreenshots/EditContent/EditContentImagesTab.rst.txt
+Start by `Creating a content element <https://docs.typo3.org/permalink/t3editors:content-creating>`_
+of type "Text & Images", "Text & Media", or "Images Only". You can find them in the
+tab `Typical page content <https://docs.typo3.org/permalink/t3editors:content-typical>`_.
 
-It's best practice to add new images using the :guilabel:`File > Filelist`
-module, which is covered in the :ref:`chapter about the file module <file-module>`. This method means files are stored centrally
-and any information or metadata you add to the image is used wherever that
-image is used on the site.
+..  _add-image-to-page:
 
-When you use the :guilabel:`Select & upload files` button, the image file is
-attached to the page and gets uploaded to the :guilabel:`user_uploads` folder in the :guilabel:`Filelist`.
+Add an image to the content element
+===================================
 
-.. tip::
-   By only using :guilabel:`Select & upload files`, your files pile up in the :guilabel:`user_uploads` folder pretty quickly.
-   Therefore you should rather upload and organize the files via the :guilabel:`Add Image` button or upload it with the :guilabel:`File > Filelist`
-   module directly, as described above.
+On the :guilabel:`Images` tab, click the :guilabel:`Add image` button. The
+:guilabel:`File selector` window displays to let you browse for an image.
 
-.. _add-image-to-page:
+..  figure:: /Images/ManualScreenshots/ContentElements/TextWithImage/ImagesTab.png
+    :alt: Screenshot of a "Text with Image" TYPO3 content element, tab "Images"
 
-Add an image to a page
-======================
+    Click the "Add image" button in tab images to chose or upload an image
 
-#. On the :guilabel:`Images` tab, click the :guilabel:`Add image` button. The
-   :guilabel:`File selector` window displays to let you browse for an image.
+Browse the file tree, then select a folder.
 
-   .. include:: /Images/AutomaticScreenshots/Fileadmin/ImageSelector.rst.txt
+..  figure:: /Images/ManualScreenshots/ContentElements/TextWithImage/FileSelector.png
+    :alt: The file selector window in the TYPO3 backend
 
-#. Browse the file tree, then select a folder.
-#. Tick the :guilabel:`Display thumbnails` box to show a preview of each image
-   in the folder.
-#. Click the name of an image to select it. Alternatively, click the
-   :guilabel:`+` icon to select multiple images before closing the window.
+    Click the name of an image to select it or use the "Upload files" dialoge.
+    Alternatively, mark several images and import all of them at once.
 
 .. _Configure-the-image:
 
@@ -49,25 +48,28 @@ Configure the image
 
 The :guilabel:`Images` tab lets you perform a number of actions to configure an image.
 
-.. include:: /Images/AutomaticScreenshots/EditContent/EditContentImageProperties.rst.txt
-
 .. _override_image_metadata:
 
 Image metadata
 --------------
 
 Use the small arrow next to the thumbnail to collapse and expand this section.
 
-Here you can set general metadata including description and alt text, and
+Here you can set general metadata including description, alt text, and
 insert a link to the image.
 
-If the file was added using the :guilabel:`File > Filelist`
-module (which is best practice), the information displayed here is drawn from
-the Filelist. If required, you can override this metadata to set specific
+..  figure:: /Images/ManualScreenshots/ContentElements/TextWithImage/ImageMetaData.png
+    :alt: Screenshot of the meta data of an image in a "Text and Image" content element
+
+    Override the default meta data of the image with custom values for this location.
+
+The information displayed here is drawn from the file metadata set in the
+:guilabel:`Filelist`. If required, you can override this metadata to set specific
 values for the image for the current content element.
 
 You can experiment with the image manipulation editor to crop or resize the
-image. Making changes here won't impact the original image file in Filelist.
+image. Making changes here won't impact the original image file in
+:guilabel:`Filelist`.
 
 
 .. _images-appearance:
@@ -78,18 +80,72 @@ Media adjustments
 Manually specify the width and height of the image in pixels, and apply a
 border.
 
+..  figure:: /Images/ManualScreenshots/ContentElements/TextWithImage/MediaAdjustments.png
+    :alt: Screenshot of the Media Adjustments section of a "Text and Images" content element in TYPO3
+
+    A value of '0' means the size is calculated dynamically.
+
+..  note::
+    This section is only visible when your site package is based on the
+    Site Package Tutorial or on Fluid Styled Content. Site Packages based on
+    the Bootstrap Package have means to dynamically set the size of the images.
+    The images will resize responsively to fill their container.
+
+.. _images-gallery:
+
 Gallery settings
 ----------------
 
 Choose where to position the image in relation to the text.
 
-Images are automatically arranged in columns, two by two. You can change this
+In "Text with Images" content elements you can position the image or images in
+respect to the text here.
+
+Multiple images are automatically arranged in columns, two by two. You can change this
 behaviour with the :guilabel:`Number of Columns` field.
 
+.. _images-behavior:
 
 Behavior
 --------
 
 Use the :guilabel:`Enlarge on Click` setting to enable a lightbox display for the image.
 
 .. include:: /ContentElements/TipKeyboardCommands.rst.txt
+
+..  _images-filelist:
+
+Manage your images in the Filelist
+==================================
+
+You can manage your previously uploaded images in the backend module
+:guilabel:`File > Filelist`:
+
+..  figure:: /Images/ManualScreenshots/ContentElements/TextWithImage/FileList.png
+    :alt: Screenshot of the "Filelist" backend module in TYPO3
+
+    You can view the files as Tiles or List by switching the settings.
+
+TYPO3 uses a file abstraction layer (FAL) you can therefore move images into
+different folders without impending the frontend output of the web page, even if
+they are used in multiple places.
+
+You can move images into folders by drag and drop:
+
+..  figure:: /Images/ManualScreenshots/ContentElements/TextWithImage/FileListDragAndDrop.png
+    :alt: Screenshot of the "Filelist" backend module demonstration Drag and Drop
+
+    Grab a picture with the mouse, drag it to a folder and drop it there
+
+The file abstraction layer will not allow you to delete images that are still in
+use in some content element:
+
+..  figure:: /Images/ManualScreenshots/ContentElements/TextWithImage/FileNotDeleted.png
+    :alt: File not deleted, The file "xxx.png" cannot be deleted since it is still used at the following places
+
+    TYPO3 FAL will prevent you from deleting files that are still in use
+
+First alter or delete all content elements that still use the file, then you can
+delete the file itself.
+
+See also chapter `Managing files in the Fileadmin <https://docs.typo3.org/permalink/t3editors:managing-files-in-typo>`_.