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