Skip to content

Commit a6222d7

Browse files
maheshtpsmaheshtps
authored
Merge pull request #3206 from syncfusion-content/ES-896904-carousel
896904: Added topic for load images in webp format
2 parents b9a889a + 4b72563 commit a6222d7

File tree

6 files changed

+157
-0
lines changed

6 files changed

+157
-0
lines changed

‎ej2-asp-core-mvc/carousel/how-to/load-images-in-webp-format.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
layout: post
3+
title: Load webp format image in ##Platform_Name## Accordion Control | Syncfusion
4+
description: Learn here all about how to load webp format image in Syncfusion ##Platform_Name## Accordion control of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Load images in webp format
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
12+
# Load webp format image in Carousel component
13+
14+
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.
15+
16+
{% if page.publishingplatform == "aspnet-core" %}
17+
18+
{% tabs %}
19+
{% highlight cshtml tabtitle="CSHTML" %}
20+
{% include code-snippet/carousel/how-to/carousel-webp/tagHelper %}
21+
{% endhighlight %}
22+
{% endtabs %}
23+
24+
{% elsif page.publishingplatform == "aspnet-mvc" %}
25+
26+
{% tabs %}
27+
{% highlight razor tabtitle="CSHTML" %}
28+
{% include code-snippet/carousel/how-to/carousel-webp/razor %}
29+
{% endhighlight %}
30+
{% highlight c# tabtitle="Wizard.cs" %}
31+
{% include code-snippet/carousel/how-to/carousel-webp/carousel-webp.cs %}
32+
{% endhighlight %}
33+
{% endtabs %}
34+
{% endif %}

‎ej2-asp-core-mvc/code-snippet/carousel/how-to/carousel-webp/carousel-webp.cs

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
public ActionResult Index()
2+
{
3+
return View();
4+
}

‎ej2-asp-core-mvc/code-snippet/carousel/how-to/carousel-webp/razor

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
@using Syncfusion.EJ2.Navigations;
2+
3+
<div class="container">
4+
<div class="control-container">
5+
@(Html.EJS().Carousel("defaultCarousel").PartialVisible(true).Items(new List<CarouselItem> {
6+
new CarouselItem { Template = "#itemTemplate1" },
7+
new CarouselItem { Template = "#itemTemplate2" },
8+
new CarouselItem { Template = "#itemTemplate3" },
9+
})
10+
.Render()
11+
)
12+
</div>
13+
</div>
14+
<script id="itemTemplate1" type="text/x-template">
15+
<figure class="img-container">
16+
<img src="https://www.gstatic.com/webp/gallery/1.webp" alt="Majestic Valley View" style="height:100%;width:100%;" />
17+
<figcaption class="img-caption">Majestic Valley View</figcaption>
18+
</figure>
19+
</script>
20+
21+
<script id="itemTemplate1" type="text/x-template">
22+
<figure class="img-container">
23+
<img src="https://www.gstatic.com/webp/gallery/2.webp" alt="Thrilling Rapids Adventure" style="height:100%;width:100%;" />
24+
<figcaption class="img-caption">Thrilling Rapids Adventure</figcaption>
25+
</figure>
26+
</script>
27+
28+
<script id="itemTemplate1" type="text/x-template">
29+
<figure class="img-container">
30+
<img src="https://www.gstatic.com/webp/gallery/3.webp" alt="Snowy Stroll" style="height:100%;width:100%;" />
31+
<figcaption class="img-caption">Snowy Stroll</figcaption>
32+
</figure>
33+
</script>
34+
<style>
35+
.control-container {
36+
background-color: #e5e5e5;
37+
height: 360px;
38+
margin: 0 auto;
39+
width: 600px;
40+
}
41+
42+
.img-container {
43+
height: 100%;
44+
margin: 0;
45+
}
46+
47+
.img-caption {
48+
color: #fff;
49+
font-size: 1rem;
50+
position: absolute;
51+
bottom: 3rem;
52+
width: 100%;
53+
text-align: center;
54+
}
55+
</style>

‎ej2-asp-core-mvc/code-snippet/carousel/how-to/carousel-webp/tagHelper

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<div class="container">
2+
<div class="control-container">
3+
<ejs-carousel id="defaultCarousel">
4+
<e-carousel-items>
5+
<e-carousel-item template="#templateItem1"></e-carousel-item>
6+
<e-carousel-item template="#templateItem2"></e-carousel-item>
7+
<e-carousel-item template="#templateItem3"></e-carousel-item>
8+
</e-carousel-items>
9+
</ejs-carousel>
10+
</div>
11+
</div>
12+
<script id="templateItem1" type="text/x-template">
13+
<figure class="img-container">
14+
<img src="https://www.gstatic.com/webp/gallery/1.webp" alt="Majestic Valley View" style="height:100%;width:100%;" />
15+
<figcaption class="img-caption">Majestic Valley View</figcaption>
16+
</figure>
17+
</script>
18+
19+
<script id="templateItem2" type="text/x-template">
20+
<figure class="img-container">
21+
<img src="https://www.gstatic.com/webp/gallery/2.webp" alt="Thrilling Rapids Adventure" style="height:100%;width:100%;" />
22+
<figcaption class="img-caption">Thrilling Rapids Adventure</figcaption>
23+
</figure>
24+
</script>
25+
26+
<script id="templateItem3" type="text/x-template">
27+
<figure class="img-container">
28+
<img src="https://www.gstatic.com/webp/gallery/3.webp" alt="Snowy Stroll" style="height:100%;width:100%;" />
29+
<figcaption class="img-caption">Snowy Stroll</figcaption>
30+
</figure>
31+
</script>
32+
<style>
33+
.control-container {
34+
background-color: #e5e5e5;
35+
height: 360px;
36+
margin: 0 auto;
37+
width: 600px;
38+
}
39+
40+
.img-container {
41+
height: 100%;
42+
margin: 0;
43+
}
44+
45+
.img-caption {
46+
color: #fff;
47+
font-size: 1rem;
48+
position: absolute;
49+
bottom: 3rem;
50+
width: 100%;
51+
text-align: center;
52+
}
53+
54+
</style>

‎ej2-asp-core-toc.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -411,6 +411,11 @@
411411
<li><a href="/ej2-asp-core/carousel/navigators-and-indicators">Navigators and Indicators</a></li>
412412
<li><a href="/ej2-asp-core/carousel/accessibility">Accessibility</a></li>
413413
<li><a href="/ej2-asp-core/carousel/styles-and-appearance">Styles and Appearances</a></li>
414+
<li>How To
415+
<ul>
416+
<li><a href="/ej2-asp-core/carousel/how-to/load-images-in-webp-format">Load images in webp format</a></li>
417+
</ul>
418+
</li>
414419
<li>
415420
<a href="/cr/aspnetcore-js2/Syncfusion.EJ2.Navigations.Carousel.html"> API Reference</a>
416421
</li>

‎ej2-asp-mvc-toc.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -363,6 +363,11 @@
363363
<li><a href="/ej2-asp-mvc/carousel/navigators-and-indicators">Navigators and Indicators</a></li>
364364
<li><a href="/ej2-asp-mvc/carousel/accessibility">Accessibility</a></li>
365365
<li><a href="/ej2-asp-mvc/carousel/styles-and-appearance">Styles and Appearances</a></li>
366+
<li>How To
367+
<ul>
368+
<li><a href="/ej2-asp-core/carousel/how-to/load-images-in-webp-format">Load images in webp format</a></li>
369+
</ul>
370+
</li>
366371
<li>
367372
<a href="/cr/aspnetmvc-js2/Syncfusion.EJ2.Navigations.Carousel.html"> API Reference</a>
368373
</li>

0 commit comments

Comments
 (0)