update

Author: zhiyuanliang-ms

articles/azure-app-configuration/enable-dynamic-configuration-aspire.md

@@ -109,7 +109,7 @@ The configuration refresh is triggered by the incoming requests to your web app.
 
 1. Run the `AppHost` project. Go to the Aspire dashboard and open the web app.
 
-    :::image type="content" source="media/aspire/original-message.png" alt-text="Screenshot of a web app with the original message from Azure App Configuration.":::
+    :::image type="content" source="media/aspire/original-message.png" alt-text="Screenshot of a web app with the original message from Azure App Configuration." lightbox="media/aspire/original-message.png":::
 
 1. In the Azure portal, navigate to the **Configuration explorer** of your App Configuration store, and update the value of the following key.
 
@@ -119,11 +119,11 @@ The configuration refresh is triggered by the incoming requests to your web app.
 
 1. Refresh the browser a few times. When the refresh interval elapses after 30 seconds, the page shows with updated content.
 
-    :::image type="content" source="media/aspire/refreshed-message.png" alt-text="Screenshot of a web app with the updated message from Azure App Configuration.":::
+    :::image type="content" source="media/aspire/refreshed-message.png" alt-text="Screenshot of a web app with the updated message from Azure App Configuration." lightbox="media/aspire/refreshed-message.png":::
 
 1. Go to the Aspire dashboard and open the structured logs. You see that the `webfrontend` resource has a log with message "Configuration reloaded.".
 
-    :::image type="content" source="media/aspire/dashboard-logs.png" alt-text="Screenshot of the Aspire dashboard showing structured logs.":::
+    :::image type="content" source="media/aspire/dashboard-logs.png" alt-text="Screenshot of the Aspire dashboard showing structured logs." lightbox="media/aspire/dashboard-logs.png":::
 
 :::zone-end
 
@@ -133,7 +133,7 @@ The configuration refresh is triggered by the incoming requests to your web app.
 
 1. Run the `AppHost` project. Go to the Aspire dashboard and open the web app.
 
-    :::image type="content" source="media/aspire/original-message.png" alt-text="Screenshot of a web app with the original message from Azure App Configuration.":::
+    :::image type="content" source="media/aspire/original-message.png" alt-text="Screenshot of a web app with the original message from Azure App Configuration." lightbox="media/aspire/original-message.png":::
 
 1. Go to the emulator UI, edit the value of the following key.
 
@@ -143,11 +143,11 @@ The configuration refresh is triggered by the incoming requests to your web app.
 
 1. Refresh the browser a few times. When the refresh interval elapses after 30 seconds, the page shows with updated content.
 
-    :::image type="content" source="media/aspire/refreshed-message.png" alt-text="Screenshot of a web app with the updated message from Azure App Configuration.":::
+    :::image type="content" source="media/aspire/refreshed-message.png" alt-text="Screenshot of a web app with the updated message from Azure App Configuration." lightbox="media/aspire/refreshed-message.png":::
 
 1. Go to the Aspire dashboard and open the structured logs. You see that the `webfrontend` resource has a log with message "Configuration reloaded.".
 
-    :::image type="content" source="media/aspire/dashboard-logs.png" alt-text="Screenshot of the Aspire dashboard showing structured logs.":::
+    :::image type="content" source="media/aspire/dashboard-logs.png" alt-text="Screenshot of the Aspire dashboard showing structured logs." lightbox="media/aspire/dashboard-logs.png":::
 
 :::zone-end
 

articles/azure-app-configuration/media/aspire/deployment-complete.png

@@ -30,11 +30,11 @@ The Aspire Starter template includes a frontend web app that communicates with a
 
 1. Run the `AppHost` project. You see the Aspire dashboard in your browser.
 
-    :::image type="content" source="media/aspire/dashboard.png" alt-text="Screenshot of the Aspire dashboard with web frontend and API service resources.":::
+    :::image type="content" source="media/aspire/dashboard.png" alt-text="Screenshot of the Aspire dashboard with web frontend and API service resources." lightbox="media/aspire/dashboard.png":::
 
 1. Click the URL of the web frontend. You see a page with a welcome message.
 
-    :::image type="content" source="media/aspire/web-app.png" alt-text="Screenshot of a web app with a welcome message.":::
+    :::image type="content" source="media/aspire/web-app.png" alt-text="Screenshot of a web app with a welcome message." lightbox="media/aspire/web-app.png":::
 
 :::zone target="docs" pivot="azure"
 
