Update preview sample output of Blazor components UG documentation

Author: Backiaraj

blazor/context-menu/how-to/change-animation-settings.md

@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Change animation settings in Blazor ContextMenu Component | Syncfusion
-description: Checkout and learn here all about Change animation settings in Syncfusion Blazor ContextMenu component and more.
+description: Learn how to customize animation settings in Syncfusion Blazor ContextMenu and explore advanced options for smooth, interactive menus and more actions.
 platform: Blazor
 control: Context Menu
 documentation: ug

blazor/dialog/dialogbuttons.md

@@ -77,8 +77,7 @@ The following example demonstrates how to define basic action buttons in the Bla
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLoXlMPsGLAcGWZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-![Blazor Dialog buttons](./images/blazor-dialog-buttons.gif)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLoXlMPsGLAcGWZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog buttons](./images/blazor-dialog-buttons.gif)" %}
 
 ## Add Icons to Dialog Buttons in Blazor Dialog Component
 
@@ -141,8 +140,7 @@ The DialogButton element allows you to define action buttons in the dialog foote
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htBINlibCGKtcBPW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-![Blazor Dialog buttons with icon](./images/blazor-dialog-button-with-icon.gif)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htBINlibCGKtcBPW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog buttons with icon](./images/blazor-dialog-button-with-icon.gif)" %}
 
 ## Using FooterTemplate Property
 
@@ -201,5 +199,4 @@ Alternatively, you can use the [FooterTemplate](https://help.syncfusion.com/cr/b
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLoZPilWGKFKFYH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-![Preview showing icons in Blazor Dialog footer buttons using FooterTemplate](./images/blazor-dialog-button-with-icon.gif)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLoZPilWGKFKFYH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Preview showing icons in Blazor Dialog footer buttons using FooterTemplate](./images/blazor-dialog-button-with-icon.gif)" %}

blazor/dialog/draggable.md

@@ -64,8 +64,7 @@ To get started quickly with draggable in Blazor Dialog Component, you can check
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBItlsFWwtJqMVI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-![Blazor Dialog component with draggable functionality enabled](./images/blazor-dialog-draggable.gif)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBItlsFWwtJqMVI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog component with draggable functionality enabled](./images/blazor-dialog-draggable.gif)" %}
 
 >**Note:** Draggable functionality is supported in both standard dialog and modal dialog configurations. The drag operation is limited to the dialog header area only.
 
@@ -160,8 +159,7 @@ The [`OnDragStop`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popup
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXByDlCvMmWVRpYO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-![Blazor Dialog component demonstrating drag events with real-time status updates](./images/blazor-draggable-events.gif)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXByDlCvMmWVRpYO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog component demonstrating drag events with real-time status updates](./images/blazor-draggable-events.gif)" %}
 
 ## Important Considerations
 

blazor/dialog/getting-started-with-web-app.md

@@ -227,8 +227,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Dialog component in your default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhTjVLBVzsCojDt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-![Blazor Dialog](./images/blazor-dialog.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhTjVLBVzsCojDt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog](./images/blazor-dialog.png)" %}
 
 N> * In the dialog control, max-height is calculated based on the dialog target element height. If the **Target** property is not configured, the **document.body** is considered as a target. Therefore, to show a dialog in proper height, you need to add min-height to the target element.
 
@@ -320,8 +319,7 @@ The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.Dial
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhyjEByHgdKnwXS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-![Blazor Dialog with Header](./images/blazor-dialog-header.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhyjEByHgdKnwXS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog with Header](./images/blazor-dialog-header.png)" %}
 
 ## Set Content to Dialog 
 
@@ -335,8 +333,7 @@ The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfD
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhIZPssAIpntkQY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-![Blazor Dialog with Content](./images/blazor-dialog-content.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhIZPssAIpntkQY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog with Content](./images/blazor-dialog-content.png)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Dialog).
 

blazor/dialog/getting-started.md

@@ -157,8 +157,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Dialog component
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Dialog component in your default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhTjVLBVzsCojDt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-![Blazor Dialog](./images/blazor-dialog.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhTjVLBVzsCojDt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog](./images/blazor-dialog.png)" %}
 
 N> * In the dialog control, max-height is calculated based on the dialog target element height. If the **Target** property is not configured, the **document.body** is considered as a target. Therefore, to show a dialog in proper height, you need to add min-height to the target element.
 
