make images local and enhance them with alt text

plone · Dec 10, 2024 · 690b490 · 690b490
1 parent a810be0
commit 690b490
Show file tree

Hide file tree

Showing 18 changed files with 136 additions and 33 deletions.
diff --git a/docs/content-editing/_static/add-an-image-01.jpeg b/docs/content-editing/_static/add-an-image-01.jpeg
diff --git a/docs/content-editing/_static/add-an-image-02.jpeg b/docs/content-editing/_static/add-an-image-02.jpeg
diff --git a/docs/content-editing/_static/add-an-image-03.jpeg b/docs/content-editing/_static/add-an-image-03.jpeg
diff --git a/docs/content-editing/_static/add-an-image-04.jpeg b/docs/content-editing/_static/add-an-image-04.jpeg
diff --git a/docs/content-editing/_static/add-an-image-05.jpeg b/docs/content-editing/_static/add-an-image-05.jpeg
diff --git a/docs/content-editing/_static/add-an-image-06.jpeg b/docs/content-editing/_static/add-an-image-06.jpeg
diff --git a/docs/content-editing/_static/add-an-image-07.jpeg b/docs/content-editing/_static/add-an-image-07.jpeg
diff --git a/docs/content-editing/_static/add-an-image-08.jpeg b/docs/content-editing/_static/add-an-image-08.jpeg
diff --git a/docs/content-editing/_static/add-an-image-09.jpeg b/docs/content-editing/_static/add-an-image-09.jpeg
diff --git a/docs/content-editing/_static/add-an-image-10.jpeg b/docs/content-editing/_static/add-an-image-10.jpeg
diff --git a/docs/content-editing/_static/add-an-image-11.jpeg b/docs/content-editing/_static/add-an-image-11.jpeg
diff --git a/docs/content-editing/_static/add-an-image-12.jpeg b/docs/content-editing/_static/add-an-image-12.jpeg
diff --git a/docs/content-editing/_static/add-an-image-13.jpeg b/docs/content-editing/_static/add-an-image-13.jpeg
diff --git a/docs/content-editing/_static/add-an-image-14.jpeg b/docs/content-editing/_static/add-an-image-14.jpeg
diff --git a/docs/content-editing/_static/add-an-image-15.jpeg b/docs/content-editing/_static/add-an-image-15.jpeg
diff --git a/docs/content-editing/_static/add-an-image-16.jpeg b/docs/content-editing/_static/add-an-image-16.jpeg
diff --git a/docs/content-editing/_static/add-an-image-17.jpeg b/docs/content-editing/_static/add-an-image-17.jpeg
diff --git a/docs/content-editing/add-an-image.md b/docs/content-editing/add-an-image.md
@@ -19,95 +19,198 @@ This makes them easier to use than if you had added an image as a file.
 
 1. Click the {guilabel}`add item` button.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/f6dd27dd-3989-494a-8c5e-a60160cce3d3/ascreenshot.jpeg?tl_px=0,0&br_px=1719,961&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=20,150)
-
+   ````{card}
+   ```{image} _static/add-an-image-01.jpeg
+   :alt: The add item button
+   :target: _static/add-an-image-01.jpeg
+   ```
+   +++
+   _The add item button_
+   ````
 
 2. Click {guilabel}`Image`
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/76429b49-6581-4837-8296-43ecf0af8471/ascreenshot.jpeg?tl_px=0,0&br_px=1719,961&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=132,210)
-
+   ````{card}
+   ```{image} _static/add-an-image-02.jpeg
+   :alt: Add an Image
+   :target: _static/add-an-image-02.jpeg
+   ```
+   +++
+   _Add an Image_
+   ````
 
 3. Click {guilabel}`Choose a file` to select a file from your computer.
 
     Alternatively, you can drag and drop an image onto the {guilabel}`Drop file here` target area.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/8fd982d8-2d9e-4df9-9380-2ea224e51d8d/ascreenshot.jpeg?tl_px=502,614&br_px=2222,1576&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=524,312)
-
+   ````{card}
+   ```{image} _static/add-an-image-03.jpeg
+   :alt: Choose a file to upload
+   :target: _static/add-an-image-03.jpeg
+   ```
+   +++
+   _Choose a file to upload_
+   ````
 
 4. Click the {guilabel}`Title` field and enter a suitable title and a description of the image.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/800275cd-31c7-44b0-a090-fcf573ae4a08/ascreenshot.jpeg?tl_px=464,189&br_px=2184,1150&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=524,276)
-
+   ````{card}
+   ```{image} _static/add-an-image-04.jpeg
+   :alt: The title field
+   :target: _static/add-an-image-04.jpeg
+   ```
+   +++
+   _The title field_
+   ````
 
 5. Type "wxyz bar {kbd}`Tab` The bar in the Aloft hotel, in Schaumburg, Illinois"
 
 
 6. Click {guilabel}`Categorization` to set optional tags (keywords) on the image.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/7f016d55-5179-4a75-ba35-9ad94ac99dbc/ascreenshot.jpeg?tl_px=0,0&br_px=1719,961&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=518,249)
-
+   ````{card}
+   ```{image} _static/add-an-image-05.jpeg
+   :alt: The Categorization settings
+   :target: _static/add-an-image-05.jpeg
+   ```
+   +++
+   _The Categorization settings_
+   ````
 
 7. Click the {guilabel}`Tags` drop down list to set or remove tags.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/a2eb54da-e02e-4eb9-a05d-2f5eb2504e39/ascreenshot.jpeg?tl_px=560,167&br_px=2280,1128&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=524,277)
