Update UI screenshots in Pipeline documentation #7526 (#7653)

* Getting started page images and alt text updated - new item, item creation,  pipeline config page, build now, console output, pipeline  syntax, snippet  generator. Also associated text are updated.

* Running Pipelines page images and alt text updated - left column, restart from stage. Blue ocean image's alt text updated.

* Multibranch page images and alt text updated - item creation, branch source, branch source configuration, branch indexing. new item image alt text updated and associated text updated.

* Docker page image and alt text updated - configure docker label. Associated text updated.

* Shared libraries page images and alt text updated - add libraries, config global pipeline library, modern scm, legacy scm. Associated text updated and in screenshots branch name changed to main.

* Development Tools page images and alt text updated - pipeline builds, replay sidebar, replay script modified. Associated text updated.

* Pipeline as Code page images and alt text updated - orphan items, folder icon, organization folder creation, repository resource config, repositories progress builds, organization repositories, PR demo repository branches, stage concurrency, pipeline workflow, fingerprint. Associated text updated and also 'Credentials' line updated.

* Added plugin macro (suggestions from code review)

plugin:docker-workflow[*Docker Pipeline*]
plugin:custom-folder-icon[*Custom Folder Icon*]

Co-authored-by: Kevin Martens <99040580+kmartens27@users.noreply.github.com>

* Adjustment in punctuation (suggestions from code review)

Co-authored-by: Kevin Martens <99040580+kmartens27@users.noreply.github.com>

---------

Co-authored-by: Kevin Martens <99040580+kmartens27@users.noreply.github.com>

content/doc/book/pipeline/development.adoc

@@ -144,17 +144,17 @@ To use the "Replay" feature:
 
 . Select a previously completed run in the build history.
 +
-image::pipeline/replay-previous-run.png[Previous Pipeline Run]
+image::pipeline/replay-previous-run.png[alt = "Build history section of a Jenkins Pipeline showing all the previously executed builds. The history includes: Build #2 and Build #3, which ran successfully; Build #4 and Build #5, which failed; and Build #6, which ran successfully. Click on the latest successful build, which is Build #6 in this case."]
 +
-. Click "Replay" in the left menu
+. Click "Replay" in the left menu.
 +
-image::pipeline/replay-left-bar.png[Replay Left-menu Button]
+image::pipeline/replay-left-bar.png[alt = "Jenkins Classic UI sidebar for 'example-pipeline' build #6 showing options: Status, Changes, Console Output, Edit Build Information, Delete Build #6, Timings, Pipeline Overview, Pipeline Console, Restart from Stage, Replay, Pipeline Steps, Workspaces, and Previous Build."]
 +
 . Make modifications and click "Run". In this example, we changed "ruby-2.3" to "ruby-2.4".
 +
-image::pipeline/replay-modified.png[Replay Left-menu Button]
+image::pipeline/replay-modified.png[alt = "The replay section of the Jenkins 'example-pipeline' for build #6 displays the pipeline script, where the Ruby version has been changed from 2.3 to 2.4. A 'Pipeline Syntax' option and a blue 'Run' button is shown below the script."]
 +
-. Check the results of changes
+. Check the results of changes.
 
 Once you are satisfied with the changes,
 you can use Replay to view them again, copy them back to your Pipeline job

content/doc/book/pipeline/docker.adoc

@@ -245,9 +245,9 @@ video::Pi2kJ2RJS50[youtube, width=852, height=480]
 
 By default, Pipeline assumes that _any_ configured link:../../glossary/#agent[agent] is capable of running Docker-based Pipelines.
 For Jenkins environments that have macOS, Windows, or other agents that are unable to run the Docker daemon, this default setting may be problematic.
-Pipeline provides a global option on the *Manage Jenkins* page and on the link:../../glossary/#folder[Folder] level, for specifying which agents (by link:../../glossary/#label[Label]) to use for running Docker-based Pipelines.
+Pipeline provides a global option on the *Manage Jenkins* page and on the link:../../glossary/#folder[Folder] level, for specifying which agents (by link:../../glossary/#label[Label]) to use for running Docker-based Pipelines. To enable this option for Docker labels, the plugin:docker-workflow[*Docker Pipeline*] plugin must be installed.
 
-image::pipeline/configure-docker-label.png[Configuring the Pipeline Docker Label]
+image::pipeline/configure-docker-label.png[alt = "Navigate from Dashboard to Manage Jenkins then to System. In the 'Declarative Pipeline (Docker)' section set the Docker label, Docker Registry URL and Registry Credentials."]
 
 === Path setup for mac OS users
 