@@ -60,7 +60,7 @@ The Aspire Starter template includes a frontend web app that communicates with a
     > [!IMPORTANT]
     > When you call `AddAzureAppConfiguration`, you instruct the app to generate Azure resources dynamically during app startup. The app must configure the appropriate subscription and location. For more information, see [Local Azure provisioning](https://aspire.dev/integrations/cloud/azure/local-provisioning/#configuration).
     > If you are using the latest Aspire SDK, you can configure the subscription information through the Aspire dashboard.
-    > :::image type="content" source="media/aspire/azure-subscription.png" alt-text="Screenshot of Aspire dashboard asking for Azure Subscription information.":::
+    > :::image type="content" source="media/aspire/azure-subscription.png" alt-text="Screenshot of Aspire dashboard asking for Azure Subscription information." lightbox="media/aspire/azure-subscription.png":::
 
     > [!NOTE]
     > You must have either the **Owner** or **User Access Administrator** role assigned on the Azure subscription. These roles are required to create role assignments as part of the provisioning process.
@@ -82,15 +82,15 @@ The Aspire Starter template includes a frontend web app that communicates with a
 
 1. Run the `AppHost` project. You see the Azure App Configuration resource is provisioning.
 
-    :::image type="content" source="media/aspire/resource-provisioning.png" alt-text="Screenshot of Aspire dashboard provisioning Azure App Configuration resource.":::
+    :::image type="content" source="media/aspire/resource-provisioning.png" alt-text="Screenshot of Aspire dashboard provisioning Azure App Configuration resource." lightbox="media/aspire/resource-provisioning.png":::
 
 1. Wait for a few minutes and you see the Azure App Configuration resource is provisioned and is running.
 
-    :::image type="content" source="media/aspire/resource-provisioned.png" alt-text="Screenshot of Aspire dashboard with Azure App Configuration resource running.":::
+    :::image type="content" source="media/aspire/resource-provisioned.png" alt-text="Screenshot of Aspire dashboard with Azure App Configuration resource running." lightbox="media/aspire/resource-provisioned.png":::
 
 1. Go to the Azure portal by clicking the deployment URL on the Aspire dashboard. You see the deployment is complete and you can go to your Azure App Configuration resource.
 
-    :::image type="content" source="media/aspire/deployment-complete.png" alt-text="Screenshot of Azure portal showing the App Configuration deployment is complete.":::
+    :::image type="content" source="media/aspire/deployment-complete.png" alt-text="Screenshot of Azure portal showing the App Configuration deployment is complete." lightbox="media/aspire/deployment-complete.png":::
 
 ## Add a key-value
 
@@ -148,11 +148,11 @@ Add the following key-value to your App Configuration store and leave **Label**
 
 1. Run the `AppHost` project. Go to the Aspire dashboard. You see the App Configuration emulator resource is running.
 
-    :::image type="content" source="media/aspire/dashboard-emulator.png" alt-text="Screenshot of the Aspire dashboard showing the App Configuration emulator resource.":::
+    :::image type="content" source="media/aspire/dashboard-emulator.png" alt-text="Screenshot of the Aspire dashboard showing the App Configuration emulator resource." lightbox="media/aspire/dashboard-emulator.png":::
 
    A container is started to run the App Configuration emulator.
 
-   :::image type="content" source="media/aspire/docker.png" alt-text="Screenshot of the docker desktop running a container.":::
+   :::image type="content" source="media/aspire/docker.png" alt-text="Screenshot of the docker desktop running a container." lightbox="media/aspire/docker.png":::
 
 ## Add a key-value
 
@@ -170,7 +170,7 @@ Add the following key-value to your App Configuration store and leave **Label**
 
 1. Click the `Save` button.
 
-    :::image type="content" source="media/aspire/emulator-create-key.png" alt-text="Screenshot of the App Configuration emulator UI of creating a new key value.":::
+    :::image type="content" source="media/aspire/emulator-create-key.png" alt-text="Screenshot of the App Configuration emulator UI of creating a new key value." lightbox="media/aspire/emulator-create-key.png":::
 
 :::zone-end
 
@@ -224,11 +224,11 @@ Add the following key-value to your App Configuration store and leave **Label**
 
 1. **Restart** the `AppHost` project. Go to the Aspire dashboard and click the URL of the web frontend. 
 
-    :::image type="content" source="media/aspire/dashboard-updated.png" alt-text="Screenshot of Aspire dashboard showing resources.":::
+    :::image type="content" source="media/aspire/dashboard-updated.png" alt-text="Screenshot of Aspire dashboard showing resources." lightbox="media/aspire/dashboard-updated.png":::
 
 1. You see a page with a welcome message from Azure App Configuration.
 
-    :::image type="content" source="media/aspire/web-app-message.png" alt-text="Screenshot of a web app with a welcome message from Azure App Configuration.":::
+    :::image type="content" source="media/aspire/web-app-message.png" alt-text="Screenshot of a web app with a welcome message from Azure App Configuration." lightbox="media/aspire/web-app-message.png":::
 
 ## Next steps
 

articles/azure-app-configuration/quickstart-aspire.md

@@ -33,7 +33,7 @@ Follow the documents to create an Aspire solution with dynamic configuration.
 
 Add a feature flag called *Beta* to the App Configuration store (created in the [Prerequisites](./quickstart-feature-flag-aspire.md#prerequisites) steps), and leave **Label** and **Description** with their default values. For more information about how to add feature flags to a store using the Azure portal or the CLI, go to [Create a feature flag](./manage-feature-flags.md#create-a-feature-flag).
 
-:::image type="content" source="media/add-beta-feature-flag.png" alt-text="Screenshot of adding a feature flag called Beta.":::
+:::image type="content" source="media/add-beta-feature-flag.png" alt-text="Screenshot of adding a feature flag called Beta." lightbox="media/add-beta-feature-flag.png":::
 
 :::zone-end
 
@@ -45,7 +45,7 @@ Add the following key-value through the App Configuration emulator UI.
 |-------------------------------|-------------------------------------------------------------| --------------------------------|
 | *.appconfig.featureflag/Beta* | *application/vnd.microsoft.appconfig.ff+json;charset=utf-8* | *{"id":"Beta","enabled":false}* |
 
-:::image type="content" source="media/aspire/emulator-feature-flag.png" alt-text="Screenshot of adding a feature flag to emulator.":::
+:::image type="content" source="media/aspire/emulator-feature-flag.png" alt-text="Screenshot of adding a feature flag to emulator." lightbox="media/aspire/emulator-feature-flag.png":::
 
  Feature flags are special key-values that define Microsoft feature flags. Configuration providers identify feature flag by their specific content type and key prefix. The value of a feature flag is a json object that follows [`Microsoft Feature Flag schema`](https://github.com/microsoft/FeatureManagement/blob/main/Schema/FeatureFlag.v2.0.0.schema.json).
 
@@ -195,17 +195,17 @@ Add the following key-value through the App Configuration emulator UI.
 
 1. Run the `AppHost` project. Go to the Aspire dashboard and open the web app.
 
-    :::image type="content" source="media/aspire/feature-flag-disabled.png" alt-text="Screenshot of a web app with three buttons on the side bar.":::
+    :::image type="content" source="media/aspire/feature-flag-disabled.png" alt-text="Screenshot of a web app with three buttons on the side bar." lightbox="media/aspire/feature-flag-disabled.png":::
 
 1. In the Azure portal, navigate to the **Feature manager** of your App Configuration store and locate the *Beta* feature flag. Enable the flag by selecting the checkbox under **Enabled**.
 
 1. Refresh the page a few times. When the refresh interval time window passes, the page will show with updated content.
 
-    :::image type="content" source="media/aspire/feature-flag-disabled.png" alt-text="Screenshot of a web app with Beta button on the side bar.":::
+    :::image type="content" source="media/aspire/feature-flag-disabled.png" alt-text="Screenshot of a web app with Beta button on the side bar." lightbox="media/aspire/feature-flag-disabled.png":::
 
 1. Click the **Beta** button. It will bring you to the beta page that you enabled dynamically.
 
-    :::image type="content" source="media/aspire/beta-page.png" alt-text="Screenshot of the Beta page.":::
+    :::image type="content" source="media/aspire/beta-page.png" alt-text="Screenshot of the Beta page." lightbox="media/aspire/beta-page.png":::
 
 :::zone-end
 
@@ -215,7 +215,7 @@ Add the following key-value through the App Configuration emulator UI.
 
 1. Run the `AppHost` project. Go to the Aspire dashboard and open the web app.
 
-    :::image type="content" source="media/aspire/feature-flag-disabled.png" alt-text="Screenshot of a web app with three buttons on the side bar.":::
+    :::image type="content" source="media/aspire/feature-flag-disabled.png" alt-text="Screenshot of a web app with three buttons on the side bar." lightbox="media/aspire/feature-flag-disabled.png":::
 
 1. Go to the emulator, edit the value of the feature flag to enable it.
 
@@ -225,11 +225,11 @@ Add the following key-value through the App Configuration emulator UI.
 
 1. Refresh the page a few times. When the refresh interval time window passes, the page will show with updated content.
 
-    :::image type="content" source="media/aspire/feature-flag-enabled.png" alt-text="Screenshot of a web app with Beta button on the side bar.":::
+    :::image type="content" source="media/aspire/feature-flag-enabled.png" alt-text="Screenshot of a web app with Beta button on the side bar." lightbox="media/aspire/feature-flag-enabled.png":::
 
 1. Click the **Beta** button. It will bring you to the beta page that you enabled dynamically.
 
-    :::image type="content" source="media/aspire/beta-page.png" alt-text="Screenshot of the Beta page.":::
+    :::image type="content" source="media/aspire/beta-page.png" alt-text="Screenshot of the Beta page." lightbox="media/aspire/beta-page.png":::
 
 :::zone-end