diff --git a/source/00-config/storybook.global-data.yml b/source/00-config/storybook.global-data.yml index c999e521..f0e6dec5 100644 --- a/source/00-config/storybook.global-data.yml +++ b/source/00-config/storybook.global-data.yml @@ -16,11 +16,271 @@ url: '#0' file_name: 'File name' file_mime: 'application/pdf' file_size: '115.83 KB' +responsive_image_gutters: '2rem' img_thumbnail: - src: 'http://fpoimg.com/140x105?text=Thumbnail 4:3' - alt: 'Thumbnail 4:3' - height: '105' - width: '140' + src: 'http://fpoimg.com/96x96?text=Thumbnail' + alt: 'Thumbnail' + height: '96' + width: '96' + responsive: + 1: + src: 'https://fpoimg.com/192x192?text=Thumbnail' + width: '192' + 2: + src: 'https://fpoimg.com/288x288?text=Thumbnail' + width: '288' +img_thumbnail_16x9: + src: 'https://fpoimg.com/96x54?text=Thumbnail%2016:9' + alt: 'Thumbnail' + height: '54' + width: '96' + responsive: + 1: + src: 'https://fpoimg.com/192x108?text=Thumbnail%2016:9' + width: '192' + 2: + src: 'https://fpoimg.com/288x162?text=Thumbnail%2016:9' + width: '288' +img_thumbnail_4x3: + src: 'https://fpoimg.com/96x72?text=Thumbnail%204:3' + alt: 'Thumbnail' + height: '72' + width: '96' + responsive: + 1: + src: 'https://fpoimg.com/192x144?text=Thumbnail%204:3' + width: '192' + 2: + src: 'https://fpoimg.com/288x216?text=Thumbnail%204:3' + width: '288' +img_thumbnail_3x4: + src: 'https://fpoimg.com/96x128?text=Thumbnail%203:4' + alt: 'Thumbnail' + height: '128' + width: '96' + responsive: + 1: + src: 'https://fpoimg.com/192x256?text=Thumbnail%203:4' + width: '192' + 2: + src: 'https://fpoimg.com/288x384?text=Thumbnail%203:4' + width: '288' +img_small: + src: 'http://fpoimg.com/192x192?text=Small' + alt: 'Small' + height: '192' + width: '192' + responsive: + 1: + src: 'https://fpoimg.com/384x384?text=Small' + width: '384' + 2: + src: 'https://fpoimg.com/576x576?text=Small' + width: '576' +img_small_16x9: + src: 'https://fpoimg.com/192x108?text=Small%2016:9' + alt: 'Small' + height: '108' + width: '192' + responsive: + 1: + src: 'https://fpoimg.com/384x216?text=Small%2016:9' + width: '384' + 2: + src: 'https://fpoimg.com/576x324?text=Small%2016:9' + width: '576' +img_small_4x3: + src: 'https://fpoimg.com/192x144?text=Small%204:3' + alt: 'Small' + height: '72' + width: '192' + responsive: + 1: + src: 'https://fpoimg.com/384x288?text=Small%204:3' + width: '384' + 2: + src: 'https://fpoimg.com/576x432?text=Small%204:3' + width: '576' +img_small_3x4: + src: 'https://fpoimg.com/192x256?text=Small%203:4' + alt: 'Small' + height: '128' + width: '192' + responsive: + 1: + src: 'https://fpoimg.com/384x512?text=Small%203:4' + width: '384' + 2: + src: 'https://fpoimg.com/576x768?text=Small%203:4' + width: '576' +img_medium: + src: 'http://fpoimg.com/384x384?text=Medium' + alt: 'Medium' + height: '384' + width: '384' + responsive: + 1: + src: 'https://fpoimg.com/288x288?text=Medium' + width: '288' + 2: + src: 'https://fpoimg.com/576x576?text=Medium' + width: '576' + 3: + src: 'https://fpoimg.com/768x768?text=Medium' + width: '768' + 4: + src: 'https://fpoimg.com/1152x1152?text=Medium' + width: '1152' +img_medium_16x9: + src: 'https://fpoimg.com/384x216?text=Medium%2016:9' + alt: 'Medium' + height: '216' + width: '384' + responsive: + 1: + src: 'https://fpoimg.com/288x162?text=Medium%2016:9' + width: '288' + 2: + src: 'https://fpoimg.com/576x324?text=Medium%2016:9' + width: '576' + 3: + src: 'https://fpoimg.com/768x432?text=Medium%2016:9' + width: '768' + 4: + src: 'https://fpoimg.com/1152x648?text=Medium%2016:9' + width: '1152' +img_medium_4x3: + src: 'https://fpoimg.com/384x288?text=Medium%204:3' + alt: 'Medium' + height: '288' + width: '384' + responsive: + 1: + src: 'https://fpoimg.com/288x216?text=Medium%204:3' + width: '288' + 2: + src: 'https://fpoimg.com/576x432?text=Medium%204:3' + width: '576' + 3: + src: 'https://fpoimg.com/768x576?text=Medium%204:3' + width: '768' + 4: + src: 'https://fpoimg.com/1152x864?text=Medium%204:3' + width: '1152' +img_medium_3x4: + src: 'https://fpoimg.com/384x512?text=Medium%203:4' + alt: 'Medium' + height: '512' + width: '384' + responsive: + 1: + src: 'https://fpoimg.com/288x384?text=Medium%203:4' + width: '288' + 2: + src: 'https://fpoimg.com/576x768?text=Medium%203:4' + width: '576' + 3: + src: 'https://fpoimg.com/768x1024?text=Medium%203:4' + width: '768' + 4: + src: 'https://fpoimg.com/1152x1536?text=Medium%203:4' + width: '1152' +img_large: + src: 'http://fpoimg.com/768x768?text=Large' + alt: 'Large' + height: '768' + width: '768' + responsive: + 1: + src: 'https://fpoimg.com/288x288?text=Large' + width: '288' + 2: + src: 'https://fpoimg.com/384x384?text=Large' + width: '384' + 3: + src: 'https://fpoimg.com/576x576?text=Large' + width: '576' + 4: + src: 'https://fpoimg.com/1152x1152?text=Large' + width: '1152' + 5: + src: 'https://fpoimg.com/1536x1536?text=Large' + width: '1536' + 6: + src: 'https://fpoimg.com/2304x2304?text=Large' + width: '2304' +img_large_16x9: + src: 'https://fpoimg.com/768x432?text=Large%2016:9' + alt: 'Large' + height: '432' + width: '768' + responsive: + 1: + src: 'https://fpoimg.com/288x162?text=Large%2016:9' + width: '288' + 2: + src: 'https://fpoimg.com/384x216?text=Large%2016:9' + width: '384' + 3: + src: 'https://fpoimg.com/576x324?text=Large%2016:9' + width: '576' + 4: + src: 'https://fpoimg.com/1152x648?text=Large%2016:9' + width: '1152' + 5: + src: 'https://fpoimg.com/1536x864?text=Large%2016:9' + width: '1536' + 6: + src: 'https://fpoimg.com/2304x1296?text=Large%2016:9' + width: '2304' +img_large_4x3: + src: 'https://fpoimg.com/768x576?text=Large%204:3' + alt: 'Large' + height: '576' + width: '768' + responsive: + 1: + src: 'https://fpoimg.com/288x216?text=Large%204:3' + width: '288' + 2: + src: 'https://fpoimg.com/384x288?text=Large%204:3' + width: '384' + 3: + src: 'https://fpoimg.com/576x432?text=Large%204:3' + width: '576' + 4: + src: 'https://fpoimg.com/1152x864?text=Large%204:3' + width: '1152' + 5: + src: 'https://fpoimg.com/1536x1152?text=Large%204:3' + width: '1536' + 6: + src: 'https://fpoimg.com/2304x1728?text=Large%204:3' + width: '2304' +img_large_3x4: + src: 'https://fpoimg.com/768x1024?text=Large%203:4' + alt: 'Large' + height: '1024' + width: '768' + responsive: + 1: + src: 'https://fpoimg.com/288x384?text=Large%203:4' + width: '288' + 2: + src: 'https://fpoimg.com/384x512?text=Large%203:4' + width: '384' + 3: + src: 'https://fpoimg.com/576x768?text=Large%203:4' + width: '576' + 4: + src: 'https://fpoimg.com/1152x1536?text=Large%203:4' + width: '1152' + 5: + src: 'https://fpoimg.com/1536x2048?text=Large%203:4' + width: '1536' + 6: + src: 'https://fpoimg.com/2304x3072?text=Large%203:4' + width: '2304' img_hero: src: 'http://fpoimg.com/1600x800?text=Hero 2:1' alt: 'Hero 2:1' diff --git a/source/01-global/images/_responsive-image.twig b/source/01-global/images/_responsive-image.twig new file mode 100644 index 00000000..d2683cef --- /dev/null +++ b/source/01-global/images/_responsive-image.twig @@ -0,0 +1,7 @@ +{{ image_alt }} diff --git a/source/01-global/images/large-image-16x9.twig b/source/01-global/images/large-image-16x9.twig new file mode 100644 index 00000000..06050d29 --- /dev/null +++ b/source/01-global/images/large-image-16x9.twig @@ -0,0 +1,15 @@ +{% extends "@global/images/large-image.twig" %} + +{% set image_src = img_large_16x9.src %} +{% set image_alt = img_large_16x9.alt %} +{% set image_height = img_large_16x9.height %} +{% set image_width = img_large_16x9.width %} +{% set image_srcset -%} + {{ img_large_16x9.responsive.1.src }} {{ img_large_16x9.responsive.1.width }}w, + {{ img_large_16x9.responsive.2.src }} {{ img_large_16x9.responsive.2.width }}w, + {{ img_large_16x9.responsive.3.src }} {{ img_large_16x9.responsive.3.width }}w, + {{ img_large_16x9.src }} {{ img_large_16x9.width }}w, + {{ img_large_16x9.responsive.4.src }} {{ img_large_16x9.responsive.4.width }}w, + {{ img_large_16x9.responsive.5.src }} {{ img_large_16x9.responsive.5.width }}w, + {{ img_large_16x9.responsive.6.src }} {{ img_large_16x9.responsive.6.width }}w +{%- endset %} diff --git a/source/01-global/images/large-image-3x4.twig b/source/01-global/images/large-image-3x4.twig new file mode 100644 index 00000000..bd6c98a0 --- /dev/null +++ b/source/01-global/images/large-image-3x4.twig @@ -0,0 +1,15 @@ +{% extends "@global/images/large-image.twig" %} + +{% set image_src = img_large_3x4.src %} +{% set image_alt = img_large_3x4.alt %} +{% set image_height = img_large_3x4.height %} +{% set image_width = img_large_3x4.width %} +{% set image_srcset -%} + {{ img_large_3x4.responsive.1.src }} {{ img_large_3x4.responsive.1.width }}w, + {{ img_large_3x4.responsive.2.src }} {{ img_large_3x4.responsive.2.width }}w, + {{ img_large_3x4.responsive.3.src }} {{ img_large_3x4.responsive.3.width }}w, + {{ img_large_3x4.src }} {{ img_large_3x4.width }}w, + {{ img_large_3x4.responsive.4.src }} {{ img_large_3x4.responsive.4.width }}w, + {{ img_large_3x4.responsive.5.src }} {{ img_large_3x4.responsive.5.width }}w, + {{ img_large_3x4.responsive.6.src }} {{ img_large_3x4.responsive.6.width }}w +{%- endset %} diff --git a/source/01-global/images/large-image-4x3.twig b/source/01-global/images/large-image-4x3.twig new file mode 100644 index 00000000..c8963932 --- /dev/null +++ b/source/01-global/images/large-image-4x3.twig @@ -0,0 +1,15 @@ +{% extends "@global/images/large-image.twig" %} + +{% set image_src = img_large_4x3.src %} +{% set image_alt = img_large_4x3.alt %} +{% set image_height = img_large_4x3.height %} +{% set image_width = img_large_4x3.width %} +{% set image_srcset -%} + {{ img_large_4x3.responsive.1.src }} {{ img_large_4x3.responsive.1.width }}w, + {{ img_large_4x3.responsive.2.src }} {{ img_large_4x3.responsive.2.width }}w, + {{ img_large_4x3.responsive.3.src }} {{ img_large_4x3.responsive.3.width }}w, + {{ img_large_4x3.src }} {{ img_large_4x3.width }}w, + {{ img_large_4x3.responsive.4.src }} {{ img_large_4x3.responsive.4.width }}w, + {{ img_large_4x3.responsive.5.src }} {{ img_large_4x3.responsive.5.width }}w, + {{ img_large_4x3.responsive.6.src }} {{ img_large_4x3.responsive.6.width }}w +{%- endset %} diff --git a/source/01-global/images/large-image.stories.jsx b/source/01-global/images/large-image.stories.jsx new file mode 100644 index 00000000..26da242f --- /dev/null +++ b/source/01-global/images/large-image.stories.jsx @@ -0,0 +1,41 @@ +import parse from 'html-react-parser'; + +import { withGlobalWrapper } from '../../../.storybook/decorators'; +import defaultTemplate from './large-image.twig'; +import ratio16x9Template from './large-image-16x9.twig'; +import ratio4x3Template from './large-image-4x3.twig'; +import ratio3x4Template from './large-image-3x4.twig'; +import globalData from '../../00-config/storybook.global-data.yml'; + +const settings = { + title: 'Global/Responsive Images/Large Image', + decorators: [withGlobalWrapper], + parameters: { + controls: { + include: ['modifier_classes'], + }, + }, +}; + +const Default = { + render: args => parse(defaultTemplate(args)), + args: { ...globalData }, +}; + +const Ratio16x9 = { + render: args => parse(ratio16x9Template(args)), + args: { ...globalData }, +}; + +const Ratio4x3 = { + render: args => parse(ratio4x3Template(args)), + args: { ...globalData }, +}; + +const Ratio3x4 = { + render: args => parse(ratio3x4Template(args)), + args: { ...globalData }, +}; + +export default settings; +export { Default, Ratio16x9, Ratio4x3, Ratio3x4 }; diff --git a/source/01-global/images/large-image.twig b/source/01-global/images/large-image.twig new file mode 100644 index 00000000..98a94a9f --- /dev/null +++ b/source/01-global/images/large-image.twig @@ -0,0 +1,35 @@ +{% extends "@global/images/_responsive-image.twig" %} + +{% if image_src is empty %} + {% set image_src = img_large.src %} +{% endif %} + +{% if image_alt is empty %} + {% set image_alt = img_large.alt %} +{% endif %} + +{% if image_height is empty %} + {% set image_height = img_large.height %} +{% endif %} + +{% if image_width is empty %} + {% set image_width = img_large.width %} +{% endif %} + +{% if image_sizes is empty %} + {% set image_sizes -%} + min(calc(100vw - {{ responsive_image_gutters }}), {{ img_large.width }}px) + {%- endset %} +{% endif %} + +{% if image_srcset is empty %} + {% set image_srcset -%} + {{ img_large.responsive.1.src }} {{ img_large.responsive.1.width }}w, + {{ img_large.responsive.2.src }} {{ img_large.responsive.2.width }}w, + {{ img_large.responsive.3.src }} {{ img_large.responsive.3.width }}w, + {{ img_large.src }} {{ img_large.width }}w, + {{ img_large.responsive.4.src }} {{ img_large.responsive.4.width }}w, + {{ img_large.responsive.5.src }} {{ img_large.responsive.5.width }}w, + {{ img_large.responsive.6.src }} {{ img_large.responsive.6.width }}w + {%- endset %} +{% endif %} diff --git a/source/01-global/images/medium-image-16x9.twig b/source/01-global/images/medium-image-16x9.twig new file mode 100644 index 00000000..c38cb0e3 --- /dev/null +++ b/source/01-global/images/medium-image-16x9.twig @@ -0,0 +1,13 @@ +{% extends "@global/images/medium-image.twig" %} + +{% set image_src = img_medium_16x9.src %} +{% set image_alt = img_medium_16x9.alt %} +{% set image_height = img_medium_16x9.height %} +{% set image_width = img_medium_16x9.width %} +{% set image_srcset -%} + {{ img_medium_16x9.responsive.1.src }} {{ img_medium_16x9.responsive.1.width }}w, + {{ img_medium_16x9.src }} {{ img_medium_16x9.width }}w, + {{ img_medium_16x9.responsive.2.src }} {{ img_medium_16x9.responsive.2.width }}w, + {{ img_medium_16x9.responsive.3.src }} {{ img_medium_16x9.responsive.3.width }}w, + {{ img_medium_16x9.responsive.4.src }} {{ img_medium_16x9.responsive.4.width }}w +{%- endset %} diff --git a/source/01-global/images/medium-image-3x4.twig b/source/01-global/images/medium-image-3x4.twig new file mode 100644 index 00000000..cd44d931 --- /dev/null +++ b/source/01-global/images/medium-image-3x4.twig @@ -0,0 +1,13 @@ +{% extends "@global/images/medium-image.twig" %} + +{% set image_src = img_medium_3x4.src %} +{% set image_alt = img_medium_3x4.alt %} +{% set image_height = img_medium_3x4.height %} +{% set image_width = img_medium_3x4.width %} +{% set image_srcset -%} + {{ img_medium_3x4.responsive.1.src }} {{ img_medium_3x4.responsive.1.width }}w, + {{ img_medium_3x4.src }} {{ img_medium_3x4.width }}w, + {{ img_medium_3x4.responsive.2.src }} {{ img_medium_3x4.responsive.2.width }}w, + {{ img_medium_3x4.responsive.3.src }} {{ img_medium_3x4.responsive.3.width }}w, + {{ img_medium_3x4.responsive.4.src }} {{ img_medium_3x4.responsive.4.width }}w +{%- endset %} diff --git a/source/01-global/images/medium-image-4x3.twig b/source/01-global/images/medium-image-4x3.twig new file mode 100644 index 00000000..d5d55875 --- /dev/null +++ b/source/01-global/images/medium-image-4x3.twig @@ -0,0 +1,13 @@ +{% extends "@global/images/medium-image.twig" %} + +{% set image_src = img_medium_4x3.src %} +{% set image_alt = img_medium_4x3.alt %} +{% set image_height = img_medium_4x3.height %} +{% set image_width = img_medium_4x3.width %} +{% set image_srcset -%} + {{ img_medium_4x3.responsive.1.src }} {{ img_medium_4x3.responsive.1.width }}w, + {{ img_medium_4x3.src }} {{ img_medium_4x3.width }}w, + {{ img_medium_4x3.responsive.2.src }} {{ img_medium_4x3.responsive.2.width }}w, + {{ img_medium_4x3.responsive.3.src }} {{ img_medium_4x3.responsive.3.width }}w, + {{ img_medium_4x3.responsive.4.src }} {{ img_medium_4x3.responsive.4.width }}w +{%- endset %} diff --git a/source/01-global/images/medium-image.stories.jsx b/source/01-global/images/medium-image.stories.jsx new file mode 100644 index 00000000..629f4faf --- /dev/null +++ b/source/01-global/images/medium-image.stories.jsx @@ -0,0 +1,41 @@ +import parse from 'html-react-parser'; + +import { withGlobalWrapper } from '../../../.storybook/decorators'; +import defaultTemplate from './medium-image.twig'; +import ratio16x9Template from './medium-image-16x9.twig'; +import ratio4x3Template from './medium-image-4x3.twig'; +import ratio3x4Template from './medium-image-3x4.twig'; +import globalData from '../../00-config/storybook.global-data.yml'; + +const settings = { + title: 'Global/Responsive Images/Medium Image', + decorators: [withGlobalWrapper], + parameters: { + controls: { + include: ['modifier_classes'], + }, + }, +}; + +const Default = { + render: args => parse(defaultTemplate(args)), + args: { ...globalData }, +}; + +const Ratio16x9 = { + render: args => parse(ratio16x9Template(args)), + args: { ...globalData }, +}; + +const Ratio4x3 = { + render: args => parse(ratio4x3Template(args)), + args: { ...globalData }, +}; + +const Ratio3x4 = { + render: args => parse(ratio3x4Template(args)), + args: { ...globalData }, +}; + +export default settings; +export { Default, Ratio16x9, Ratio4x3, Ratio3x4 }; diff --git a/source/01-global/images/medium-image.twig b/source/01-global/images/medium-image.twig new file mode 100644 index 00000000..90912b89 --- /dev/null +++ b/source/01-global/images/medium-image.twig @@ -0,0 +1,33 @@ +{% extends "@global/images/_responsive-image.twig" %} + +{% if image_src is empty %} + {% set image_src = img_medium.src %} +{% endif %} + +{% if image_alt is empty %} + {% set image_alt = img_medium.alt %} +{% endif %} + +{% if image_height is empty %} + {% set image_height = img_medium.height %} +{% endif %} + +{% if image_width is empty %} + {% set image_width = img_medium.width %} +{% endif %} + +{% if image_sizes is empty %} + {% set image_sizes -%} + min(calc(100vw - {{ responsive_image_gutters }}), {{ img_medium.width }}px) + {%- endset %} +{% endif %} + +{% if image_srcset is empty %} + {% set image_srcset -%} + {{ img_medium.responsive.1.src }} {{ img_medium.responsive.1.width }}w, + {{ img_medium.src }} {{ img_medium.width }}w, + {{ img_medium.responsive.2.src }} {{ img_medium.responsive.2.width }}w, + {{ img_medium.responsive.3.src }} {{ img_medium.responsive.3.width }}w, + {{ img_medium.responsive.4.src }} {{ img_medium.responsive.4.width }}w + {%- endset %} +{% endif %} diff --git a/source/01-global/images/small-image-16x9.twig b/source/01-global/images/small-image-16x9.twig new file mode 100644 index 00000000..41b14d4c --- /dev/null +++ b/source/01-global/images/small-image-16x9.twig @@ -0,0 +1,11 @@ +{% extends "@global/images/small-image.twig" %} + +{% set image_src = img_small_16x9.src %} +{% set image_alt = img_small_16x9.alt %} +{% set image_height = img_small_16x9.height %} +{% set image_width = img_small_16x9.width %} +{% set image_srcset -%} + {{ img_small_16x9.src }} {{ img_small_16x9.width }}w, + {{ img_small_16x9.responsive.1.src }} {{ img_small_16x9.responsive.1.width }}w, + {{ img_small_16x9.responsive.2.src }} {{ img_small_16x9.responsive.2.width }}w +{%- endset %} diff --git a/source/01-global/images/small-image-3x4.twig b/source/01-global/images/small-image-3x4.twig new file mode 100644 index 00000000..865ec8ac --- /dev/null +++ b/source/01-global/images/small-image-3x4.twig @@ -0,0 +1,11 @@ +{% extends "@global/images/small-image.twig" %} + +{% set image_src = img_small_3x4.src %} +{% set image_alt = img_small_3x4.alt %} +{% set image_height = img_small_3x4.height %} +{% set image_width = img_small_3x4.width %} +{% set image_srcset -%} + {{ img_small_3x4.src }} {{ img_small_3x4.width }}w, + {{ img_small_3x4.responsive.1.src }} {{ img_small_3x4.responsive.1.width }}w, + {{ img_small_3x4.responsive.2.src }} {{ img_small_3x4.responsive.2.width }}w +{%- endset %} diff --git a/source/01-global/images/small-image-4x3.twig b/source/01-global/images/small-image-4x3.twig new file mode 100644 index 00000000..1cbfd7b4 --- /dev/null +++ b/source/01-global/images/small-image-4x3.twig @@ -0,0 +1,11 @@ +{% extends "@global/images/small-image.twig" %} + +{% set image_src = img_small_4x3.src %} +{% set image_alt = img_small_4x3.alt %} +{% set image_height = img_small_4x3.height %} +{% set image_width = img_small_4x3.width %} +{% set image_srcset -%} + {{ img_small_4x3.src }} {{ img_small_4x3.width }}w, + {{ img_small_4x3.responsive.1.src }} {{ img_small_4x3.responsive.1.width }}w, + {{ img_small_4x3.responsive.2.src }} {{ img_small_4x3.responsive.2.width }}w +{%- endset %} diff --git a/source/01-global/images/small-image.stories.jsx b/source/01-global/images/small-image.stories.jsx new file mode 100644 index 00000000..c8967821 --- /dev/null +++ b/source/01-global/images/small-image.stories.jsx @@ -0,0 +1,41 @@ +import parse from 'html-react-parser'; + +import { withGlobalWrapper } from '../../../.storybook/decorators'; +import defaultTemplate from './small-image.twig'; +import ratio16x9Template from './small-image-16x9.twig'; +import ratio4x3Template from './small-image-4x3.twig'; +import ratio3x4Template from './small-image-3x4.twig'; +import globalData from '../../00-config/storybook.global-data.yml'; + +const settings = { + title: 'Global/Responsive Images/Small Image', + decorators: [withGlobalWrapper], + parameters: { + controls: { + include: ['modifier_classes'], + }, + }, +}; + +const Default = { + render: args => parse(defaultTemplate(args)), + args: { ...globalData }, +}; + +const Ratio16x9 = { + render: args => parse(ratio16x9Template(args)), + args: { ...globalData }, +}; + +const Ratio4x3 = { + render: args => parse(ratio4x3Template(args)), + args: { ...globalData }, +}; + +const Ratio3x4 = { + render: args => parse(ratio3x4Template(args)), + args: { ...globalData }, +}; + +export default settings; +export { Default, Ratio16x9, Ratio4x3, Ratio3x4 }; diff --git a/source/01-global/images/small-image.twig b/source/01-global/images/small-image.twig new file mode 100644 index 00000000..002fde10 --- /dev/null +++ b/source/01-global/images/small-image.twig @@ -0,0 +1,31 @@ +{% extends "@global/images/_responsive-image.twig" %} + +{% if image_src is empty %} + {% set image_src = img_small.src %} +{% endif %} + +{% if image_alt is empty %} + {% set image_alt = img_small.alt %} +{% endif %} + +{% if image_height is empty %} + {% set image_height = img_small.height %} +{% endif %} + +{% if image_width is empty %} + {% set image_width = img_small.width %} +{% endif %} + +{% if image_sizes is empty %} + {% set image_sizes -%} + min(calc(100vw - {{ responsive_image_gutters }}), {{ img_small.width }}px) + {%- endset %} +{% endif %} + +{% if image_srcset is empty %} + {% set image_srcset -%} + {{ img_small.src }} {{ img_small.width }}w, + {{ img_small.responsive.1.src }} {{ img_small.responsive.1.width }}w, + {{ img_small.responsive.2.src }} {{ img_small.responsive.2.width }}w + {%- endset %} +{% endif %} diff --git a/source/01-global/images/thumbnail-image-16x9.twig b/source/01-global/images/thumbnail-image-16x9.twig new file mode 100644 index 00000000..32e3b770 --- /dev/null +++ b/source/01-global/images/thumbnail-image-16x9.twig @@ -0,0 +1,11 @@ +{% extends "@global/images/thumbnail-image.twig" %} + +{% set image_src = img_thumbnail_16x9.src %} +{% set image_alt = img_thumbnail_16x9.alt %} +{% set image_height = img_thumbnail_16x9.height %} +{% set image_width = img_thumbnail_16x9.width %} +{% set image_srcset -%} + {{ img_thumbnail_16x9.src }} {{ img_thumbnail_16x9.width }}w, + {{ img_thumbnail_16x9.responsive.1.src }} {{ img_thumbnail_16x9.responsive.1.width }}w, + {{ img_thumbnail_16x9.responsive.2.src }} {{ img_thumbnail_16x9.responsive.2.width }}w +{%- endset %} diff --git a/source/01-global/images/thumbnail-image-3x4.twig b/source/01-global/images/thumbnail-image-3x4.twig new file mode 100644 index 00000000..472eb9cc --- /dev/null +++ b/source/01-global/images/thumbnail-image-3x4.twig @@ -0,0 +1,11 @@ +{% extends "@global/images/thumbnail-image.twig" %} + +{% set image_src = img_thumbnail_3x4.src %} +{% set image_alt = img_thumbnail_3x4.alt %} +{% set image_height = img_thumbnail_3x4.height %} +{% set image_width = img_thumbnail_3x4.width %} +{% set image_srcset -%} + {{ img_thumbnail_3x4.src }} {{ img_thumbnail_3x4.width }}w, + {{ img_thumbnail_3x4.responsive.1.src }} {{ img_thumbnail_3x4.responsive.1.width }}w, + {{ img_thumbnail_3x4.responsive.2.src }} {{ img_thumbnail_3x4.responsive.2.width }}w +{%- endset %} diff --git a/source/01-global/images/thumbnail-image-4x3.twig b/source/01-global/images/thumbnail-image-4x3.twig new file mode 100644 index 00000000..36337817 --- /dev/null +++ b/source/01-global/images/thumbnail-image-4x3.twig @@ -0,0 +1,11 @@ +{% extends "@global/images/thumbnail-image.twig" %} + +{% set image_src = img_thumbnail_4x3.src %} +{% set image_alt = img_thumbnail_4x3.alt %} +{% set image_height = img_thumbnail_4x3.height %} +{% set image_width = img_thumbnail_4x3.width %} +{% set image_srcset -%} + {{ img_thumbnail_4x3.src }} {{ img_thumbnail_4x3.width }}w, + {{ img_thumbnail_4x3.responsive.1.src }} {{ img_thumbnail_4x3.responsive.1.width }}w, + {{ img_thumbnail_4x3.responsive.2.src }} {{ img_thumbnail_4x3.responsive.2.width }}w +{%- endset %} diff --git a/source/01-global/images/thumbnail-image.stories.jsx b/source/01-global/images/thumbnail-image.stories.jsx index 447081e2..27823f68 100644 --- a/source/01-global/images/thumbnail-image.stories.jsx +++ b/source/01-global/images/thumbnail-image.stories.jsx @@ -1,21 +1,41 @@ import parse from 'html-react-parser'; -import twigTemplate from './thumbnail-image.twig'; +import { withGlobalWrapper } from '../../../.storybook/decorators'; +import defaultTemplate from './thumbnail-image.twig'; +import ratio16x9Template from './thumbnail-image-16x9.twig'; +import ratio4x3Template from './thumbnail-image-4x3.twig'; +import ratio3x4Template from './thumbnail-image-3x4.twig'; import globalData from '../../00-config/storybook.global-data.yml'; const settings = { - title: 'Global/Images/Thumbnail Image', + title: 'Global/Responsive Images/Thumbnail Image', + decorators: [withGlobalWrapper], parameters: { controls: { - include: ['img_thumbnail', 'modifier_classes'], + include: ['modifier_classes'], }, }, }; -const ThumbnailImage = { - render: args => parse(twigTemplate(args)), +const Default = { + render: args => parse(defaultTemplate(args)), + args: { ...globalData }, +}; + +const Ratio16x9 = { + render: args => parse(ratio16x9Template(args)), + args: { ...globalData }, +}; + +const Ratio4x3 = { + render: args => parse(ratio4x3Template(args)), + args: { ...globalData }, +}; + +const Ratio3x4 = { + render: args => parse(ratio3x4Template(args)), args: { ...globalData }, }; export default settings; -export { ThumbnailImage }; +export { Default, Ratio16x9, Ratio4x3, Ratio3x4 }; diff --git a/source/01-global/images/thumbnail-image.twig b/source/01-global/images/thumbnail-image.twig index 176e5a51..59c08640 100644 --- a/source/01-global/images/thumbnail-image.twig +++ b/source/01-global/images/thumbnail-image.twig @@ -1 +1,31 @@ -{{ img_thumbnail.alt }} +{% extends "@global/images/_responsive-image.twig" %} + +{% if image_src is empty %} + {% set image_src = img_thumbnail.src %} +{% endif %} + +{% if image_alt is empty %} + {% set image_alt = img_thumbnail.alt %} +{% endif %} + +{% if image_height is empty %} + {% set image_height = img_thumbnail.height %} +{% endif %} + +{% if image_width is empty %} + {% set image_width = img_thumbnail.width %} +{% endif %} + +{% if image_sizes is empty %} + {% set image_sizes -%} + min(calc(100vw - {{ responsive_image_gutters }}), {{ img_thumbnail.width }}px) + {%- endset %} +{% endif %} + +{% if image_srcset is empty %} + {% set image_srcset -%} + {{ img_thumbnail.src }} {{ img_thumbnail.width }}w, + {{ img_thumbnail.responsive.1.src }} {{ img_thumbnail.responsive.1.width }}w, + {{ img_thumbnail.responsive.2.src }} {{ img_thumbnail.responsive.2.width }}w + {%- endset %} +{% endif %} diff --git a/source/02-layouts/media/media.stories.jsx b/source/02-layouts/media/media.stories.jsx index dbe1cf48..bc9d830c 100644 --- a/source/02-layouts/media/media.stories.jsx +++ b/source/02-layouts/media/media.stories.jsx @@ -1,7 +1,9 @@ +import ReactDOMServer from 'react-dom/server'; import parse from 'html-react-parser'; import twigTemplate from './media.twig'; import data from './media.yml'; +import { Ratio4x3 as SmallImage } from '../../01-global/images/small-image.stories.jsx'; const settings = { title: 'Layouts/Media', @@ -14,10 +16,16 @@ const Media = { render: ({ is_reversed, modifier_classes, ...args }) => parse( twigTemplate({ - ...args, modifier_classes: `${ is_reversed ? 'l-media--reversed' : '' } ${modifier_classes}`.trim(), + media: ReactDOMServer.renderToStaticMarkup( + SmallImage.render({ + ...SmallImage.args, + ...data, + }), + ), + ...args, }) ), args: { ...data }, diff --git a/source/02-layouts/media/media.yml b/source/02-layouts/media/media.yml index b08b37ec..70b5043e 100644 --- a/source/02-layouts/media/media.yml +++ b/source/02-layouts/media/media.yml @@ -1,6 +1,4 @@ --- -media: |- - media_content: |-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae necessitatibus fuga provident aut.

modifier_classes: '' diff --git a/source/03-components/call-to-action/call-to-action.stories.jsx b/source/03-components/call-to-action/call-to-action.stories.jsx index d378e1b7..2202c526 100644 --- a/source/03-components/call-to-action/call-to-action.stories.jsx +++ b/source/03-components/call-to-action/call-to-action.stories.jsx @@ -1,9 +1,11 @@ +import ReactDOMServer from 'react-dom/server'; import parse from 'html-react-parser'; import { withGlobalWrapper } from '../../../.storybook/decorators'; import twigTemplate from './call-to-action.twig'; import data from './call-to-action.yml'; import './call-to-action.scss'; +import { Ratio4x3 as LargeImage } from '../../01-global/images/large-image.stories.jsx'; const settings = { title: 'Components/Call To Action', @@ -11,7 +13,15 @@ const settings = { }; const CallToAction = { - render: args => parse(twigTemplate(args)), + render: args => parse(twigTemplate({ + media: ReactDOMServer.renderToStaticMarkup( + LargeImage.render({ + ...LargeImage.args, + ...args, + }), + ), + ...args, + })), args: { ...data }, }; diff --git a/source/03-components/call-to-action/call-to-action.yml b/source/03-components/call-to-action/call-to-action.yml index afbe8d56..723a4cf8 100644 --- a/source/03-components/call-to-action/call-to-action.yml +++ b/source/03-components/call-to-action/call-to-action.yml @@ -1,6 +1,5 @@ --- body: '

CTA content goes here…

' heading: 'Heading Text' -media: 'placeholder image' link_url: 'https://www.example.com' link_title: 'Link Text' diff --git a/source/03-components/card/card.stories.jsx b/source/03-components/card/card.stories.jsx index 87d06c7a..7c85caa2 100644 --- a/source/03-components/card/card.stories.jsx +++ b/source/03-components/card/card.stories.jsx @@ -1,9 +1,11 @@ +import ReactDOMServer from 'react-dom/server'; import parse from 'html-react-parser'; import { withGlobalWrapper } from '../../../.storybook/decorators'; import twigTemplate from './card.twig'; import data from './card.yml'; import './card.scss'; +import { Ratio4x3 as LargeImage } from '../../01-global/images/large-image.stories.jsx'; // Importing Tag, TagList and ReadMoreLink to ensure their assets gets loaded // in Storybook when this story is referenced since Drupal loads them as a library. import '../tag/tag.stories.jsx'; @@ -16,7 +18,15 @@ const settings = { }; const Default = { - render: args => parse(twigTemplate(args)), + render: args => parse(twigTemplate({ + media: ReactDOMServer.renderToStaticMarkup( + LargeImage.render({ + ...LargeImage.args, + ...args, + }), + ), + ...args, + })), args: { ...data }, }; diff --git a/source/03-components/card/card.yml b/source/03-components/card/card.yml index 6bda4e3a..a6362576 100644 --- a/source/03-components/card/card.yml +++ b/source/03-components/card/card.yml @@ -13,7 +13,5 @@ tags: title: 'Tag 3' - url: '#0' title: 'Tag 4' -media: |- - card_content: |-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et accumsan augue. Morbi non laoreet lorem.

diff --git a/source/03-components/figure/figure.stories.jsx b/source/03-components/figure/figure.stories.jsx index d64f827f..9aef5e0d 100644 --- a/source/03-components/figure/figure.stories.jsx +++ b/source/03-components/figure/figure.stories.jsx @@ -1,3 +1,4 @@ +import ReactDOMServer from 'react-dom/server'; import parse from 'html-react-parser'; import { withGlobalWrapper } from '../../../.storybook/decorators'; @@ -5,6 +6,7 @@ import twigTemplate from './figure.twig'; import data from './figure.yml'; import videoData from './figure--iframe.yml'; import '../video/video.scss'; +import { Ratio4x3 as MediumImage } from '../../01-global/images/medium-image.stories.jsx'; const settings = { title: 'Components/Figure', @@ -12,7 +14,15 @@ const settings = { }; const Default = { - render: args => parse(twigTemplate(args)), + render: args => parse(twigTemplate({ + media: ReactDOMServer.renderToStaticMarkup( + MediumImage.render({ + ...MediumImage.args, + ...args, + }), + ), + ...args, + })), args: { ...data }, }; diff --git a/source/03-components/figure/figure.yml b/source/03-components/figure/figure.yml index 50496a61..ac386400 100644 --- a/source/03-components/figure/figure.yml +++ b/source/03-components/figure/figure.yml @@ -1,4 +1,3 @@ --- -media: 'dog photo' caption: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla semper vel metus at cursus.' modifier_classes: '' diff --git a/source/03-components/hero-bg-image/hero-bg-image.stories.jsx b/source/03-components/hero-bg-image/hero-bg-image.stories.jsx index d4ab86dd..b8a35a52 100644 --- a/source/03-components/hero-bg-image/hero-bg-image.stories.jsx +++ b/source/03-components/hero-bg-image/hero-bg-image.stories.jsx @@ -1,9 +1,11 @@ +import ReactDOMServer from 'react-dom/server'; import parse from 'html-react-parser'; import { withGlobalWrapper } from '../../../.storybook/decorators'; import twigTemplate from './hero-bg-image.twig'; import data from './hero-bg-image.yml'; import './hero-bg-image.scss'; +import { HeroImage } from '../../01-global/images/hero-image.stories.jsx'; const settings = { title: 'Components/Hero/Hero with Background Image', @@ -11,7 +13,15 @@ const settings = { }; const Default = { - render: args => parse(twigTemplate(args)), + render: args => parse(twigTemplate({ + hero_image:ReactDOMServer.renderToStaticMarkup( + HeroImage.render({ + ...HeroImage.args, + ...args, + }), + ), + ...args, + })), args: { ...data }, }; diff --git a/source/03-components/hero-bg-image/hero-bg-image.yml b/source/03-components/hero-bg-image/hero-bg-image.yml index 89917d3c..dfba460a 100644 --- a/source/03-components/hero-bg-image/hero-bg-image.yml +++ b/source/03-components/hero-bg-image/hero-bg-image.yml @@ -3,5 +3,4 @@ has_overlay: true hero_title: 'Hero Title' hero_summary: '

Hero summary text.

' hero_button_text: 'Hero Button' -hero_image: 'alt text' hero_button_url: '#0' diff --git a/source/03-components/hero-inline-image/hero-inline-image.stories.jsx b/source/03-components/hero-inline-image/hero-inline-image.stories.jsx index 73e44a08..e68fa00f 100644 --- a/source/03-components/hero-inline-image/hero-inline-image.stories.jsx +++ b/source/03-components/hero-inline-image/hero-inline-image.stories.jsx @@ -1,9 +1,11 @@ +import ReactDOMServer from 'react-dom/server'; import parse from 'html-react-parser'; import { withGlobalWrapper } from '../../../.storybook/decorators'; import twigTemplate from './hero-inline-image.twig'; import data from './hero-inline-image.yml'; import './hero-inline-image.scss'; +import { HeroImage } from '../../01-global/images/hero-image.stories.jsx'; const settings = { title: 'Components/Hero/Hero with Inline Image', @@ -11,7 +13,15 @@ const settings = { }; const Default = { - render: args => parse(twigTemplate(args)), + render: args => parse(twigTemplate({ + hero_image:ReactDOMServer.renderToStaticMarkup( + HeroImage.render({ + ...HeroImage.args, + ...args, + }), + ), + ...args, + })), args: { ...data }, }; diff --git a/source/03-components/hero-inline-image/hero-inline-image.yml b/source/03-components/hero-inline-image/hero-inline-image.yml index 7f7d1816..dfba460a 100644 --- a/source/03-components/hero-inline-image/hero-inline-image.yml +++ b/source/03-components/hero-inline-image/hero-inline-image.yml @@ -3,11 +3,4 @@ has_overlay: true hero_title: 'Hero Title' hero_summary: '

Hero summary text.

' hero_button_text: 'Hero Button' -hero_image: |- - - - - - Hero Image Alt Text - hero_button_url: '#0' diff --git a/source/03-components/image-teaser/image-teaser.stories.jsx b/source/03-components/image-teaser/image-teaser.stories.jsx index efe79aa4..0678aba6 100644 --- a/source/03-components/image-teaser/image-teaser.stories.jsx +++ b/source/03-components/image-teaser/image-teaser.stories.jsx @@ -1,9 +1,11 @@ +import ReactDOMServer from 'react-dom/server'; import parse from 'html-react-parser'; import { withGlobalWrapper } from '../../../.storybook/decorators'; import twigTemplate from './image-teaser.twig'; import data from './image-teaser.yml'; import './image-teaser.scss'; +import { Ratio4x3 as SmallImage } from '../../01-global/images/small-image.stories.jsx'; const settings = { title: 'Components/Image Teaser', @@ -11,7 +13,15 @@ const settings = { }; const ImageTeaser = { - render: args => parse(twigTemplate(args)), + render: args => parse(twigTemplate({ + image: ReactDOMServer.renderToStaticMarkup( + SmallImage.render({ + ...SmallImage.args, + ...args, + }), + ), + ...args, + })), args: { ...data }, }; diff --git a/source/03-components/image-teaser/image-teaser.yml b/source/03-components/image-teaser/image-teaser.yml index 48f60041..0c50404c 100644 --- a/source/03-components/image-teaser/image-teaser.yml +++ b/source/03-components/image-teaser/image-teaser.yml @@ -1,6 +1,5 @@ --- url: '#0' -image: '' title: 'Title' date: 'Teaser Date' summary: |- diff --git a/source/05-pages/article.stories.jsx b/source/05-pages/article.stories.jsx index fcc723ff..83563d17 100644 --- a/source/05-pages/article.stories.jsx +++ b/source/05-pages/article.stories.jsx @@ -20,7 +20,33 @@ export default { // see Page page. const articleDemoContent = ` ${ReactDOMServer.renderToStaticMarkup( - FigureRightAligned.render(FigureRightAligned.args) + FigureRightAligned.render({ + ...FigureRightAligned.args, + img_medium_4x3: { + src: 'https://picsum.photos/id/237/384/288', + alt: 'Sample photo', + height: '288', + width: '384', + responsive: { + 1: { + src: 'https://picsum.photos/id/237/288/216', + width: '288', + }, + 2: { + src: 'https://picsum.photos/id/237/576/432', + width: '576', + }, + 3: { + src: 'https://picsum.photos/id/237/768/576', + width: '768', + }, + 4: { + src: 'https://picsum.photos/id/237/1152/864', + width: '1152', + }, + }, + }, + }) )}

You’re the Dread Pirate Roberts, admit it. How many do you think you could handle? You mean you wish to surrender to me? Very well, I accept. But how can diff --git a/source/05-pages/homepage.stories.jsx b/source/05-pages/homepage.stories.jsx index 63c92520..b2646057 100644 --- a/source/05-pages/homepage.stories.jsx +++ b/source/05-pages/homepage.stories.jsx @@ -24,12 +24,74 @@ const homepageGridContent = [ Card.render({ ...Card.args, title: 'It’s Only a Model', - media: '', + img_large_4x3: { + src: 'https://picsum.photos/id/1040/768/576', + alt: 'Sample photo 1040', + height: '576', + width: '768', + responsive: { + 1: { + src: 'https://picsum.photos/id/1040/288/216', + width: '288', + }, + 2: { + src: 'https://picsum.photos/id/1040/384/288', + width: '384', + }, + 3: { + src: 'https://picsum.photos/id/1040/576/432', + width: '576', + }, + 4: { + src: 'https://picsum.photos/id/1040/1152/864', + width: '1152', + }, + 5: { + src: 'https://picsum.photos/id/1040/1536/1152', + width: '1536', + }, + 6: { + src: 'https://picsum.photos/id/1040/2304/1728', + width: '2304', + }, + }, + }, }), Card.render({ ...Card.args, title: 'Let Us Ride to Camelot', - media: '', + img_large_4x3: { + src: 'https://picsum.photos/id/419/768/576', + alt: 'Sample photo 419', + height: '576', + width: '768', + responsive: { + 1: { + src: 'https://picsum.photos/id/419/288/216', + width: '288', + }, + 2: { + src: 'https://picsum.photos/id/419/384/288', + width: '384', + }, + 3: { + src: 'https://picsum.photos/id/419/576/432', + width: '576', + }, + 4: { + src: 'https://picsum.photos/id/419/1152/864', + width: '1152', + }, + 5: { + src: 'https://picsum.photos/id/419/1536/1152', + width: '1536', + }, + 6: { + src: 'https://picsum.photos/id/419/2304/1728', + width: '2304', + }, + }, + }, card_content: '

Well, we did do the nose. I don’t want to talk to you no more, you ' + 'empty-headed animal food trough water!

', @@ -37,12 +99,74 @@ const homepageGridContent = [ Card.render({ ...Card.args, title: 'What a Strange Person', - media: '', + img_large_4x3: { + src: 'https://picsum.photos/id/1025/768/576', + alt: 'Sample photo 1040', + height: '576', + width: '768', + responsive: { + 1: { + src: 'https://picsum.photos/id/1025/288/216', + width: '288', + }, + 2: { + src: 'https://picsum.photos/id/1025/384/288', + width: '384', + }, + 3: { + src: 'https://picsum.photos/id/1025/576/432', + width: '576', + }, + 4: { + src: 'https://picsum.photos/id/1025/1152/864', + width: '1152', + }, + 5: { + src: 'https://picsum.photos/id/1025/1536/1152', + width: '1536', + }, + 6: { + src: 'https://picsum.photos/id/1025/2304/1728', + width: '2304', + }, + }, + }, }), Card.render({ ...Card.args, title: 'The Knights Who Say Ni', - media: '', + img_large_4x3: { + src: 'https://picsum.photos/id/560/768/576', + alt: 'Sample photo 560', + height: '576', + width: '768', + responsive: { + 1: { + src: 'https://picsum.photos/id/560/288/216', + width: '288', + }, + 2: { + src: 'https://picsum.photos/id/560/384/288', + width: '384', + }, + 3: { + src: 'https://picsum.photos/id/560/576/432', + width: '576', + }, + 4: { + src: 'https://picsum.photos/id/560/1152/864', + width: '1152', + }, + 5: { + src: 'https://picsum.photos/id/560/1536/1152', + width: '1536', + }, + 6: { + src: 'https://picsum.photos/id/560/2304/1728', + width: '2304', + }, + }, + }, }), ]; @@ -52,7 +176,15 @@ const homepageContent = args => ...args, admin_info: Template.args.admin_info, homepage_hero: ReactDOMServer.renderToStaticMarkup( - HeroBgImage.render(HeroBgImage.args) + HeroBgImage.render({ + ...HeroBgImage.args, + img_hero: { + src: 'https://picsum.photos/id/11/1600/800', + alt: 'Sample photo 11', + height: '800', + width: '1600', + }, + }) ), homepage_grid_content: ReactDOMServer.renderToStaticMarkup( homepageGridContent.map(card => card) diff --git a/source/05-pages/landing-page.stories.jsx b/source/05-pages/landing-page.stories.jsx index 79444d51..66a15319 100644 --- a/source/05-pages/landing-page.stories.jsx +++ b/source/05-pages/landing-page.stories.jsx @@ -23,7 +23,42 @@ export default { // See the Homepage story for an example of overriding the args for each example. const rowsContent = []; for (let i = 1; i <= 12; i += 1) { - rowsContent.push(Card.render(Card.args)); + const photoID = 26 + i; + rowsContent.push(Card.render({ + ...Card.args, + img_large_4x3: { + src: `https://picsum.photos/id/${photoID}/768/576`, + alt: `Sample photo ${photoID}`, + height: '576', + width: '768', + responsive: { + 1: { + src: `https://picsum.photos/id/${photoID}/288/216`, + width: '288', + }, + 2: { + src: `https://picsum.photos/id/${photoID}/384/288`, + width: '384', + }, + 3: { + src: `https://picsum.photos/id/${photoID}/576/432`, + width: '576', + }, + 4: { + src: `https://picsum.photos/id/${photoID}/1152/864`, + width: '1152', + }, + 5: { + src: `https://picsum.photos/id/${photoID}/1536/1152`, + width: '1536', + }, + 6: { + src: `https://picsum.photos/id/${photoID}/2304/1728`, + width: '2304', + }, + }, + }, + })); } const viewsContent = ReactDOMServer.renderToStaticMarkup(