From d64bd32ae8f2225763a0c626d748f1b880ceacb5 Mon Sep 17 00:00:00 2001 From: Brandon Krigbaum Date: Wed, 1 Jun 2022 08:00:37 -0500 Subject: [PATCH 01/11] Center align embedded images by default --- .../marko-web-theme-default/scss/components/_embedded-media.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/marko-web-theme-default/scss/components/_embedded-media.scss b/packages/marko-web-theme-default/scss/components/_embedded-media.scss index 45e7a51ab..ad5fc0e3c 100644 --- a/packages/marko-web-theme-default/scss/components/_embedded-media.scss +++ b/packages/marko-web-theme-default/scss/components/_embedded-media.scss @@ -17,6 +17,7 @@ p [data-embed-type] { margin: $theme-embedded-media-margin; + text-align: center; } [data-embed-type][data-embed-align="left"] { From 08f233f9a817fd6227737caccd9dda974f7c2c0a Mon Sep 17 00:00:00 2001 From: Brandon Krigbaum Date: Wed, 1 Jun 2022 08:01:45 -0500 Subject: [PATCH 02/11] Remove min-width from embedded images --- .../scss/components/_embedded-media.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/marko-web-theme-default/scss/components/_embedded-media.scss b/packages/marko-web-theme-default/scss/components/_embedded-media.scss index ad5fc0e3c..5b65233c1 100644 --- a/packages/marko-web-theme-default/scss/components/_embedded-media.scss +++ b/packages/marko-web-theme-default/scss/components/_embedded-media.scss @@ -41,8 +41,6 @@ p [data-embed-type] { } [data-embed-type] img { - width: 100%; - min-width: 100%; max-width: 100%; } From 237f47db7f494e984337ebdd0a518eb8671d9bbd Mon Sep 17 00:00:00 2001 From: Brandon Krigbaum Date: Thu, 2 Jun 2022 09:35:53 -0500 Subject: [PATCH 03/11] Implement for embedded images --- .../marko-web/utils/embedded-media/image.js | 39 ++++++++++++++++--- 1 file changed, 34 insertions(+), 5 deletions(-) diff --git a/packages/marko-web/utils/embedded-media/image.js b/packages/marko-web/utils/embedded-media/image.js index c8de3e285..27ac11bc6 100644 --- a/packages/marko-web/utils/embedded-media/image.js +++ b/packages/marko-web/utils/embedded-media/image.js @@ -1,3 +1,5 @@ +const { buildImgixUrl } = require('@parameter1/base-cms-image'); + const stringifyAttrs = attrs => Object.keys(attrs).reduce((arr, key) => { const value = attrs[key]; if (value) arr.push(`${key}="${value}"`); @@ -10,23 +12,50 @@ module.exports = (tag, { config } = {}, { lazyloadImages } = {}) => { const alt = tag.get('alt'); const caption = tag.get('caption'); const credit = tag.get('credit'); + const align = tag.get('align'); + + const width = tag.get('width'); + const height = tag.get('height'); const attrs = { 'data-embed-type': tag.type, 'data-embed-id': tag.id, - 'data-embed-align': tag.get('align'), + 'data-embed-align': align, }; + const minWidth = 400; + const maxWidth = (align) ? minWidth : 700; + + const maxSrcset = `${buildImgixUrl(src, { w: maxWidth })}, ${buildImgixUrl(src, { w: maxWidth, dpr: 2 })} 2x`; + + const sources = [ + { + srcset: lazyload ? null : maxSrcset, + 'data-srcset': lazyload ? maxSrcset : null, + media: '(min-width: 576px)', + }, + ].map(source => ``).join(''); + + const minSrc = buildImgixUrl(src, { w: minWidth }); + const minSrcset = `${buildImgixUrl(src, { w: minWidth, dpr: 2 })} 2x`; + + const transparentImg = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; const imgAttrs = { class: lazyload ? 'lazyload' : null, - src: lazyload ? 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' : src, - 'data-src': lazyload ? src : null, + src: lazyload ? transparentImg : minSrc, + srcset: lazyload ? null : minSrcset, + 'data-src': lazyload ? minSrc : null, + 'data-srcset': lazyload ? minSrcset : null, 'data-image-id': tag.id, alt, + width: (width && height) ? minWidth : null, + height: (height && height) ? Math.round(height / width * minWidth) : null, }; + const captionElement = caption ? `${caption}` : ''; const creditElement = credit ? `${credit}` : ''; - const img = `${captionElement}${creditElement}`; - return `${img}`; + const img = ``; + const picture = `${sources}${img}${captionElement}${creditElement}`; + return `${picture}`; }; From 7a94aa0ddd24bdadcfc2ff1cedcab8513034626a Mon Sep 17 00:00:00 2001 From: Brandon Krigbaum Date: Thu, 2 Jun 2022 09:37:07 -0500 Subject: [PATCH 04/11] Add component --- .../marko-web/components/element/marko.json | 35 +++++++++++++++++++ .../components/element/picture.marko | 25 +++++++++++++ 2 files changed, 60 insertions(+) create mode 100644 packages/marko-web/components/element/picture.marko diff --git a/packages/marko-web/components/element/marko.json b/packages/marko-web/components/element/marko.json index 12b544227..616eb63d0 100644 --- a/packages/marko-web/components/element/marko.json +++ b/packages/marko-web/components/element/marko.json @@ -162,5 +162,40 @@ "@class": "string", "@attrs": "object", "@modifiers": "array" + }, + "": { + "template": "./picture.marko", + "": { + "@src": "string", + "@srcset": "array", + "@alt": "string", + "@lazyload": { + "type": "boolean", + "default-value": true + }, + "@class": "string", + "@attrs": "object", + "@link": "object" + }, + "": { + "": {}, + "": {}, + "@href": "string", + "@target": "string", + "@title": "string", + "@rel": "string", + "@class": "string", + "@attrs": "object" + }, + "@sources []": { + "@media": { + "type": "string", + "required": true + }, + "@srcset": { + "type": "array", + "required": true + } + } } } diff --git a/packages/marko-web/components/element/picture.marko b/packages/marko-web/components/element/picture.marko new file mode 100644 index 000000000..5a3e1a0bf --- /dev/null +++ b/packages/marko-web/components/element/picture.marko @@ -0,0 +1,25 @@ +import { getAsArray } from "@parameter1/base-cms-object-path"; + +$ const hasImage = Boolean(input.image.src); + + + + + $ input.link = false; + + + + + $ const sources = getAsArray(input, "sources"); + + + $ const srcset = s.srcset.join(", "); + + + + + + From a05dc6ee3b4e00439525117ee9bcba71cc42b9de Mon Sep 17 00:00:00 2001 From: Brandon Krigbaum Date: Thu, 2 Jun 2022 10:17:59 -0500 Subject: [PATCH 05/11] Fix srcset array handling --- packages/marko-web/components/element/components/image.marko | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/marko-web/components/element/components/image.marko b/packages/marko-web/components/element/components/image.marko index 667df174b..2060a0607 100644 --- a/packages/marko-web/components/element/components/image.marko +++ b/packages/marko-web/components/element/components/image.marko @@ -3,7 +3,7 @@ import { getAsArray } from "@parameter1/base-cms-object-path"; $ const { config } = out.global; $ const { src, alt } = input; $ const lazyload = config.lazyloadImages() && input.lazyload !== false -$ const srcset = getAsArray(input.srcset).join(",") || null; +$ const srcset = getAsArray(input.srcset).join(", ") || null; $ const classNames = [input.class]; $ if (lazyload) classNames.push("lazyload"); From 842dd345912c56aa563aef3f5f57245cec0c6714 Mon Sep 17 00:00:00 2001 From: Brandon Krigbaum Date: Thu, 2 Jun 2022 10:18:15 -0500 Subject: [PATCH 06/11] Add picturefill --- packages/marko-web/components/document/index.marko | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/marko-web/components/document/index.marko b/packages/marko-web/components/document/index.marko index 60b2a2af4..b44b83628 100644 --- a/packages/marko-web/components/document/index.marko +++ b/packages/marko-web/components/document/index.marko @@ -28,6 +28,11 @@ $ const wrapper = getAsObject(input, "bodyWrapper"); + + + <${input.head} /> From 7fa91291aed24bd1036ba2b0c02fc672cdc5a83e Mon Sep 17 00:00:00 2001 From: Brandon Krigbaum Date: Thu, 2 Jun 2022 10:18:41 -0500 Subject: [PATCH 07/11] Update primary image block to use --- .../components/blocks/primary-image.marko | 47 ++++++++++++++----- .../components/blocks/_primary-image.scss | 6 +++ 2 files changed, 41 insertions(+), 12 deletions(-) diff --git a/packages/marko-web-theme-monorail/components/blocks/primary-image.marko b/packages/marko-web-theme-monorail/components/blocks/primary-image.marko index fbe2d768a..963be8722 100644 --- a/packages/marko-web-theme-monorail/components/blocks/primary-image.marko +++ b/packages/marko-web-theme-monorail/components/blocks/primary-image.marko @@ -15,7 +15,7 @@ $ const withCaption = defaultValue(input.withCaption, true); $ const withCredit = defaultValue(input.withCredit, true); $ const withDisplayName = defaultValue(input.withDisplayName, true); -$ const fluidWidth = defaultValue(input.fluidWidth, 700); +$ const fluidWidth = defaultValue(input.fluidWidth, 880); $ const alignedWidth = defaultValue(input.alignedWidth, 300); $ const shouldFill = defaultValue(input.shouldFill, false); $ const lazyload = defaultValue(input.lazyload, false); @@ -31,7 +31,7 @@ $ if (["left", "right"].includes(display)) { } $ modifiers.push(`aligned-${display}`); -$ const maxWidth = input.maxWidth || 700; +$ const maxWidth = input.maxWidth || 880; $ const fluid = !["left", "right"].includes(display); $ if (fluid) modifiers.push("fluid"); $ if (fluid && aspectRatio === "16x9") modifiers.push("fluid-16by9") @@ -47,12 +47,30 @@ $ if (fluid) { imageOptions.w = alignedWidth; }; +$ const src = buildImgixUrl(image.src, imageOptions); +$ const srcset = [src, `${buildImgixUrl(src, { dpr: 2 })} 2x`]; +$ const srcMid = buildImgixUrl(src, { w: 700 }); +$ const srcsetMid = [srcMid, `${buildImgixUrl(srcMid, { dpr: 2 })} 2x`]; +$ const srcMin = buildImgixUrl(src, { w: 400 }); +$ const srcsetMin = [srcMin, `${buildImgixUrl(srcMin, { dpr: 2 })} 2x`]; +$ const sources = []; +$ if (fluid) { + sources.push( + { srcset: srcset, media: "(min-width: 900px)" }, + { srcset: srcsetMid, media: "(min-width: 576px)" } + ); +} else { + const alignedSrc = buildImgixUrl(src, { w: alignedWidth }); + const alignedSrcset = [alignedSrc, `${buildImgixUrl(alignedSrc, { dpr: 2 })} 2x`]; + sources.push( + { srcset: alignedSrcset, media: "(min-width: 576px)" } + ); +}; + $ const imageAttrs = {}; $ if (image.id) imageAttrs["data-image-id"] = image.id; - $ const src = buildImgixUrl(image.src, imageOptions); - $ const srcset = [`${buildImgixUrl(src, { dpr: 2 })} 2x`];
- + + + <@source ...s /> + + <@image + src=srcMin + srcset=srcsetMin + class=[`${blockName}__image`] + alt=image.alt + attrs=imageAttrs + lazyload=lazyload + /> +
diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_primary-image.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_primary-image.scss index 8e6435d52..bad03f408 100644 --- a/packages/marko-web-theme-monorail/scss/components/blocks/_primary-image.scss +++ b/packages/marko-web-theme-monorail/scss/components/blocks/_primary-image.scss @@ -29,10 +29,16 @@ $marko-web-primary-image-margin: 1.5rem !default; &--aligned { max-width: $skin-aligned-image-width; margin-bottom: 0; + img { + max-width: $skin-aligned-image-width; + } @include media-breakpoint-down(xs) { max-width: 100%; margin: $skin-aligned-body-image-spacer auto; + img { + max-width: 100%; + } #{ $self } { &__image { From f43f388bb4f5c043ba3e892ccc0faa6cc1f5e8c5 Mon Sep 17 00:00:00 2001 From: Brandon Krigbaum Date: Thu, 2 Jun 2022 16:53:20 -0500 Subject: [PATCH 08/11] Use within section-feed-content nodes --- .../nodes/section-feed-content.marko | 22 ++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/packages/marko-web-theme-monorail/components/nodes/section-feed-content.marko b/packages/marko-web-theme-monorail/components/nodes/section-feed-content.marko index b147fcfe9..b50d66ca3 100644 --- a/packages/marko-web-theme-monorail/components/nodes/section-feed-content.marko +++ b/packages/marko-web-theme-monorail/components/nodes/section-feed-content.marko @@ -80,17 +80,23 @@ $ const blockName = "section-feed-content-node"; - $ const src = buildImgixUrl(primaryImage.src, imageOptions); - $ const srcset = [`${buildImgixUrl(src, { dpr: 2 })} 2x`]; - - + <@link href=get(content, "siteContext.path") attrs=linkAttrs /> + <@source srcset=srcset media="(min-width: 768px)" /> + <@image + src=srcMobile + srcset=srcsetMobile class=[`${blockName}__image`] + alt=primaryImage.alt lazyload=lazyload /> - + From 8513946604600ef7065382f76b68d40710935e5d Mon Sep 17 00:00:00 2001 From: Brandon Krigbaum Date: Sat, 4 Jun 2022 13:05:26 -0500 Subject: [PATCH 09/11] Define source properties Co-authored-by: Josh Worden --- .../components/blocks/primary-image.marko | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/marko-web-theme-monorail/components/blocks/primary-image.marko b/packages/marko-web-theme-monorail/components/blocks/primary-image.marko index 963be8722..2615874fe 100644 --- a/packages/marko-web-theme-monorail/components/blocks/primary-image.marko +++ b/packages/marko-web-theme-monorail/components/blocks/primary-image.marko @@ -82,7 +82,7 @@ $ if (image.id) imageAttrs["data-image-id"] = image.id;
- <@source ...s /> + <@source srcset=s.srcset media=s.media /> <@image src=srcMin From 2a73638c028626c5f1e4818f860070fc129664f2 Mon Sep 17 00:00:00 2001 From: Brandon Krigbaum Date: Sat, 4 Jun 2022 13:46:18 -0500 Subject: [PATCH 10/11] Get image, sources, link from input --- .../components/element/picture.marko | 23 +++++++++++++------ 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/packages/marko-web/components/element/picture.marko b/packages/marko-web/components/element/picture.marko index 5a3e1a0bf..bc5f92c7d 100644 --- a/packages/marko-web/components/element/picture.marko +++ b/packages/marko-web/components/element/picture.marko @@ -1,16 +1,25 @@ import { getAsArray } from "@parameter1/base-cms-object-path"; -$ const hasImage = Boolean(input.image.src); +$ const { link, sources = [], image } = input; + +$ const hasImage = Boolean(image.src); - - - $ input.link = false; - + + + - $ const sources = getAsArray(input, "sources"); $ const srcset = s.srcset.join(", "); @@ -19,7 +28,7 @@ $ const hasImage = Boolean(input.image.src); media=s.media > - + From dd4776993f68ed09cc5b56a428b8e7d7e5d5f6fc Mon Sep 17 00:00:00 2001 From: Brandon Krigbaum Date: Sat, 4 Jun 2022 13:46:34 -0500 Subject: [PATCH 11/11] Fix lazyloading for source values --- packages/marko-web/components/element/picture.marko | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/marko-web/components/element/picture.marko b/packages/marko-web/components/element/picture.marko index bc5f92c7d..887c9e9ab 100644 --- a/packages/marko-web/components/element/picture.marko +++ b/packages/marko-web/components/element/picture.marko @@ -22,9 +22,11 @@ $ const hasImage = Boolean(image.src); - $ const srcset = s.srcset.join(", "); + $ const srcset = image.lazyload ? null : s.srcset.join(", "); + $ const dataSrcset = image.lazyload ? s.srcset.join(", ") : null;