From 9f9b55fabec93c10320b60fee026b04f2400abad Mon Sep 17 00:00:00 2001 From: R A Van Epps Date: Fri, 23 Apr 2021 12:04:55 -0600 Subject: [PATCH 01/10] Add alttext to media query --- lib/wordpress/media/queryMediaAttributes.js | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/wordpress/media/queryMediaAttributes.js b/lib/wordpress/media/queryMediaAttributes.js index 45879ddba..85d1883af 100644 --- a/lib/wordpress/media/queryMediaAttributes.js +++ b/lib/wordpress/media/queryMediaAttributes.js @@ -3,6 +3,7 @@ import {gql} from '@apollo/client' const queryMediaAttributes = gql` query GET_MEDIA_ATTS($id: ID!) { mediaItem(id: $id, idType: DATABASE_ID) { + altText mediaItemUrl mediaDetails { height From f8caa38327d4385b52ac13d237d360d6da24f5af Mon Sep 17 00:00:00 2001 From: R A Van Epps Date: Fri, 23 Apr 2021 12:55:08 -0600 Subject: [PATCH 02/10] Retrieve media data for acf media text block --- functions/wordpress/blocks/formatBlockData.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/functions/wordpress/blocks/formatBlockData.js b/functions/wordpress/blocks/formatBlockData.js index ab2deef16..16b5a2743 100644 --- a/functions/wordpress/blocks/formatBlockData.js +++ b/functions/wordpress/blocks/formatBlockData.js @@ -16,11 +16,20 @@ export default async function formatBlockData(blocks) { return await Promise.all( blocks.map(async (block) => { const {name, attributes, innerBlocks} = block + switch (name) { + case 'acf/acf-media-text': + // Retrieve additional image meta. + attributes.data.imageMeta = await getMediaByID( + attributes?.data?.image + ) + break + case 'core/image': // Retrieve additional image meta. attributes.imageMeta = await getMediaByID(attributes?.id) break + case 'gravityforms/form': // Retrieve form data. attributes.formData = await getGfFormById(attributes?.formId) From 013a1fecd02f0dbd06a408b313810169f1a8c7c5 Mon Sep 17 00:00:00 2001 From: R A Van Epps Date: Fri, 23 Apr 2021 12:55:53 -0600 Subject: [PATCH 03/10] Display image in acf media text --- .../organisms/AcfMediaText/AcfMediaText.js | 28 +++++++++++++------ 1 file changed, 20 insertions(+), 8 deletions(-) diff --git a/components/organisms/AcfMediaText/AcfMediaText.js b/components/organisms/AcfMediaText/AcfMediaText.js index 11954e2a3..ed30686be 100644 --- a/components/organisms/AcfMediaText/AcfMediaText.js +++ b/components/organisms/AcfMediaText/AcfMediaText.js @@ -1,5 +1,6 @@ import Button from '@/components/atoms/Button' import Container from '@/components/atoms/Container' +import DisplayImage from '@/components/atoms/Image' import cn from 'classnames' import PropTypes from 'prop-types' import React from 'react' @@ -13,7 +14,8 @@ import styles from './AcfMediaText.module.css' * @param {string} props.className The className. * @param {object} props.ctaText The cta text. * @param {object} props.ctaUrl The cta url. - * @param {object} props.image The image object with url and alt text. + * @param {object} props.image The image ID. + * @param {object} props.imageMeta The image object with url and details. * @param {boolean} props.mediaLeft Whether to show media on the left of the text. * @param {string} props.title The title. * @return {Element} The AcfMediaText component. @@ -24,6 +26,7 @@ export default function AcfMediaText({ ctaText, ctaUrl, image, + imageMeta, mediaLeft, title }) { @@ -52,10 +55,13 @@ export default function AcfMediaText({
- {image && image.url && ( -
- {image.alt} -
+ {!!image && ( + )}
@@ -68,9 +74,15 @@ AcfMediaText.propTypes = { className: PropTypes.string, ctaText: PropTypes.string, ctaUrl: PropTypes.string, - image: PropTypes.shape({ - url: PropTypes.string, - alt: PropTypes.string + image: PropTypes.number, + imageMeta: PropTypes.shape({ + altText: PropTypes.string, + mediaItemUrl: PropTypes.string, + mediaDetails: PropTypes.shape({ + height: PropTypes.number, + sizes: PropTypes.array, + width: PropTypes.number + }) }), mediaLeft: PropTypes.bool, title: PropTypes.string From cd0890d11b9255d03299af23f90a674b77c53c6b Mon Sep 17 00:00:00 2001 From: R A Van Epps Date: Fri, 23 Apr 2021 12:56:06 -0600 Subject: [PATCH 04/10] Remove image override --- .../blocks/ACF/AcfBlockMediaText/AcfBlockMediaText.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/components/blocks/ACF/AcfBlockMediaText/AcfBlockMediaText.js b/components/blocks/ACF/AcfBlockMediaText/AcfBlockMediaText.js index 3f2fc64a5..1ce507076 100644 --- a/components/blocks/ACF/AcfBlockMediaText/AcfBlockMediaText.js +++ b/components/blocks/ACF/AcfBlockMediaText/AcfBlockMediaText.js @@ -10,12 +10,6 @@ import PropTypes from 'prop-types' * @return {Element} The component. */ export default function AcfBlockMediaText({attributes}) { - // TODO: Query the DB for the image ID and replace the attributes.data with the correct information. - attributes.data = { - ...attributes.data, - image: {} - } - return ( <> {attributes ? ( From 1a99c416c575d69111bdc3162c77d851c48624b7 Mon Sep 17 00:00:00 2001 From: R A Van Epps Date: Fri, 23 Apr 2021 12:56:16 -0600 Subject: [PATCH 05/10] Fix imagemeta prop types --- components/atoms/Image/Image.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/components/atoms/Image/Image.js b/components/atoms/Image/Image.js index 9ac14cf24..1f7e1d435 100644 --- a/components/atoms/Image/Image.js +++ b/components/atoms/Image/Image.js @@ -168,7 +168,15 @@ DisplayImage.propTypes = { height: PropTypes.string, href: PropTypes.string, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - imageMeta: PropTypes.object, + imageMeta: PropTypes.shape({ + altText: PropTypes.string, + mediaItemUrl: PropTypes.string, + mediaDetails: PropTypes.shape({ + height: PropTypes.number, + sizes: PropTypes.array, + width: PropTypes.number + }) + }), linkClass: PropTypes.string, linkTarget: PropTypes.string, rel: PropTypes.string, From dd4412675377dd53bd7fc14021096955580400fc Mon Sep 17 00:00:00 2001 From: R A Van Epps Date: Fri, 23 Apr 2021 14:28:32 -0600 Subject: [PATCH 06/10] Update AcfMediaText stories --- .../AcfMediaText/AcfMediaText.stories.mdx | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/components/organisms/AcfMediaText/AcfMediaText.stories.mdx b/components/organisms/AcfMediaText/AcfMediaText.stories.mdx index c84ba54be..9cf54c218 100644 --- a/components/organisms/AcfMediaText/AcfMediaText.stories.mdx +++ b/components/organisms/AcfMediaText/AcfMediaText.stories.mdx @@ -12,10 +12,15 @@ Use this to display media and text in a 50/50 layout. @@ -31,10 +36,15 @@ Media will display on the right on large screens by default. Use the `mediaLeft` Date: Fri, 23 Apr 2021 15:02:40 -0600 Subject: [PATCH 07/10] Add next/image layout fill prop to image component Stops next/image from breaking AcfMediaText styling and allows for position:absolute on next/image wrapper div. --- components/atoms/Image/Image.js | 53 +++++++++++++++++++-------------- 1 file changed, 31 insertions(+), 22 deletions(-) diff --git a/components/atoms/Image/Image.js b/components/atoms/Image/Image.js index 1f7e1d435..9e266aee2 100644 --- a/components/atoms/Image/Image.js +++ b/components/atoms/Image/Image.js @@ -8,19 +8,20 @@ import styles from './Image.module.css' * Render the Display Image component. * * @author WebDevStudios - * @param {object} props The component properties. - * @param {string} props.alt The image alt attribute. - * @param {string} props.anchor The image anchor. - * @param {string} props.caption The image caption. - * @param {string} props.className The image class name. - * @param {string} props.href A link wrapping the image. - * @param {number} props.id The image id. - * @param {object} props.imageMeta The image meta. - * @param {string} props.linkClass The image link class name. - * @param {string} props.linkTarget The image link target. - * @param {string} props.rel The relationship of the linked URL. - * @param {string} props.url The image src attribute. - * @return {Element} The DisplayImage component. + * @param {object} props The component properties. + * @param {string} props.alt The image alt attribute. + * @param {string} props.anchor The image anchor. + * @param {string} props.caption The image caption. + * @param {string} props.className The image class name. + * @param {string} props.href A link wrapping the image. + * @param {number} props.id The image id. + * @param {object} props.imageMeta The image meta. + * @param {string} props.linkClass The image link class name. + * @param {string} props.linkTarget The image link target. + * @param {bool} props.nextImageFill Whether next/image should be set to fill or have height/width defined. + * @param {string} props.rel The relationship of the linked URL. + * @param {string} props.url The image src attribute. + * @return {Element} The DisplayImage component. */ export default function DisplayImage(props) { // Set the image size. @@ -28,6 +29,7 @@ export default function DisplayImage(props) { height: props?.imageMeta?.mediaDetails?.height ?? props?.height, width: props?.imageMeta?.mediaDetails?.width ?? props?.width } + // console.log({props}) // Set the image src. const source = props?.imageMeta?.mediaItemUrl ?? props?.url @@ -53,15 +55,21 @@ export default function DisplayImage(props) { * @return {Element} The next/image component. */ function NextImage() { - return ( - {props?.alt} - ) + const imageProps = { + alt: props?.alt, + id: props?.anchor, + src: source + } + + // Add extra props depending on whether image needs to be set to "fill". + if (props?.nextImageFill) { + imageProps.layout = 'fill' + } else { + imageProps.height = imageSize?.height + imageProps.width = imageSize?.width + } + + return } /** @@ -179,6 +187,7 @@ DisplayImage.propTypes = { }), linkClass: PropTypes.string, linkTarget: PropTypes.string, + nextImageFill: PropTypes.bool, rel: PropTypes.string, url: PropTypes.string, width: PropTypes.string From c2e2685363bf8d5012e3691edd8507e4e8c1096c Mon Sep 17 00:00:00 2001 From: R A Van Epps Date: Fri, 23 Apr 2021 15:03:00 -0600 Subject: [PATCH 08/10] Fix image display on AcfMediaText --- components/organisms/AcfMediaText/AcfMediaText.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/components/organisms/AcfMediaText/AcfMediaText.js b/components/organisms/AcfMediaText/AcfMediaText.js index ed30686be..a97a5ad11 100644 --- a/components/organisms/AcfMediaText/AcfMediaText.js +++ b/components/organisms/AcfMediaText/AcfMediaText.js @@ -54,16 +54,17 @@ export default function AcfMediaText({ )} -
- {!!image && ( + {!!image && ( +
- )} -
+
+ )} ) From 5ac59565e6518bc81923ed620a54e6875c430045 Mon Sep 17 00:00:00 2001 From: R A Van Epps Date: Fri, 23 Apr 2021 15:10:05 -0600 Subject: [PATCH 09/10] Remove console log --- components/atoms/Image/Image.js | 1 - 1 file changed, 1 deletion(-) diff --git a/components/atoms/Image/Image.js b/components/atoms/Image/Image.js index 9e266aee2..b069c46e3 100644 --- a/components/atoms/Image/Image.js +++ b/components/atoms/Image/Image.js @@ -29,7 +29,6 @@ export default function DisplayImage(props) { height: props?.imageMeta?.mediaDetails?.height ?? props?.height, width: props?.imageMeta?.mediaDetails?.width ?? props?.width } - // console.log({props}) // Set the image src. const source = props?.imageMeta?.mediaItemUrl ?? props?.url From 3b8cfeb30013b11fedce0cc20cf5b64ea51eb8d7 Mon Sep 17 00:00:00 2001 From: R A Van Epps Date: Fri, 23 Apr 2021 15:18:30 -0600 Subject: [PATCH 10/10] Add check for domains --- components/atoms/Image/Image.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/atoms/Image/Image.js b/components/atoms/Image/Image.js index b069c46e3..b7f900f96 100644 --- a/components/atoms/Image/Image.js +++ b/components/atoms/Image/Image.js @@ -45,7 +45,7 @@ export default function DisplayImage(props) { let domains = process.env.NEXT_PUBLIC_IMAGE_DOMAINS // Split domains string into individual domains. - domains = domains.split(', ') + domains = !domains || !domains.length ? [] : domains.split(', ') /** * Next.js component.