-
+   ````{card}
+   ```{image} _static/add-an-image-06.jpeg
+   :alt: The tags drop down list
+   :target: _static/add-an-image-06.jpeg
+   ```
+   +++
+   _The tags drop down list_
+   ````
 
 8. Click {guilabel}`Dates` to set optional publishing and expiration dates on the image.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/800de720-4681-42c2-bcbe-9889f81dc440/ascreenshot.jpeg?tl_px=198,0&br_px=1917,961&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=524,238)
-
+   ````{card}
+   ```{image} _static/add-an-image-07.jpeg
+   :alt: The Dates settings
+   :target: _static/add-an-image-07.jpeg
+   ```
+   +++
+   _The Dates settings_
+   ````
 
 9. Click {guilabel}`Ownership` to set optional creators and contributors on this image.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/56f082d9-241a-4d97-96ce-b779a38de44b/ascreenshot.jpeg?tl_px=378,0&br_px=2098,961&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=524,240)
-
+   ````{card}
+   ```{image} _static/add-an-image-08.jpeg
+   :alt: The Ownership settings
+   :target: _static/add-an-image-08.jpeg
+   ```
+   +++
+   _The Ownership settings_
+   ````
 
 10. Click {guilabel}`Settings` to set a short name and to exclude this image from the navigation.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/a8bea5f7-cb22-42af-9469-236942e6e87d/ascreenshot.jpeg?tl_px=516,0&br_px=2236,961&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=524,255)
-
+   ````{card}
+   ```{image} _static/add-an-image-09.jpeg
+   :alt: Other settings
+   :target: _static/add-an-image-09.jpeg
+   ```
+   +++
+   _Other settings_
+   ````
 
 11. Click the {guilabel}`Save` button.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/e68f8ed2-eeb1-46e3-95f7-6bd915c0adcd/ascreenshot.jpeg?tl_px=0,0&br_px=1719,961&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=20,22)
-
+   ````{card}
+   ```{image} _static/add-an-image-10.jpeg
+   :alt: The Save button
+   :target: _static/add-an-image-10.jpeg
+   ```
+   +++
+   _The Save button_
+   ````
 
 12. You can see the image title you set.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/4a7dfca4-ead3-4d0d-8a95-449cf848e089/ascreenshot.jpeg?tl_px=132,129&br_px=1851,1090&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=524,277)
-
+   ````{card}
+   ```{image} _static/add-an-image-11.jpeg
+   :alt: The image title
+   :target: _static/add-an-image-11.jpeg
+   ```
+   +++
+   _The image title_
+   ````
 
 13. Below the title is the image, sized to fit the page.
 
     The original image, in the full resolution you provided, is stored and available for download.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/1f695b06-d1fe-4cbb-a919-0f2273d98246/ascreenshot.jpeg?tl_px=0,171&br_px=1719,1132&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=290,277)
-
+   ````{card}
+   ```{image} _static/add-an-image-12.jpeg
+   :alt: The saved image
+   :target: _static/add-an-image-12.jpeg
+   ```
+   +++
+   _The saved image_
+   ````
 
 14. Below the image you see its title repeated, as well as the description you provided, and the tags you assigned.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/9690d7fb-149f-469a-a9a7-edfbae113e8f/ascreenshot.jpeg?tl_px=366,614&br_px=2086,1576&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=524,296)
-
+   ````{card}
+   ```{image} _static/add-an-image-13.jpeg
+   :alt: The image title and description
+   :target: _static/add-an-image-13.jpeg
+   ```
+   +++
+   _The image title and description_
+   ````
 
 15. Notice that the header navigation area does not include the new image.
 
     This is because, by default, the header navigation links do not automatically include images, only pages.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/2855e346-3602-43fc-ba4e-1efa9ad818ee/ascreenshot.jpeg?tl_px=1004,0&br_px=2724,961&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=524,89)
-
+   ````{card}
+   ```{image} _static/add-an-image-14.jpeg
+   :alt: The navigation links do not include the image
+   :target: _static/add-an-image-14.jpeg
+   ```
+   +++
+   _The navigation links do not include the image_
+   ````
 
 16. Click the {guilabel}`More` button.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/a4566ded-0324-4ba2-96da-6b992e2e3eb6/ascreenshot.jpeg?tl_px=0,0&br_px=1719,961&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=23,78)
-
+   ````{card}
+   ```{image} _static/add-an-image-15.jpeg
+   :alt: The More button
+   :target: _static/add-an-image-15.jpeg
+   ```
+   +++
+   _The More button_
+   ````
 
 17. By default, image content items do not have a workflow assigned to them.
 
     Images instead inherit their workflow state from the item that contains them. For example, if the page containing an image is published, so will be the image.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/2a71d85a-32ac-4694-af49-caf62cd693fb/ascreenshot.jpeg?tl_px=0,0&br_px=1719,961&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=388,73)
-
+   ````{card}
+   ```{image} _static/add-an-image-16.jpeg
+   :alt: The image has no workflow state
+   :target: _static/add-an-image-16.jpeg
+   ```
+   +++
+   _The image has no workflow state_
+   ````
 
 18. Click the {guilabel}`More` button again to hide the menu.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/4df49a05-f1a6-4f9a-8e05-74f41a44c877/ascreenshot.jpeg?tl_px=0,0&br_px=1719,961&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=23,82)
+   ````{card}
+   ```{image} _static/add-an-image-17.jpeg
+   :alt: The More button toggles the menu
+   :target: _static/add-an-image-17.jpeg
+   ```
+   +++
+   _The More button toggles the menu_
+   ````