diff --git a/components/atoms/Image/Image.js b/components/atoms/Image/Image.js index 9ac14cf24..b7f900f96 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. @@ -44,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. @@ -53,15 +54,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 } /** @@ -168,9 +175,18 @@ 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, + nextImageFill: PropTypes.bool, rel: PropTypes.string, url: PropTypes.string, width: PropTypes.string 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 ? ( diff --git a/components/organisms/AcfMediaText/AcfMediaText.js b/components/organisms/AcfMediaText/AcfMediaText.js index 11954e2a3..a97a5ad11 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 }) { @@ -51,13 +54,17 @@ export default function AcfMediaText({ )} -
- {image && image.url && ( -
- {image.alt} -
- )} -
+ {!!image && ( +
+ +
+ )} ) @@ -68,9 +75,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 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` { 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) 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