content/doc/book/pipeline/getting-started.adoc

@@ -108,7 +108,8 @@ To create a basic Pipeline through the Jenkins classic UI:
   click *New Item* at the top left.
 +
 [.boxshadow]
-image:pipeline/classic-ui-left-column.png[alt="Classic UI left column",width=30%]
+image:pipeline/classic-ui-left-column.png[alt = "Jenkins Classic UI left column showing options: New Item, Build History, Project Relationship, Check File Fingerprint, Manage Jenkins and My Views.",width=35%]
+
 . In the *Enter an item name* field, specify the name for your new Pipeline
   project. +
   *Caution:* Jenkins uses this item name to create directories on disk. It is
@@ -118,8 +119,9 @@ image:pipeline/classic-ui-left-column.png[alt="Classic UI left column",width=30%
   open the Pipeline configuration page (whose *General* tab is selected).
 +
 [.boxshadow]
-image:pipeline/new-item-creation.png[alt="Enter a name, click *Pipeline* and then click *OK*",width=100%]
-. Click the *Pipeline* tab at the top of the page to scroll down to the
+image:pipeline/new-item-creation.png[alt = "Jenkins New Item page with item name as 'example-pipeline' and 'Pipeline' option selected from the options for item type given as follows: Freestyle project, Pipeline, Multi-configuration project, Folder, Multibranch Pipeline and Organization Folder.",width=100%]
+
+. Click the *Pipeline* tab in the side panel of the page to scroll down to the
   *Pipeline* section. +
   *Note:* If instead you are defining your `Jenkinsfile` in source control,
   follow the instructions in link:#defining-a-pipeline-in-scm[In SCM] below.
@@ -157,7 +159,7 @@ agent/node in the Jenkins environment) and workspace for the entire Pipeline.
 <3> `node` effectively does the same as `agent` (above).
 +
 [.boxshadow]
-image:pipeline/example-pipeline-in-classic-ui.png[alt="Example Pipeline in the classic UI",width=100%]
+image:pipeline/example-pipeline-in-classic-ui.png[alt = "Configure page of 'example-pipeline' with the Pipeline tab selected in the Jenkins Classic UI. The 'Hello World' script is written in the script section, and the 'Use Groovy Sandbox' option is checked.",width=100%]
 +
 *Note:* You can also select from canned _Scripted_ Pipeline examples from the
 *try sample Pipeline* option at the top right of the *Script* text area. Be
@@ -167,14 +169,16 @@ field.
 . On this page, click *Build Now* on the left to run the Pipeline.
 +
 [.boxshadow]
-image:pipeline/classic-ui-left-column-on-item.png[alt="Classic UI left column on an item",width=35%]
+image:pipeline/classic-ui-left-column-on-item-build-now.png[alt = "Jenkins Classic UI sidebar for 'example-pipeline', showing options: Status, Changes, Build Now, Configure, Delete Pipeline, Full Stage View, Stages, Rename and Pipeline Syntax.",width=35%]
+
 . Under *Build History* on the left, click *#1* to access the details for this
   particular Pipeline run.
 . Click *Console Output* to see the full output from the Pipeline run. The
   following output shows a successful run of your Pipeline.
 +
 [.boxshadow]
-image:pipeline/hello-world-console-output.png[alt="*Console Output* for the Pipeline",width=70%]
+image:pipeline/hello-world-console-output.png[alt = "Jenkins Classic UI for 'example-pipeline', showing the Console Output tab for build #1, executed by the admin user, with a successful finish status.",width=90%]
+
 +
 *Notes:*
 
