Svelte-datocms
Progressive/responsive image component
<Image />
is a Svelte component specially designed to work seamlessly with DatoCMS’s responsiveImage
GraphQL query that optimizes image loading for your sites.
This is a port to Svelte from react version.
Props
prop | type | required | description | default |
---|---|---|---|---|
data |
ResponsiveImage object |
The actual response you get from a DatoCMS responsiveImage GraphQL query. |
||
fadeInDuration | integer | Duration (in ms) of the fade-in transition effect upoad image loading | 500 | |
intersectionThreshold | float | Indicate at what percentage of the placeholder visibility the loading of the image should be triggered. A value of 0 means that as soon as even one pixel is visible, the callback will be run. A value of 1.0 means that the threshold isn't | 0 | |
lazyLoad | Boolean | Wheter enable lazy loading or not | true | |
explicitWidth | Boolean | Wheter the image wrapper should explicitely declare the width of the image or keep it fluid | false |
ResponsiveImage
object
The The data
prop expects an object with the same shape as the one returned by responsiveImage
GraphQL call. It's up to you to make a GraphQL query that will return the properties you need for a specific use of the <Image>
component.
- The minimum required properties for
data
are:aspectRatio
,width
,sizes
,srcSet
andsrc
; -
alt
andtitle
, while not mandatory, are all highly suggested, so remember to use them! - You either want to add the
webpSrcSet
field or specify{ auto: format }
in yourimgixParams
, to automatically use WebP images in browsers that support the format; - If you provide both the
bgColor
andbase64
property, the latter will take precedence, so just avoiding querying both fields at the same time, it will only make the response bigger😉
Here's a complete recap of what responsiveImage
offers:
property | type | required | description |
---|---|---|---|
aspectRatio | float | The aspect ratio (width/height) of the image | |
width | integer | The width of the image | |
height | integer | The height of the image | |
sizes | string | The HTML5 sizes attribute for the image |
|
srcSet | string | The HTML5 srcSet attribute for the image |
|
src | string | The fallback src attribute for the image |
|
webpSrcSet | string | The HTML5 srcSet attribute for the image in WebP format, for browsers that support the format |
|
alt | string | Alternate text (alt ) for the image |
|
title | string | Title attribute (title ) for the image |
|
bgColor | string | The background color for the image placeholder | |
base64 | string | A base64-encoded thumbnail to offer during image loading |
Blurhash Component
<Blurhash/>
is a Svelte component to display an image placeholder from blurhash string.
Props
prop | type | required | description | default |
---|---|---|---|---|
hash | string | blurhash string of the image | ||
width | number | x resolution of the drawed canvas | 32 | |
height | number | x resolution of the drawed canvas | 32 | |
punch | number | punch is intesivity of the color effect after decoding | 1 |
More coming soon...
Contributing
Contributions are always welcome!