...
How to use in the frontend
Using PropertyFor
| Code Block |
|---|
@Html.PropertyFor(m => Model.CurrentPage.ImageAsContentReference) |
Output
| Code Block |
|---|
<img alt="image01.jpg" src="/globalassets/fotoware/2024/6/image01.jpg" /> |
Adding a HTML attribute
| Code Block |
|---|
@Html.PropertyFor(x => Model.CurrentPage.ContentReferenceOptimizely, new { Attributes = new { @class = "fotoware-image" } }) |
Output
| Code Block |
|---|
<img alt="image01.jpg" class="fotoware-image" src="/globalassets/fotoware/2024/6/image01.jpg"> |
Adding a query string
| Code Block |
|---|
@Html.PropertyFor(x => Model.CurrentPage.ContentReferenceOptimizely, new { QueryStrings = new { format = "webp" } }) |
Output
| Code Block |
|---|
<img alt="image01.jpg" src="/globalassets/fotoware/2024/6/image01.jpg?format=webp"> |
Adding query parameters
| Code Block |
|---|
@Html.PropertyFor(x => Model.CurrentPage.ContentReferenceOptimizely, new { QueryParameters = "format=webp&quality=80" }) |
Output
| Code Block |
|---|
<img alt="image01.jpg" src="/globalassets/fotoware/2024/6/image01.jpg?format=webp&quality=80"> |
Use CDN URL
| Code Block |
|---|
@Html.PropertyFor(x => Model.CurrentPage.ContentReferenceOptimizely, new { MediaOptions = new { UseCdnUrl = true } }) |
Output
| Code Block |
|---|
<img alt="image01.jpg" src="https://optimizely.preview-picturepark.com/v/TBVACNY3/"> |
Use CDN URL with the specified width
| Code Block |
|---|
@Html.PropertyFor(x => Model.CurrentPage.ContentReferenceOptimizely, new { MediaOptions = new { Width = 600, UseCdnUrl = true } }) |
| Code Block |
|---|
Output |
...
<img alt="image01.jpg" src="https://optimizely.preview-picturepark.com/v/TBVACNY3/fit-in:600x100000"> |