@@ -250,8 +249,7 @@ The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.Dial
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhyjEByHgdKnwXS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-![Blazor Dialog with Header](./images/blazor-dialog-header.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhyjEByHgdKnwXS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog with Header](./images/blazor-dialog-header.png)" %}
 
 ## Set Content to Dialog 
 
@@ -265,8 +263,7 @@ The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfD
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhIZPssAIpntkQY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-![Blazor Dialog with Content](./images/blazor-dialog-content.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhIZPssAIpntkQY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog with Content](./images/blazor-dialog-content.png)" %}
 
 ## See also
 

blazor/dialog/modal-dialog.md

@@ -40,8 +40,7 @@ A modal dialog prevents users from interacting with the rest of the application
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrotFCppdZxjRFA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-![Modal in Blazor Dialog](./images/blazor-modal-dialog.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrotFCppdZxjRFA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Modal in Blazor Dialog](./images/blazor-modal-dialog.png)" %}
 
 ## Handling Overlay Click Events
 
@@ -88,5 +87,4 @@ The following example demonstrates how to close a modal dialog when the user cli
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLetFiJJHqtzBdm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5"  %}
-![Blazor Dialog with Modal Overlay](./images/blazor-dialog-modal-closes.gif)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLetFiJJHqtzBdm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog with Modal Overlay](./images/blazor-dialog-modal-closes.gif)" %}

blazor/dialog/positioning.md

@@ -56,9 +56,7 @@ When using offset values, positive numbers move the dialog away from the top-lef
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhStvikfNHgUxWv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor Dialog with Dialog Position Data](./images/blazor-dialog-position-data.gif)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhStvikfNHgUxWv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog with Dialog Position Data](./images/blazor-dialog-position-data.gif)" %}
 
 ## RefreshPositionAsync Method
 
@@ -110,9 +108,7 @@ The [RefreshPositionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVoDviafDQdSdeA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor Dialog position with RefreshPositionAsync method](./images/blazor-dialog-position-refresh-method.gif)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVoDviafDQdSdeA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog position with RefreshPositionAsync method](./images/blazor-dialog-position-refresh-method.gif)" %}
 
 ## Position the Blazor Dialog in center of the page on scrolling
 
@@ -166,9 +162,7 @@ By default, when scrolling the page or container, the Dialog scrolls along with
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVoXlMEpViDbZCj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor Dialog position center with scrollable area](./images/blazor-dialog-position-center-scrollable.gif)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVoXlMEpViDbZCj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog position center with scrollable area](./images/blazor-dialog-position-center-scrollable.gif)" %}
 
 ## See also
 

blazor/dialog/resize.md

@@ -49,8 +49,7 @@ The resizable dialog can be created by setting the [EnableResize](https://help.s
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVoXFMaTKTKIhlV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5"  %}
-![Blazor Dialog with Enabled Resize property](./images/blazor-dialog-enable-resize.gif)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVoXFMaTKTKIhlV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog with Enabled Resize property](./images/blazor-dialog-enable-resize.gif)" %}
 
 ## ResizeHandles Property
 
@@ -101,8 +100,7 @@ The ResizeDirection enum provides the following options:
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVytbsYpKFHCFdx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5"  %}
-![Blazor Dialog with resizehandle in all direction ](./images/blazor-dialog-resizing-handles.gif)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVytbsYpKFHCFdx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog with resizehandle in all direction ](./images/blazor-dialog-resizing-handles.gif)" %}
 
 ## Related Events
 
@@ -174,5 +172,4 @@ The [OnResizeStop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popup
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVotPCOJffuhZmj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5"  %}
-![Blazor Dialog with Resize Events](./images/blazor-dialog-resize-events.gif)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVotPCOJffuhZmj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog with Resize Events](./images/blazor-dialog-resize-events.gif)" %}

blazor/dialog/show-dialog-with-fullscreen.md

@@ -45,5 +45,4 @@ You can show the dialog in full screen by passing `true` as argument to the dial
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVejlWlClMfIggp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-![Blazor FullScreen Dialog](./images/blazor-fullscreen-dialog.gif)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVejlWlClMfIggp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor FullScreen Dialog](./images/blazor-fullscreen-dialog.gif)" %}

blazor/dialog/state-persistent.md

@@ -61,5 +61,4 @@ The following code demonstrates how to configure a dialog with state persistence
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrytlWbCFhMvNqK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-![Blazor Dialog State Persistence](./images/blazor-dialog-state-persistent.gif)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrytlWbCFhMvNqK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog State Persistence](./images/blazor-dialog-state-persistent.gif)" %}