@@ -186,7 +190,7 @@ image:pipeline/hello-world-console-output.png[alt="*Console Output* for the Pipe
   above, unlike ``Jenkinsfile``s you define through Blue Ocean
   (link:#through-blue-ocean[above]) or in source control
   (link:#defining-a-pipeline-in-scm[below]), ``Jenkinsfile``s entered into
-  the *Script* text area area of Pipeline projects are stored by Jenkins itself,
+  the *Script* text area of Pipeline projects are stored by Jenkins itself,
   within the Jenkins home directory. Therefore, for greater control and
   flexibility over your Pipeline, particularly for projects in source control
   that are likely to gain complexity, it is recommended that you use
@@ -260,7 +264,7 @@ The same documentation is also linked as *Pipeline Syntax* in the side-bar for a
 configured Pipeline project.
 
 [.boxshadow]
-image:pipeline/classic-ui-left-column-on-item.png[alt="Classic UI left column on an item",width=35%]
+image:pipeline/classic-ui-left-column-on-item-pipeline-syntax.png[alt = "Jenkins Classic UI sidebar for 'example-pipeline', showing options: Status, Changes, Build Now, Configure, Delete Pipeline, Full Stage View, Stages, Rename and Pipeline Syntax.",width=35%]
 
 
 [[snippet-generator]]
@@ -290,7 +294,7 @@ https://issues.jenkins.io/browse/JENKINS-40550
 ////
 
 [.boxshadow]
-image:pipeline/snippet-generator.png[alt="Snippet Generator",width=100%]
+image:pipeline/snippet-generator.png[alt = "Jenkins Classic UI for 'example-pipeline', showing the Pipeline Syntax page with the Snippet Generator tab selected. The snippet generated for the stage named 'Deploy' is displayed in the script block.",width=100%]
 
 To access additional information and/or documentation about the step selected,
 click on the help icon (indicated by the red arrow in the image above).

content/doc/book/pipeline/multibranch.adoc

@@ -35,7 +35,7 @@ To create a Multibranch Pipeline:
 
 * Click *New Item* on Jenkins home page.
 
-image::pipeline/classic-ui-left-column.png[alt="Classic UI left column",width=30%]
+image::pipeline/classic-ui-left-column.png[alt = "Jenkins Classic UI left column showing options: New Item, Build History, Project Relationship, Check File Fingerprint, Manage Jenkins and My Views.",width=35%]
 
 * Enter a name for your Pipeline, select *Multibranch Pipeline* and click *OK*.
 
@@ -46,13 +46,15 @@ names which include spaces may uncover bugs in scripts which do not expect
 paths to contain spaces.
 ====
 
-image::pipeline/new-item-multibranch-creation.png["Enter a name, select *Multibranch Pipeline*, and click *OK*", role=center]
+image::pipeline/new-item-multibranch-creation.png[alt = "Jenkins New Item page with item name as 'multibranch-example' and 'Multibranch Pipeline' option selected from the options for item type given as follows: Freestyle project, Pipeline, Multi-configuration project, Folder, Multi-branch Pipeline and Organization Folder.", role=center]
 
-* Add a *Branch Source* (for example, Git) and enter the location of the
-  repository.
+* Add a *Branch Source* (for example, Git).
 
-image::pipeline/multibranch-branch-source.png["Add a Branch Source", role=center]
-image::pipeline/multibranch-branch-source-configuration.png["Add the URL to the project repository", role=center]
+image::pipeline/multibranch-branch-source.png[alt = "Configure page of 'multibranch-example' pipeline. In the 'Branch Sources' section 'Git' is selected from the 'Add Source' dropdown menu.", role=center, width=45%]
+
+* Enter the location of the Git Repository.
+
+image::pipeline/multibranch-branch-source-configuration.png[alt = "Configure page of 'multibranch-example' pipeline. Branch Source configuration section for 'Git' branch source option is opened with options to add project repository link, Credentials, Behaviors and Property Strategy.", role=center]
 
 
 * *Save* the Multibranch Pipeline project.
@@ -66,7 +68,7 @@ additions or deletions (unless using an <<organization-folders,Organization Fold
 so it is often useful to configure a Multibranch Pipeline to periodically
 re-index in the configuration:
 
-image::pipeline/multibranch-branch-indexing.png["Setting up branch re-indexing", role=center]
+image::pipeline/multibranch-branch-indexing.png[alt = "Configure page of 'multibranch-example' pipeline. In the 'Scan Multibranch Pipeline Triggers' section the 'Periodically if not otherwise run' option is checked and the Interval is set to '30 minutes'.", role=center]
 
 
 === Additional Environment Variables

content/doc/book/pipeline/pipeline-as-code.adoc

@@ -165,7 +165,7 @@ Particularly, if your organization utilizes _GitHub Organizations_ or _Bitbucket
 with a `Jenkinsfile`, Jenkins will automatically detect it and create a _Multibranch Pipeline_ project for it.
 This alleviates the need for administrators or developers to manually create projects for these new repositories.
 
-To create an _Organization Folder_ in Jenkins, go to: *New Item -> GitHub Organization* or *New Item -> Bitbucket Team* and follow the configuration steps for each item,
+To create an _Organization Folder_ in Jenkins, go to: *New Item -> Organization Folder* or *New Item -> Bitbucket Team* and follow the configuration steps for each item,
 making sure to specify appropriate _Scan Credentials_ and a specific *owner* for the GitHub Organization or Bitbucket Team name, respectively.
 
 Other options available are:
@@ -185,16 +185,16 @@ If your organization requires these items remain available for a longer period o
 It may be useful to keep items in order to examine build results of a branch after it's been removed, for example.
 
 [role="image-border"]
-image::orphaned-item-strategy.png[scaledwidth="75%"]
+image::orphaned-item-strategy.png[alt = "Orphaned Item Strategy section in Jenkins configuration page for organization folder, showing the 'discard old items' option as checked, with fields for 'Days to keep old items' and 'Max # of old items to keep', both with empty input boxes. Checkbox to 'Abort builds' is unchecked.", scaledwidth="75%", width=80%]
 
 === Icon and View Strategy
 
-You may also configure an icon to use for the folder display.
+You can also configure a custom icon for folder display by installing the plugin:custom-folder-icon[*Custom Folder Icon*] plugin.
 For example, it might be useful to display an aggregate health of the child builds.
 Alternately, you might reference the same icon you use in your GitHub organization account.
 
 [role="image-border"]
-image::folder-icon.png[scaledwidth="75%"]
+image::folder-icon.png[alt = "Appearance section in Jenkins configuration page for organization folder, showing icon field with 'Custom Folder Icon' option selected. This section includes an option to choose an image file for the icon, along with an Apply button to save your changes.", scaledwidth="75%", width=80%]
 
 
 == Example
@@ -203,36 +203,36 @@ To demonstrate using an Organization Folder to manage repositories, we'll use
 the fictitious organization: CloudBeers, Inc..
 
 Go to *New Item*.
-Enter 'cloudbeers' for the item name.
-Select *GitHub Organization* and click *OK*.
+Enter 'CloudBeersInc' for the item name.
+Select *Organization Folder* and click *OK*.
 
 [role="image-border"]
-image::screenshot1.png[scaledwidth="75%"]
+image::organization-folder-creation.png[alt = "Jenkins New Item page with item name as 'CloudBeersInc' and 'Organization Folder' option selected from the options for item type given as follows: Freestyle project, Pipeline, Multi-configuration project, Folder, Multi-branch Pipeline and Organization Folder.", scaledwidth="75%"]
 
 Optionally, enter a better descriptive name for the _Description_, such as 'CloudBeers GitHub'.
 In the _Repository Sources_ section, complete the section for "GitHub Organization".
-Make sure the *owner* matches the GitHub Organization name exactly, in our case it must be: _cloudbeers_.
+Make sure the *owner* matches the GitHub Organization name exactly, in our case it must be: _CloudBeersInc_.
 This defaults to the same value that was entered for the item name in the first step.
-Next, select or add new "Scan credentials" - we'll enter our GitHub username and access token as the password.
+Next, select or add new *Credentials* - we'll enter our GitHub username and access token as the password.
 
 [role="image-border"]
-image::screenshot2.png[scaledwidth="75%"]
+image::github-configuration-for-organization-folder.png[alt = "Projects section in the Jenkins configuration page for a GitHub Organization repository source includes fields to specify the API endpoint, credentials, and repository owner, which is set to 'CloudBeersInc'. Additionally, there are options to enable avatar display and define behaviors such as discovering branches, pull requests from origin, and pull requests from forks. Each behavior has a strategy dropdown for specific configurations, along with options for setting trust levels for pull requests from forks.", scaledwidth="75%", width=80%]
 
 After saving, the "Folder Computation" will run to scan for eligible repositories, followed by multibranch builds.
 
 [role="image-border"]
-image::screenshot3.png[scaledwidth="75%"]
+image::organization-repositories-scan.png[alt = "Jenkins Build Queue and Build Executor Status view. The Build Queue section shows 'No builds in the queue'. The Build Executor Status section displays ongoing builds under the 'Built-In Node' with progress indicators. Three jobs are actively running: 'PR-demo repository (main branch) from the CloudBeersInc organization', 'community-docs repository (main branch) from the CloudBeersInc organization', and 'multibranch-demo repository (main branch) from the CloudBeersInc organization'. Each has a blue progress bar. Below, the 'docker-ssh-jenkins-agent' is listed as idle with a status of '1 Idle' at the bottom.", scaledwidth="75%"]
 
 Refresh the page after the job runs to ensure the view of repositories has been updated.
 
 [role="image-border"]
-image::screenshot4.png[scaledwidth="75%"]
+image::organization-folder-repositories.png[alt = "Jenkins dashboard view for the 'CloudBeersInc' organization. The status section shows the repository count as 'Repositories (3)' with a table listing three repositories: 'community-docs', 'multibranch-demo', and 'PR-demo'. Each repository entry includes columns labeled 'S' for status of last build, 'W' for weather status of recent aggregated builds, 'Name', and 'Description'. The 'multibranch-demo' repository contains a description stating, 'Simple demonstration of how to use multibranch pipelines'. Icon size options (S, M, L) are available below the table.", scaledwidth="75%"]
 
 A this point, you're finished with basic project configuration and can now explore your imported repositories.
 You can also investigate the results of the jobs run as part of the initial _Folder Computation_.
 
 [role="image-border"]
-image::screenshot5.png[scaledwidth="75%"]
+image::PR-demo-branches.png[alt = "Jenkins dashboard view for a job named 'PR-demo' under the 'CloudBeersInc' organization folder. The page lists four branches with the names: main, stephenc-patch-1, stephenc-patch-2, and stephenc-patch-3. The main and stephenc-patch-1 branches show successful builds with a green check mark and last success time of 2 min 39 sec and 2 min 34 sec respectively. The stephenc-patch-2 branch has an unstable status indicated by an orange exclamation mark with last success time of 2 min 34 sec, while the stephenc-patch-3 branch has a failed status indicated by a red cross mark.", scaledwidth="75%"]
 
 
 == Continuous Delivery with Pipeline
@@ -333,7 +333,7 @@ to be broken.
 
 [[throttled-concurrent]]
 .Throttled stage concurrency with Pipeline
-image::stage-concurrency.png[scaledwidth="90%"]
+image::stage-concurrency.png[alt = "A graph depicting time on the x-axis and commits on the y-axis. Three red dots represent individual commits, each having three stages: Build, Selenium Test, and Deploy. The first commit and third commit have Deploy stages, while the second commit lacks a Deploy stage. A downward dotted line connects the Deploy stage of the first commit to the Deploy stage of the third commit, which is positioned slightly ahead on the x-axis.", scaledwidth="90%"]
 
 Consider a simple pipeline with three stages. A naive implementation of this
 pipeline can sequentially trigger each stage on every commit. Thus, the
@@ -423,7 +423,7 @@ helpful metrics like average run time by stage and by build, and a user-friendly
 interface for interacting with input steps.
 
 .Pipeline Stage View plugin
-image::workflow-big-responsive.png[scaledwidth="90%"]
+image::pipeline-workflow-big-responsive.png[alt = "Jenkins Stage View displaying the status of multiple pipeline stages across five builds. The stages include 'Test', 'Re-test', 'Deploy', 'Deploy Again', 'Keep Deploying', 'Final Deploy', and 'Clean Up'. Each build is timestamped and labeled (#12 to #8). Builds #8 was successful till the 'Deploy Again' stage and then Failed. Build #9 and #10 are fully successful with green cells showing their individual stage durations in milliseconds. Build #11 has failed across all stages, with red striped cells labeled 'failed' and corresponding durations. Build #12 mostly failed except for the initial 'Test' and 'Re-test' stage, which succeeded. The top row summarizes average stage times, with the full pipeline run time averaging ~523ms.", scaledwidth="90%"]
 
 The only prerequisite for this plugin is a pipeline with defined stages in the
 flow. There can be as many stages as you desired and they can be in a linear
@@ -458,6 +458,6 @@ in its "Usage" list.
 
 [[fingerprinting]]
 .Fingerprint of a WAR
-image::fingerprinting.png[scaledwidth="90%"]
+image::fingerprinting.png[alt = "A page displaying the fingerprint details of an app.war file. The section labeled 'This file has been used in the following places' identifies it as fingerprint #6, indicating that it was created or modified in the 'fingerprint' named pipeline's #6 build. The page shows the MD5 hash of the file and the duration since it was created and tracked. This information is located under the 'See Fingerprint' tab of that pipeline build.", scaledwidth="90%"]
 
 Visit the link:/doc/book/using/fingerprints/[fingerprint documentation] to learn more.