Update all image blocks to use new shortcode (#886)

Signed-off-by: jasonviviano <[email protected]>

.github/config/en-custom.txt

@@ -984,6 +984,15 @@ OSI
 ghcr
 png
 src
+todoapp
+todolist
+mockup
+diataxis
+appdiagram
+tmp
+jpg
+buildingblocks
+svg
 ClusterIP
 NodePort
 replicaset
@@ -994,4 +1003,4 @@ dfc
 fh
 qd
 vf
-zht
+zht

docs/content/_index.md

@@ -10,7 +10,7 @@ no_list: true
 Welcome to the Radius documentation! Here you'll find everything you need to know about Radius, from getting started to advanced topics.
 
 {{% alert color="primary" %}}
-<img src="radius-logo.svg" alt="Radius logo" width="400px" /> <br /><br />
+{{< image src="radius-logo.svg" alt="Radius logo" width="400px" >}} <br /><br />
 Radius is a cloud native application platform.  It enables developers and IT operators to collaborate on delivering and managing cloud-native applications. With Radius, teams can easily understand their applications and how applications are running environments including dev, cloud, edge, and on-prem. Plus, teams can ensure their application infrastructure meets cost, operations, and security requirements. Open-source and multi-cloud, Radius is the cloud-native application platform for delivering and managing applications anywhere.
 
 [**Learn more**](https://radapp.io/)

docs/content/community/contributing/contributing-docs/index.md

@@ -11,7 +11,7 @@ The Radius docs are built on [Hugo](https://gohugo.io) with the [Docsy](https://
 
 Radius uses the [Diátaxis framework](https://diataxis.fr/) for its documentation:
 
-<img src="diataxis.png" alt="Diagram showing the diataxis framework" width=800px >
+{{< image src="diataxis.png" alt="Diagram showing the diataxis framework" width=800px >}}
 
 Follow the guidance on this page to learn how to get started, how to contribute, and how to use the Diátaxis framework to create new docs.
 
@@ -356,7 +356,7 @@ Begin by placing images under `/daprdocs/static/images` with the naming conventi
 Then link to the image using:
 
 ```md
-<img src="/images/[image-filename]" width=1000 alt="Description of image">
+{{</* image src="/images/[image-filename]" width=1000 alt="Description of image" */>}}
 ```
 
 >Don't forget to set the alt attribute to keep the docs readable for our visually impaired users.
@@ -366,7 +366,7 @@ Then link to the image using:
 This HTML will display the `radius-overview.png` image on the `overview.md` page:
 
 ```md
-<img src="/images/radius-overview.png" width=1000 alt="Overview diagram of Dapr and its building blocks">
+{{</* image src="radius-overview.png" width=1000 alt="Overview diagram of Dapr and its building blocks" */>}}
 ```
 
 ### Alerts

docs/content/concepts/application-graph/index.md

@@ -11,19 +11,19 @@ toc_hide: true
 
 Radius offers an [application resource]({{< ref "guides/author-apps/application" >}}) which teams can use to define and deploy their entire application, including all of the compute, relationships, and infrastructure that make up the application. Since the graph of relationships between deployed resources is much more descriptive than a basic list of resources, the Radius Application graph can automate complex deployment tasks and enable rich visualization experiences.
 
-<img src="application.png" alt="A diagram showing an application and all it's resources" width=400px >
+{{< image src="application.png" alt="A diagram showing an application and all it's resources" width=400px >}}
 
 ## Graphs are better than lists
 
 Within an application deployed with Radius, developers can express both the resources (_containers, databases, message queues, etc._), as well as all the relationships between them. This forms the Radius Application graph. This graph is powerful because it allows Radius to understand the relationships between resources, simplifying the [deployment]({{< ref "/guides/deploy-apps" >}}) and [configuration]({{< ref "application" >}}) of your application. Plus, it allows you to visualize your application in a way that is more intuitive than a list of resources.
 
-<img src="list-to-graph.png" alt="A diagram showing the move from a set of infrastructure lists to a graph of resources" width=600px >
+{{< image src="list-to-graph.png" alt="A diagram showing the move from a set of infrastructure lists to a graph of resources" width=600px >}}
 
 ## Self-documenting applications
 
 The Radius Application graph also allows your application to be self-documenting, where developers and operators can query and reason about the same application definition. Instead of multiple views of logs, infrastructure, and code, Radius provides a single source of truth for your application.
 
-<img src="dashboard.png" alt="A mockup of a dashboard UI showing an application, its resources, and its connections" width=700px >
+{{< image src="dashboard.png" alt="A mockup of a dashboard UI showing an application, its resources, and its connections" width=700px >}}
 
 > **Note:** A Radius dashboard is still on the roadmap, but in the meantime you can use the [Radius API]({{< ref api-concept >}}) to build your own visual experiences today.
 

docs/content/concepts/architecture-concept/index.md

@@ -134,7 +134,7 @@ When listing applications using the `rad` CLI:
 3. UCP proxies the HTTP request to the `Applications.Core` resource provider.
 4. The `Applications.Core` resource provider handles the request and responds with the list of applications.
 
-<img src="flow-list-apps.png" alt="Diagram of the API flow described above" width="1000px" >
+{{< image src="flow-list-apps.png" alt="Diagram of the API flow described above" width="1000px" >}}
 
 {{% /codetab %}}
 
@@ -148,7 +148,7 @@ When using Bicep to author and deploy Radius Applications:
   a. The `Bicep.Deployments` resource provider makes a request to UCP to Create/Update the resource.
   b. UCP routes the request to the appropriate resource provider to be handled.
 
-<img src="flow-deploy.png" alt="Diagram of the API flow described above" width="1000px" >
+{{< image src="flow-deploy.png" alt="Diagram of the API flow described above" width="1000px" >}}
 
 {{% /codetab %}}
 
@@ -161,7 +161,7 @@ When using the `tf` CLI to deploy a Radius Application using Terraform:
   c. In the case of a Radius resource the Terraform provider makes a request the Radius API to Create/Update a resource.
   d. UCP routes the request to the appropriate resource provider to be handled.
 
-<img src="flow-terraform.png" alt="Diagram of the API flow described above" width="1000px" >
+{{< image src="flow-terraform.png" alt="Diagram of the API flow described above" width="1000px" >}}
 
 {{% /codetab %}}
 

docs/content/concepts/environments-concept/index.md

@@ -14,7 +14,7 @@ Radius Environments are a prepared landing zone for applications. They contain a
 
 Environments provide a grouping structure for applications and the resources they share. For example, an org might choose to setup separate Radius Environments for staging and production. When appropriate, multiple applications can be deployed into the same environment.
 
-<img src="env-with-apps-example.png" alt="Diagram of multiple Radius Environments deployed to Azure. One environment contains 1 app, the other environment contains multiple apps." width="350px" />
+{{< image src="env-with-apps-example.png" alt="Diagram of multiple Radius Environments deployed to Azure. One environment contains 1 app, the other environment contains multiple apps." width="350px" >}}
 
 ## Concerns that environments manage
 

docs/content/concepts/overview/index.md

@@ -13,7 +13,7 @@ App teams today struggle to model and deploy their applications. Complex archite
 
 Apps today are modeled and deployed with Dockerfiles, Kubernetes CRDs, Helm charts, and infrastructure-as-code templates, with scripts to glue it all together. Plus, the range of infrastructure types (cloud, on-premises, serverless) can double or triple the work as teams figure out how to move apps between platforms.
 
-<img alt="Diagram showing all of the technologies needed to model an application today" src="cloud-apps-today.png" width="600px" />
+{{< image alt="Diagram showing all of the technologies needed to model an application today" src="cloud-apps-today.png" width="600px" >}}
 
 Once deployed, teams don't have a way to view and manage apps holistically. Instead, they're drowning in lists of disjointed resources.
 
@@ -25,7 +25,7 @@ What's missing is a way to collapse the entire concept of an application into a
 
 At the heart of Radius is a new **application resource**, with an accompanying set of resources and abstractions to describe your app's requirements and capabilities. 
 
-<img alt="Diagram showing modeling an app with Radius" src="cloud-apps-radius.png" width="600px" />
+{{< image alt="Diagram showing modeling an app with Radius" src="cloud-apps-radius.png" width="600px" >}}
 
 These new resources form the [**Radius app model**]({{< ref application-graph>}}), which allow you to:
 
@@ -36,13 +36,13 @@ These new resources form the [**Radius app model**]({{< ref application-graph>}}
 
 The result is no longer just a flat list of resources - it's a fully codified abstraction of how the services and infrastructure relate to each other:
 
-<img alt="Diagram showing Radius Application in the Azure portal" src="ui-mockup-basic.png" width="700px" /><br />
+{{< image alt="Diagram showing Radius Application in the Azure portal" src="ui-mockup-basic.png" width="700px" >}}<br />
 
 ### Drastically reduce infra ops time
 
 [App environments]({{< ref environments-concept >}}) are landing zones for applications. They are the place where you can deploy, manage, and scale your apps.
 
-<img alt="Diagram showing Radius Environments" src="environments.png" width="600px" />
+{{< image alt="Diagram showing Radius Environments" src="environments.png" width="600px" >}}
 
 Environments allow you to:
 
@@ -74,7 +74,7 @@ Radius uses the [Bicep language]({{< ref bicep >}}) as its file-format and struc
 
 Radius aims to support all hosting platform types - from hyperscale cloud, to self-hosted Kubernetes on the edge, to IoT and edge devices.
 
-<img alt="Diagram showing Radius platforms" src="platforms.png" width="800px" />
+{{< image alt="Diagram showing Radius platforms" src="platforms.png" width="800px" >}}
 
 ### Application portability
 

docs/content/getting-started/index.md

@@ -91,7 +91,7 @@ This command:
 
 In your browser you should see the demo app:
 
-<img src="./demo-screenshot.png" alt="Screenshot of the demo container" width=600px >
+{{< image src="demo-screenshot.png" alt="Screenshot of the demo container" width=600px >}}
 <br /><br />
 
 Congrats! You're running your first Radius app. When you're ready to move on to the next step, use <kbd>CTRL</kbd>+ <kbd>C</kbd> to exit the command.
@@ -131,12 +131,12 @@ rad run app.bicep
 
 You should see the Radius Connections section with new environment variables added. The `demo` container now has connection information for Redis (`CONNECTION_REDIS_HOST`, `CONNECTION_REDIS_PORT`, etc.):
 
-<img src="./demo-with-redis-screenshot.png" alt="Screenshot of the demo container" width=800px >
+{{< image src="demo-with-redis-screenshot.png" alt="Screenshot of the demo container" width=800px >}}
 <br /><br />
 
 Navigate to the Todo List tab and test out the application. Using the Todo page will update the saved state in Redis:
 
-<img src="./demo-with-todolist.png" alt="Screenshot of the todolist" width=700px >
+{{< image src="./images/demo-with-todolist.png" alt="Screenshot of the todolist" width=700px >}}
 <br /><br />
 
 Press <kbd>CTRL</kbd>+ <kbd>C</kbd> when you are finished with the website.

docs/content/guides/author-apps/application/overview/index.md

@@ -8,15 +8,15 @@ categories: "Overview"
 tags: ["applications"]
 ---
 
-<img src="application.png" alt="Diagram of an application" width=350px >
+{{< image src="application.png" alt="Diagram of an application" width=350px >}}
 
 A Radius Application is the primary resource that brings all your "stuff" together. This can include services, dependencies, and relationships. Radius apps give you a single description and view into your entire application, and allow you to deploy and manage it easily.
 
 ## Add portability to your application
 
 Radius Applications are designed to be cloud and platform agnostic. This means that you can define your application once, and deploy it to any cloud or platform that Radius supports. This allows you to easily move your application between clouds, or even between cloud and on-premises environments. Developers can define their requirements and dependencies (_Redis, SQL, Dapr, etc._) and operators can define the [environments]({{< ref "guides/deploy-apps/environments/overview" >}}) and [Recipes]({{< ref "guides/recipes/overview" >}}) that bind those requirements to the appropriate cloud resources.
 
-<img src="portable-resources.png" alt="Diagram of portable resources binding to different clouds" width=600px >
+{{< image src="portable-resources.png" alt="Diagram of portable resources binding to different clouds" width=600px >}}
 
 Learn more about portable resources in the [portable resources docs]({{< ref "guides/author-apps/portable-resources/overview" >}}) and [Dapr docs]({{< ref "guides/author-apps/dapr/overview" >}})
 
@@ -36,7 +36,7 @@ The [Kubernetes Metadata extension]({{< ref "guides/operations/kubernetes/kubern
 
 Radius Applications are more than just client-side configuration and automation, they also provide a server-side graph of your application. This graph can be queried and used to understand your application, and can be used to power other Radius features and custom tooling. Refer to the [API concept docs]({{< ref "api-concept" >}}) and [Postman How-To guide]({{< ref "guides/operations/control-plane/howto-postman" >}}) for more information on how to query the application graph.
 
-<img src="app-graph.png" alt="Diagram of the application graph" width=500px >
+{{< image src="app-graph.png" alt="Diagram of the application graph" width=500px >}}
 
 ## Resource schema 
 

docs/content/guides/author-apps/aws/howto-aws-resources/index.md

@@ -13,7 +13,7 @@ This how-to guide will show you:
 - How to model an AWS S3 resource in Bicep
 - How to use a sample application to interact with AWS S3 bucket
 
-   <img src="./s3appdiagram.png" alt="Screenshot of the sample application to interact with s3 bucket " width=400>
+   {{< image src="s3appdiagram.png" alt="Screenshot of the sample application to interact with s3 bucket " width=400 >}}
 
 ## Prerequisites
 
@@ -92,7 +92,7 @@ This creates a container that will be deployed to your Kubernetes cluster. This
 
 1. Visit [localhost:5234](http://localhost:5234/swagger/index.html) in your browser. This is a swagger doc for the sample application. You can use this to interact with the AWS S3 Bucket you created. For example, you can try to upload a file to the bucket via the `/upload` endpoint.
 
-    <img src="./s3app.png" alt="Screenshot of the sample application to interact with s3 bucket " width=900>
+    {{< image src="s3app.png" alt="Screenshot of the sample application to interact with s3 bucket " width=900 >}}
 
 ## Step 6: Cleanup
 

docs/content/guides/author-apps/containers/howto-connect-dependencies/index.md

@@ -43,7 +43,7 @@ Connections from a container to a resource result in environment variables for c
    ```
 1. Visit [localhost:3000](http://localhost:3000) in your browser. You should see the following page, now showing injected environment variables:
 
-   <img src="./demo-with-redis-screenshot.png" alt="Screenshot of the demo app with all environment variables" width=1000px />
+   {{< image src="./demo-with-redis-screenshot.png" alt="Screenshot of the demo app with all environment variables" width=1000px >}}
 
 ## Step 5: View the Application Connections
 

docs/content/guides/author-apps/containers/howto-volumes/index.md

@@ -41,7 +41,7 @@ The `samples/volumes` container will display the status and contents of the `/tm
    ```
 1. Visit [localhost:5000](http://localhost:5000) in your browser. You should see a message warning that the directory `/tmpdir` does not exist:
 
-   <img src="screenshot-error.jpg" width=500px alt="Screeshot of container showing that the tmp directory does not exist">
+   {{< image src="screenshot-error.jpg" width=500px alt="Screenshot of container showing that the tmp directory does not exist" >}}
 
 ## Step 3: Add an ephemeral volume
 
@@ -65,10 +65,10 @@ Within the `container.volume` property, add a new volume named `temp` and config
 
 1. Visit [localhost:5000](http://localhost:5000) in your browser. You should see the contents of `/tmpdir`, showing an empty directory.
 
-   <img src="screenshot-empty.jpg" width=500px alt="Screeshot of container showing that the tmp directory has no items">
+   {{< image src="screenshot-empty.jpg" width=500px alt="Screenshot of container showing that the tmp directory has no items" >}}
 1. Press the `Create file` button to generate a new file in the directory, such as `test.txt`:
 
-   <img src="screenshot.jpg" width=400px alt="Screeshot of container showing files being created">
+   {{< image src="screenshot.jpg" width=400px alt="Screenshot of container showing files being created" >}}
 1. Done! You've now learned how to mount an ephemeral volume
 
 ## Cleanup

docs/content/guides/author-apps/containers/overview/index.md

@@ -10,7 +10,7 @@ tags: ["containers"]
 
 A Radius container enables you to run a container workload as part of your application across different platforms and runtimes. Your container can be a frontend UI, a backend API, a database, or any other container you need to run as part of your app. Plus, with Radius Connections, you can easily connect your container to other resources in your application, such as databases, message queues, and more and automatically configure your container with identity, secrets, and other configuration.
 
-<img src="containers-splash.png" alt="Container graphic" width=300px >
+{{< image src="containers-splash.png" alt="Container graphic" width=300px >}}
 
 > Adding a container and want to jump to the reference docs? Check out the [container resource schema]({{< ref "container-schema" >}}).
 

docs/content/guides/author-apps/dapr/overview/index.md

@@ -20,7 +20,7 @@ Follow the [Dapr installation instructions](https://docs.dapr.io/operations/host
 
 A [Dapr sidecar](https://docs.dapr.io/concepts/dapr-services/sidecar/) allows your services to interact with Dapr building blocks. It is required if your service leverages Dapr.
 
-<img src="dapr-sidecar.png" style="width:600px" alt="Diagram of the Dapr sidecar" /><br />
+{{< image src="dapr-sidecar.png" style="width:600px" alt="Diagram of the Dapr sidecar" >}} <br />
 
 You can easily add the Dapr sidecar to your [Containers]({{< ref "guides/author-apps/containers" >}}) using a Dapr sidecar extension:
 
@@ -38,7 +38,7 @@ Your container can now interact with the sidecar using the Dapr [building block
 
 Dapr resources make it easy to model and configure [Dapr building block APIs](https://docs.dapr.io/developing-applications/building-blocks/). Simply specify the building block and the backing resource, and Radius will apply the accompanying Dapr component configuration.
 
-<img src="dapr-buildingblocks.png" style="width:1000px" alt="Diagram of all the Dapr building blocks" /><br />
+{{< image src="dapr-buildingblocks.png" style="width:1000px" alt="Diagram of all the Dapr building blocks" >}} <br />
 
 Model your building blocks as resources:
 

docs/content/guides/author-apps/networking/howto-gateways/index.md

@@ -60,7 +60,7 @@ Building app.bicep...
 
 Visit the endpoint to interact with the demo Radius container:
 
-<img src="demo-screenshot.png" alt="Screenshot of te demo application" width="500px" >
+{{< image src="demo-screenshot.png" alt="Screenshot of the demo application" width="500px" >}}
 
 ## Done
 

docs/content/guides/author-apps/networking/howto-service-networking/index.md

@@ -10,7 +10,7 @@ categories: "How-To"
 
 This guide will show you how two services can communicate with each other. In this example, we will have a frontend container service that communicates with a backend container service.
 
-<img src="overview.png" alt="Diagram of the frontend talking to the backend over HTTP port 80" width="400px" >
+{{< image src="overview.png" alt="Diagram of the frontend talking to the backend over HTTP port 80" width="400px" >}}
 
 ## Prerequisites
 
@@ -64,7 +64,7 @@ Starting log stream...
 
 Visit [http://localhost:3000](http://localhost:3000) in your browser. You should see a connection to the backend container, along with the environment variables that have automatically been set on the frontend container:
 
-<img src="backend-connection.png" alt="Screenshot of the demo container showing the backend connections" width="600px" >
+{{< image src="backend-connection.png" alt="Screenshot of the demo container showing the backend connections" width="600px" >}}
 
 ## Done