Use height/width from Unsplash metadata for post images

Author: jason-roundtree

web/components/PostImg.js

@@ -12,13 +12,13 @@ const PostImg = styled.img`
     transition: opacity 400ms ease 0ms;
     /* width: 100%; */
     /* TODO: what exactly were these supposed to be doing? */
-    /* top: 0;
-    left: 0;
-    display: block; */
+    /* top: 0; */
+    /* left: 0; */
+    /* display: block; */
 `
 const PostLqipImg = styled(PostImg)`
     position: absolute;
-    /* width: 100%; */
+    width: 100%;
     /* TODO: what exactly were these supposed to be doing? */
     /* transform: scale(1);
     transition: visibility 0ms ease 400ms; */
@@ -27,43 +27,37 @@ const PhotoCredit = styled.p`
     text-align: center;
 `
 
-function PostImage(props) {
-    console.log('Image props: ', props)
+function PostImage({ postImg }) {
+    // console.log('postImg: ', postImg)
     const [isLoaded, setIsLoaded] = useState(false);
-    // const [fullImgUrl, setFullImgUrl] = useState(null)
-    // const [lqipImgUrl, setLqipImgUrl] = useState(null)
-    // console.log('isLoaded: ', isLoaded)
-
-    // useEffect(() => {
-    //     console.log('useEffect')
-    // }, [])
-
-    // function handleOnLoad() {
-    //     console.log('handleOnLoad: ', isLoaded)
-    // }
-
+    const { width, height } = postImg.metadata.dimensions
+    // console.log('with/height: ', width + "/" + height)
     return (
         <PostImgContainer>
             <PostLqipImg 
-                src={props.postImg.metadata.lqip}
-                alt={`Image of ${props.postImg.description} by ${props.postImg.creditLine}`}
+                src={postImg.metadata.lqip}
+                alt={`Image of ${postImg.description} by ${postImg.creditLine}`}
                 style={{ visibility: isLoaded ? "hidden" : "visible" }}
+                width={width}
+                height={height}
             />
 
             <PostImg 
                 // key set to unique value ensures that LQIP image doesn't persist on page refresh
                 key={Date.now()}
                 onLoad={() => setIsLoaded(true)}
-                src={props.postImg.url}
-                alt={`Image of ${props.postImg.description} by ${props.postImg.creditLine}`}
+                src={postImg.url}
+                alt={`Image of ${postImg.description} by ${postImg.creditLine}`}
                 // TODO: move these style tags to Styled Components?
                 style={{ opacity: isLoaded ? 1 : 0 }}
+                width={width}
+                height={height}
             />
 
             <PhotoCredit>
                 Photo by 
-                    <a href={props.postImg.source.url} target="_blank">
-                        {props.postImg.creditLine.replace('by Unsplash', ' ')} 
+                    <a href={postImg.source.url} target="_blank">
+                        {postImg.creditLine.replace('by Unsplash', ' ')} 
                     </a>
                 on <a href="https://unsplash.com/" target="_blank">Unsplash</a>
             </PhotoCredit>

web/pages/posts/[slug].js

@@ -85,8 +85,7 @@ const CodeNote = styled.p`
 const ExternalLink = styled.a`
     text-decoration: underline;
     color: ${({ theme }) => theme.articleLinks};
-    /* display:inline-block; */
-    word-break: break-word;
+    word-break: break-all;
 `
 const Button = styled.button`
     font-size: .8em;