Image
draft
Image for components.
<picture class="nbhd-picture nbhd-fluid ">
<source media="(min-width: 1024px)" type="image/webp" srcset="https://moen.widen.net/content/qvmrvyj220/webp/smartsprinkler-controller-app-campaignslider.webp?=90&w=584&retina=true">
<source media="(min-width: 1024px)" type="image/jpeg" srcset="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&w=584&retina=true">
<source media="(min-width: 768px)" type="image/webp" srcset="https://moen.widen.net/content/qvmrvyj220/webp/smartsprinkler-controller-app-campaignslider.webp?=90&w=628&retina=true">
<source media="(min-width: 768px)" type="image/jpeg" srcset="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&w=628&retina=true">
<source media="(max-width: 767px)" type="image/webp" srcset="https://moen.widen.net/content/qvmrvyj220/webp/smartsprinkler-controller-app-campaignslider.webp?=90&w=274&retina=true">
<source media="(max-width: 767px)" type="image/jpeg" srcset="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&w=274&retina=true">
<img class="nbhd-image nbhd-fluid" src="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&w=274&retina=true" alt="Alternative Text for image." loading="lazy" >
</picture>Element Properties
| Name | Type | Default | Description |
|---|---|---|---|
| mediaSource |
object
|
Video or Image from Widen. | |
| cssClass |
string
|
Additional CSS class(es). | |
| altText |
string
|
Alternative text for media. | |
| smallImageWidth |
string
|
274
|
Image width at small breakpoint. |
| mediumImageWidth |
string
|
628
|
Image width at medium breakpoint. |
| largeImageWidth |
string
|
584
|
Image width at large breakpoint. |
| smallImageHeight |
string
|
auto
|
Image height at small breakpoint. |
| mediumImageHeight |
string
|
auto
|
Image height at medium breakpoint. |
| largeImageHeight |
string
|
auto
|
Image height at large breakpoint. |
| ImageHeight |
string
|
auto
|
Image height when imageNotResponsive is enabled.
|
| ImageWidth |
string
|
auto
|
Image width when imageNotResponsive is enabled.
|
| breakpointSmall |
string
|
767px
|
Breakpoint set for small screen and set to a max-width. |
| breakpointMedium |
string
|
768px
|
Breakpoint set for medium screen and set to a min-width. |
| breakpointLarge |
string
|
1024px
|
Breakpoint set for large screen and set to a min-width. |
| imageQuality |
string
|
90
|
The quality parameter to render the image from Widen. |
| imageNotResponsive |
boolean
|
false
|
When enabled the image will not contain breakpoint sources. |