diff --git a/README.md b/README.md index 5381230..db243ca 100644 --- a/README.md +++ b/README.md @@ -45,31 +45,68 @@ Render an `img`-tag with optional `srcset` based on `sizes` or `resolutions`. Props: - `imageSource`: the imageSource to render -- `sizes`: an array with the different widths as keys and the needed media queries as value +- `sizes`: array of the needed media queries for the sizes attribute (if no width is given the keys are used as widths) +- `widths`: array of image-widths that shall be rendered (if no `sizes` but are given `sizes="100vw"` is assumed) - `resolutions`: an array of numbers that represents the needed resolutions - `alt`: alt-attribute for the tag - `title`: title attribute for the tag -Image with srcset in multiple resolutions: +#### Image with srcset in multiple resolutions: ``` imageSource = Sitegeist.Kaleidoscope:DummyImageSource -resolutions = ${[1,1.5,2]} +resolutions = ${[1,2,3]} renderer = afx` ` ``` +will render as: -Image with srcset in multiple sizes: +``` + +``` + +#### Image with srcset in multiple sizes: + +``` +imageSource = Sitegeist.Kaleidoscope:DummyImageSource +widths = ${[320, 400, 600, 800, 1000, 1200, 1600]} +sizes = Neos.Fusion:RawArray { + large = '(min-width: 800px) 1000px' + medium = '(min-width: 480px) 800px' + small = '(min-width: 320px) 440px' + default = '100vw' +} + +renderer = afx` + +` +``` + +will render as: + +``` + +``` + +If the sizes map 1:1 to the different widths the the syntax can be simplified by +using the keys of sizes as width definitions. + +Attention: The keys are sorted in this case so make sure to define the smaller breakpoints at start. ``` imageSource = Sitegeist.Kaleidoscope:DummyImageSource sizes = Neos.Fusion:RawArray { - 320 = '(max-width: 320px) 280px' - 480 = '(max-width: 480px) 440px' - 800 = '800px' + 280 = '(max-width: 280px) 280px' + 440 = '(max-width: 480px) 440px' + 800 = '(max-width: 800px) 800px' + 1000 = '100vw' } renderer = afx` @@ -77,39 +114,40 @@ renderer = afx` ` ``` -Note: If sizes and resolutions are passed only sizes are rendered. If neither is passed the whole srcset is omitted and only the src-attribute is rendered. +Note: `widths` and / or `sizes are preferred to `resolutions`. If neither is passed the whole `srcset is omitted and only the `src`-attribute is rendered. ### `Sitegeist.Kaleidoscope:Picture` - +` Render a `picture`-tag with various sources. Props: - `imageSource`: the imageSource to render -- `sources`: an array of source definitions that contains. Each item contains the keys `media`, `sizes` or `resolutions` and an optional `imageSource` +- `sources`: an array of source definitions that contains. Each item contains the keys `media`, `sizes`, `widths` or `resolutions` and an optional `imageSource` +- `sizes`: array of the needed media queries for the sizes attribute of the default image +- `widths`: array of image-widths that shall be rendered for the default image +- `resolutions`: an array of numbers that represents the needed resolutions for the default image - `alt`: alt-attribute for the tag - `title`: title attribute for the tag ``` imageSource = Sitegeist.Kaleidoscope:DummyImageSource sources = Neos.Fusion:RawArray { - # multires variant for large device - 1 = Neos.Fusion:RawArray { + large = Neos.Fusion:RawArray { resolutions = ${[1, 1.5, 2]} media = 'screen and (min-width: 1600px)' } - # multisize variant that is based on tha main imageSource - 2 = Neos.Fusion:RawArray { + small = Neos.Fusion:RawArray { + widths = ${[320,480,800]} sizes = Neos.Fusion:RawArray { - 320 = '(max-width: 320px) 280px' - 480 = '(max-width: 480px) 440px' - 800 = '800px' + small = '(max-width: 320px) 280px' + medium = '(max-width: 480px) 440px' + large = '100vw' } media = 'screen and (max-width: 1599px)' } - # special source for printing - 3 = Neos.Fusion:RawArray { + print = Neos.Fusion:RawArray { imageSource = Sitegeist.Kaleidoscope:DummyImageSource { text = "im am here for printing" } @@ -122,6 +160,27 @@ renderer = afx` ` ``` +will render as: + +``` + + + + + + +``` + ## Responsive Images with AtomicFusion-Components and Sitegeist.Monocle ``` diff --git a/Resources/Private/Fusion/Prototypes/Image.fusion b/Resources/Private/Fusion/Prototypes/Image.fusion index 97c560a..7fc9301 100644 --- a/Resources/Private/Fusion/Prototypes/Image.fusion +++ b/Resources/Private/Fusion/Prototypes/Image.fusion @@ -11,12 +11,25 @@ prototype(Sitegeist.Kaleidoscope:Image) < prototype(Neos.Fusion:Component) { resolutions = ${[1, 1.5, 2]} } multisize { + widths = ${[320, 400, 600, 800, 1000, 1200, 1600]} sizes = Neos.Fusion:RawArray { - 320 = '(max-width: 320px) 280px' - 480 = '(max-width: 480px) 440px' - 800 = '800px' + large = '(min-width: 800px) 1000px' + medium = '(min-width: 480px) 800px' + small = '(min-width: 320px) 440px' + default = '100vw' } } + multisize_sizeOnly { + sizes = Neos.Fusion:RawArray { + 1000 = '(min-width: 800px) 1000px' + 800 = '(min-width: 480px) 800px' + 440 = '(min-width: 320px) 440px' + 280 = '100vw' + } + } + multisize_widthOnly { + widths = ${[320, 400, 600, 800, 1000, 1200, 1600]} + } } } @@ -26,6 +39,7 @@ prototype(Sitegeist.Kaleidoscope:Image) < prototype(Neos.Fusion:Component) { imageSource = null sizes = null + widths = null resolutions = null alt = null title = null @@ -33,8 +47,8 @@ prototype(Sitegeist.Kaleidoscope:Image) < prototype(Neos.Fusion:Component) { renderer = afx` {props.alt} diff --git a/Resources/Private/Fusion/Prototypes/Picture.fusion b/Resources/Private/Fusion/Prototypes/Picture.fusion index fc6bd59..b958aa9 100644 --- a/Resources/Private/Fusion/Prototypes/Picture.fusion +++ b/Resources/Private/Fusion/Prototypes/Picture.fusion @@ -9,10 +9,11 @@ prototype(Sitegeist.Kaleidoscope:Picture) < prototype(Neos.Fusion:Component) { media = 'screen and (min-width: 1600px)' } 2 = Neos.Fusion:RawArray { + widths = ${[320, 480, 800, 1000]} sizes = Neos.Fusion:RawArray { - 320 = '(max-width: 320px) 280px' - 480 = '(max-width: 480px) 440px' - 800 = '800px' + small = '(max-width: 320px) 280px' + medium = '(max-width: 480px) 440px' + large = '800px' } media = 'screen and (max-width: 1599px)' } @@ -28,6 +29,9 @@ prototype(Sitegeist.Kaleidoscope:Picture) < prototype(Neos.Fusion:Component) { } imageSource = Sitegeist.Kaleidoscope:DummyImageSource + sizes = null + widths = null + resolutions = null sources = null alt = null title = null @@ -43,23 +47,26 @@ prototype(Sitegeist.Kaleidoscope:Picture) < prototype(Neos.Fusion:Component) { media={source.media} /> - {props.alt}