Merge pull request #4660 from syncfusion-content/897171-UG

Cleared the conflicts

Author: rajendranr-5483

blazor-toc.html

@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Blazor Weekly Nuget Release Release Notes  
+description: Essential Studio for Blazor Weekly Nuget Release Release Notes  
+platform: Blazor
+documentation: ug
+---
+
+# Essential Studio for Blazor  Release Notes  
+
+{% include release-info.html date="July 16, 2024"  version="v26.1.42" %} 
+
+{% directory path: _includes/release-notes/v26.1.42 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

blazor/Release-Notes/26.1.42.md

@@ -30,7 +30,7 @@ The following example depicts the code to provide spacing between the home and p
 </div>
 ```
 
-![Blazor AppBar with Spacer](./images/spacer_appbar.png)
+![Blazor AppBar with Spacer.](./images/blazor-appbar-spacer.png)
 {% previewsample "https://blazorplayground.syncfusion.com/embed/htLKWVizhrJGeHZk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Separator
@@ -68,7 +68,7 @@ The following example depicts the code to provide a vertical line between a grou
 ```
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BZrUWhizrrSDjGWv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-![Blazor AppBar with Separator](./images/separator_appbar.png)
+![Blazor AppBar with Separator.](./images/blazor-appbar-separator.png)
 
 ## Media Query
 
@@ -114,7 +114,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t
 </style>
 ```
 
-![Blazor AppBar with Media Query](./images/media_appbar.png)
+![Blazor AppBar with Media Query.](./images/blazor-appbar-media-quary.png)
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hDVUWBsJrBofaJVB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 ## Designing AppBar with Menu
 
@@ -173,7 +173,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t
 </style>
 ```
 
-![Blazor AppBar with Menu](./images/menu_appbar.png)
+![Blazor AppBar with Menu.](./images/blazor-appbar-menu.png)
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BXrgCrsfhVRDMsdT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Designing AppBar with Buttons
@@ -209,7 +209,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t
 </style>
 ```
 
-![Blazor AppBar with Buttons](./images/buttons_appbar.png)
+![Blazor AppBar with Buttons.](./images/blazor-appbar-buttons.png)
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VDVgMBMTLrdehyCb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Designing AppBar with SideBar
@@ -370,7 +370,6 @@ AppBar toggle button used to control the expand and collapse state of **SfSideba
     }
 </style>
 ```
-
-![Blazor AppBar with SideBar](./images/sidebar_appbar.png)
+![Blazor AppBar with SideBar.](./images/blazor-appbar-sidebar.png)
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hDVKirMTrrRbKrNE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

blazor/appbar/design.md

@@ -0,0 +1,62 @@
+---
+layout: post
+title: Load webp format image with Blazor Carousel Component | Syncfusion
+description: Checkout and learn about how to load webp format image with Blazor Carousel component in Blazor Server App and Blazor WebAssembly App.
+platform: Blazor
+control: Carousel
+documentation: ug
+---
+
+# Load webp format image with Blazor Carousel Component
+
+You can load the carousel image in the webp format, which aims to create smaller, better-looking images. Choosing webp as your image format can significantly improve your website's performance without sacrificing visual quality. webp images are significantly smaller in file size compared to formats like JPEG and PNG. This results in faster load times and less data usage. To achieve this, you can convert your image format to webp and pass them to Carousel items. The following sample illustrates how to load a carousel image in the webp format component.
+
+```cshtml
+@using Syncfusion.Blazor.Navigations
+
+<div class="control-container">
+    <SfCarousel SwipeMode="CarouselSwipeMode.Mouse & CarouselSwipeMode.Touch">
+        <CarouselItem>
+            <figure class="img-container">
+                <img src="https://www.gstatic.com/webp/gallery/1.webp" alt="Majestic Valley View" style="height:100%;width:100%;" />
+                <figcaption class="img-caption">Majestic Valley View</figcaption>
+            </figure>
+        </CarouselItem>
+        <CarouselItem>
+            <figure class="img-container">
+                <img src="https://www.gstatic.com/webp/gallery/2.webp" alt="Thrilling Rapids Adventure" style="height:100%;width:100%;" />
+                <figcaption class="img-caption">Thrilling Rapids Adventure</figcaption>
+            </figure>
+        </CarouselItem>
+        <CarouselItem>
+            <figure class="img-container">
+                <img src="https://www.gstatic.com/webp/gallery/3.webp" alt="Snowy Stroll" style="height:100%;width:100%;" />
+                <figcaption class="img-caption">Snowy Stroll</figcaption>
+            </figure>
+        </CarouselItem>
+    </SfCarousel>
+</div>
+
+<style>
+    .control-container {
+        height: 300px;
+        margin: 0 auto;
+        width: 500px;
+    }
+
+    .img-container {
+        height: 100%;
+        margin: 0;
+    }
+
+    .img-caption {
+        color: #fff;
+        font-size: 1rem;
+        position: absolute;
+        bottom: 3rem;
+        width: 100%;
+        text-align: center;
+    }
+
+</style>
+```