[TASK] Unify Screenshot inclusion (#241)

Allow zoom in lightbox or gallery where helpful, remove borders

Releases: main, 13.4

(cherry picked from commit e0db3c7)

Author: linawolf

Documentation/AccessControl/Login/Index.rst

@@ -126,7 +126,7 @@ can log in to view the restricted content.
 
    .. figure:: ../../Images/ManualScreenshots/Access/AccessPageWithAuthenticatedUser.png
       :alt: The page with the authenticated user
-      :class: with-border
+      :zoom: lightbox
 
 This is just a quick overview of the login form provided by TYPO3 CMS. It has a
 rich set of features that are described in the :doc:`Frontend Login <ext_felogin:Index>` manual.

Documentation/Concepts/Cache.rst

@@ -84,6 +84,7 @@ and click the button representing a lightning bolt with the tooltip
 
 ..  figure:: /Images/ManualScreenshots/Cache/ClearPageCache.png
     :alt: Clear cache for this page
+    :zoom: lightbox
 
     Clear cache for this page
 
@@ -97,6 +98,7 @@ button in the toolbar you might not have the rights to carry out this action:
 
 ..  figure:: /Images/ManualScreenshots/Cache/ClearAllPageCaches.png
     :alt: Flush cache of all pages
+    :zoom: lightbox
 
     Flush cache of **all** pages
 

Documentation/ContentElements/ContactForm/Index.rst

@@ -12,6 +12,7 @@ Creating a contact form
     :alt: Content element Contact Form in the TYPO3 backend
     :class: img-thumbnail float-end ms-1 ms-1
     :width: 250
+    :zoom: gallery
 
 You can create a form from the :guilabel:`Web > Forms` module. This is a
 system extension which needs to be activated by your administrator. It is
@@ -122,7 +123,7 @@ Click the :guilabel:`Settings` button at the top of the form to add
 
 .. figure:: ../../Images/ManualScreenshots/Forms/FormsFinishers.png
    :alt: Add finishers to a form
-   :class: with-border
+   :zoom: gallery
 
 You can integrate extensions with existing forms. For example, if you're
 running a sales operation, you can integrate with Mautic and any changes to a

Documentation/ContentElements/Content/Index.rst

@@ -14,6 +14,7 @@ Managing content
     :alt: Manage content elements in the TYPO3 backend
     :class: img-thumbnail float-end ms-1 ms-1
     :width: 250
+    :zoom: gallery
 
 In TYPO3, working with content happens mostly in the :guilabel:`Web > Page`
 module. Chose the page you want to edit from the page tree.
@@ -27,6 +28,7 @@ The following screenshot demonstrates how to open the Page module:
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/PageModule.png
     :alt: Screenshot demonstrating the page module and the page tree in the TYPO3 backend
+    :zoom: gallery
 
     Click on "Page" in the module menu, then choose the page to be managed in the page tree
 
@@ -39,6 +41,7 @@ Overview of the Page module in TYPO3
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/PageModuleAnnotated.png
     :alt: A typical view of the Page module with various content columns
+    :zoom: gallery
 
 Common page icons explained:
 
@@ -71,6 +74,7 @@ on it. Hidden content elements are not visible in the frontend
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/HideContent.png
     :alt: A content element in the page module is hidden
+    :zoom: gallery
 
     Use the "hide" button to hide a content element. The second content element is hidden and can be unhidden by the same button.
 
@@ -88,6 +92,7 @@ page within the page tree.
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/MoveContentElement.png
     :alt: Screenshot of moving a content element via drag and drop in the TYPO3 backend
+    :zoom: gallery
 
     Drop the content element on a page in the page tree to move it to another page
 
@@ -98,11 +103,13 @@ Copy and paste content elements
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/CopyContent.png
     :alt: The context menu of a content menu in the TYO3 backend
+    :zoom: gallery
 
     Use the context menu of the upper left button of the content element to start copying a content element
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/PasteContent.png
     :alt: Location of the paste button beside the "Create new content" button
+    :zoom: gallery
 
     Paste the content into the desired location.
 
@@ -123,6 +130,7 @@ shortcut :kbd:`Ctrl + K` or :kbd:`Cmd + K` to open the live search.
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/LiveSearch.png
     :alt: Using the live search to search for content elements
+    :zoom: gallery
 
     Use the arrow button to get more information on the search result
 
@@ -142,6 +150,7 @@ Sometimes the following warning is displayed on your page:
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/UnusedContent.png
     :alt: Warning: Unused elements detected on this page: These elements don't belong to any of the available columns of this page. You should either delete them or move them to existing columns. We highlighted the problematic records for you.
+    :zoom: gallery
 
     Warning that some content elements belong to no valid content area
 
@@ -157,6 +166,7 @@ via drag an drop to the desired location or delete it, if it is not needed anymo
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/MoveUnusedContent.png
     :alt: Demonstration of moving unused content back into a normal content area
+    :zoom: gallery
 
 ..  _content-working-troubleshooting-recycler:
 
@@ -169,6 +179,7 @@ sufficient permissions and it is installed.
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/RestoreContent.png
     :alt: Screenshot of the Recycler module in the TYPO3 backend, demonstrating how to restore a deleted content element
+    :zoom: gallery
 
 See also :ref:`Recycler manual, For editors <typo3/cms-recycler:for-editors>`.
 
@@ -184,6 +195,7 @@ Use the context menu on the page tree and choose "History/Undo".
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/RestoreContent.png
     :alt: Screenshot of the page history in the TYPO3 backend
+    :zoom: gallery
 
     Use the "Undo" button to undo your changes
 
@@ -192,6 +204,7 @@ where changed and who made which changes when.
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/ContentElementHistoryDifferences.png
     :alt: Screenshot of the page history in the TYPO3 backend
+    :zoom: gallery
 
     Compare the differences. Use the undo button to undo changes.
 
@@ -207,5 +220,6 @@ another editor is currently working on. These are marked with a warning:
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/ContentElementEdited.png
     :alt: Warning: The BE-User 'e.doe' began to edit this record 3 min ago.
+    :zoom: gallery
 
     Avoid working on content elements that are currently edited by someone else

Documentation/ContentElements/CreatingContent/Index.rst

@@ -15,6 +15,7 @@ Creating content
     :alt: Creating content elements in the TYPO3 backend
     :class: img-thumbnail float-end ms-1 ms-1
     :width: 250
+    :zoom: gallery
 
 In the :guilabel:`Web > Page` module, on any page, click the :guilabel:`+
 Create new content` button in the place where you want to insert content:
@@ -24,7 +25,8 @@ The :guilabel:`New Page Content` wizard will then be displayed.
 In the following screenshot you see the location of that button:
 
 ..  figure:: /Images/ManualScreenshots/NewContentElement/CreateNew.png
-    :alt: "Create new content button" in the Page module, column "Normal"
+    :alt: "Create new content button" in the Content Layout module, column "Normal"
+    :zoom: gallery
 
     Create a new Content Element by clicking the button
 
@@ -48,13 +50,15 @@ A standard editor can see the following content elements:
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/WizardTypical.png
     :alt: Screenshot of the "New Page Content" wizard as seen by a common TYPO3 editor, featuring "Typical Page Content", "Lists" and "Special elements"
+    :zoom: gallery
 
     Screenshot of the "New Page Content" wizard as seen by a common TYPO3 editor
 
 An advanced editor or an administrator can see the following content elements:
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/WizardAdvanced.png
     :alt: Screenshot of the "New Page Content" wizard as seen by an advanced TYPO3 editor, additionally including "Form elements", "Menus" and additional "Special elements"
+    :zoom: gallery
 
     An advanced editor sees more groups and more content elements types in some of the groups
 
@@ -72,6 +76,7 @@ Insert regular text and image content types to build standard web pages.
 
 ..  figure:: /Images/ManualScreenshots/NewContentElement/WizardTabTypical.png
     :alt: 'Typical page content' tab contains content like Header, Regular Text Element, Text & Media, Images etc
+    :zoom: gallery
 
     The :guilabel:`Typical page content` tab of the new content element window
 
@@ -85,6 +90,7 @@ standard content elements but are easier to use for their specialized use case.
 
 ..  figure:: /Images/ManualScreenshots/NewContentElement/WizardTabList.png
     :alt: The 'List' tab contains content elements like "Bullet List", "Table" and "File Links"
+    :zoom: gallery
 
     The :guilabel:`List` tab of the new content element window
 
@@ -108,6 +114,7 @@ Create a login form or a simple contact form.
 
 ..  figure:: /Images/ManualScreenshots/NewContentElement/WizardTabForm.png
     :alt: Tab "Form elements" with "Form" and "Login Form"
+    :zoom: gallery
 
     The :guilabel:`Form elements` tab of the new content element window
 
@@ -120,6 +127,7 @@ Present a menu or list of page links in different ways.
 
 ..  figure:: /Images/ManualScreenshots/NewContentElement/WizardTabMenu.png
     :alt: The 'Menu' tab of the new content element window
+    :zoom: gallery
 
     The :guilabel:`Menu` tab of the new content element window
 
@@ -145,6 +153,7 @@ element from another page without duplicating it.
 
 ..  figure:: /Images/ManualScreenshots/NewContentElement/WizardTabSpecialElements.png
     :alt: The 'Special elements' tab of the new content element window
+    :zoom: gallery
 
     The :guilabel:`Plugins` tab of the new content element window
 
@@ -160,10 +169,11 @@ Add new content to a page
     This is the most commonly used content type. The
     :guilabel:`Create new Page Content` form appears.
 
-..  figure:: /Images/ManualScreenshots/NewContentElement/NewContentElement.png
-    :alt: Create new Page Content on page "Page 1" form screenshot
+    ..  figure:: /Images/ManualScreenshots/NewContentElement/NewContentElement.png
+        :alt: Create new Page Content on page "Page 1" form screenshot
+        :zoom: gallery
 
-    Unsaved changes are highlighted in light blue
+        Unsaved changes are highlighted in light blue
 
 #.  In the :guilabel:`Header` field, type *My new content element*.
 #.  In the :guilabel:`Text` area, type in some text. This field uses a
@@ -173,9 +183,9 @@ Add new content to a page
     You can see the newly added element on the page:
 
 ..  figure:: /Images/ManualScreenshots/NewContentElement/ContentSaved.png
-    :alt: The new content element appears in the Page module
+    :alt: The new content element appears in the Content Layout module
+    :zoom: gallery
 
-    The new content element appears in the Page module
+    The new content element appears in the Content Layout module
 
 ..  include:: /ContentElements/TipKeyboardCommands.rst.txt
-

Documentation/ContentElements/EditingContent/Index.rst

@@ -13,6 +13,7 @@ Editing content
     :alt: Editing content elements in the TYPO3 backend
     :class: img-thumbnail float-end ms-1
     :width: 250
+    :zoom: gallery
 
 On a page, click the pencil icon for the content element you want to edit,
 then edit the text and make other changes as required.
@@ -31,6 +32,7 @@ you.
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/ChangeText.png
     :alt: Content element edit form screenshot, demonstrating changed content which is highlighted
+    :zoom: gallery
 
     Changed content is highlighted. The save button is found on the top
 
@@ -39,6 +41,7 @@ a form that has changes you will be prompted to save:
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/SavingPrompt.png
     :alt: Prompt: Do you want to close without saving? You currently have unsaved changes. Are you sure you want to discard these changes?
+    :zoom: gallery
 
     You are prompted when you try to leave a form with unsaved changes
 
@@ -61,6 +64,7 @@ element in the overview but no edit, hide or delete button appears.
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/NoEdit.png
     :alt: A content element without an edit button
+    :zoom: gallery
 
     A content element that cannot be edited due to lacking permissions
 
@@ -83,11 +87,13 @@ not fill out a required field, you cannot save your changes.
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/RequiredField.png
     :alt: Screenshot of a required field
+    :zoom: gallery
 
     A required field that has no value prevents saving of a content element
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/InputError.png
     :alt: Input error caused by a letter entered in a number field
+    :zoom: gallery
 
     Input error caused by a letter entered in a number field
 
@@ -105,6 +111,7 @@ browser where you saw the error. Send these to your integrator or programmer.
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/ErrorMessage.png
     :alt: Screenshot of an error message in the TYPO3 backend
+    :zoom: gallery
 
     Such an error can happen during or after updates or when a programmer is
     working on your installation.
@@ -135,6 +142,7 @@ the :guilabel:`Type` list.
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/ChangeType.png
     :alt: Edit form of a content element in the TYPO3 backend, demonstrating the location of the "Type" selector in tab General
+    :zoom: gallery
 
     You can find the "Type" selector in tab General
 
@@ -143,6 +151,7 @@ the screen to display different input fields, you are prompted first:
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/RefreshRequired.png
     :alt: Edit form of a content element in the TYPO3 backend, demonstrating the location of the "Type" selector in tab General
+    :zoom: gallery
 
     You can find the "Type" selector in tab General
 

Documentation/ContentElements/Images/Index.rst

@@ -15,6 +15,7 @@ Working with images
     :alt: Content element Images in the TYPO3 backend
     :class: img-thumbnail float-end ms-1
     :width: 250
+    :zoom: gallery
 
 For content elements that support images (for example Text & Images, Text &
 Media, Images Only), you will see an :guilabel:`Images` or :guilabel:`Media`
@@ -34,13 +35,15 @@ On the :guilabel:`Images` tab, click the :guilabel:`Add image` button. The
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/TextWithImage/ImagesTab.png
     :alt: Screenshot of a "Text with Image" TYPO3 content element, tab "Images"
+    :zoom: gallery
 
     Click the "Add image" button in tab images to chose or upload an image
 
 Browse the file tree, then select a folder.
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/TextWithImage/FileSelector.png
     :alt: The file selector window in the TYPO3 backend
+    :zoom: gallery
 
     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.
@@ -64,6 +67,7 @@ insert a link to the image.
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/TextWithImage/ImageMetaData.png
     :alt: Screenshot of the meta data of an image in a "Text and Image" content element
+    :zoom: gallery
 
     Override the default meta data of the image with custom values for this location.
 
@@ -75,7 +79,6 @@ 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
 :guilabel:`Filelist`.
 
-
 .. _images-appearance:
 
 Media adjustments
@@ -86,6 +89,7 @@ border.
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/TextWithImage/MediaAdjustments.png
     :alt: Screenshot of the Media Adjustments section of a "Text and Images" content element in TYPO3
+    :zoom: gallery
 
     A value of '0' means the size is calculated dynamically.
 
@@ -127,6 +131,7 @@ You can manage your previously uploaded images in the backend module
 
 ..  figure:: /Images/ManualScreenshots/ContentElements/TextWithImage/FileList.png
     :alt: Screenshot of the "Filelist" backend module in TYPO3
+    :zoom: gallery
 
     You can view the files as Tiles or List by switching the settings.
 
@@ -138,6 +143,7 @@ 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
+    :zoom: gallery
 
     Grab a picture with the mouse, drag it to a folder and drop it there
 
@@ -146,6 +152,7 @@ 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
+    :zoom: gallery
 
     TYPO3 FAL will prevent you from deleting files that are still in use