Merge pull request #42 from redwoodjs/jgmw/profile-image-size

Add height param to profile picture image requests
redwoodjs · Jul 3, 2024 · 89833b5 · 89833b5
2 parents 8ba2211 + dc33d9b
commit 89833b5
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/web/src/components/BlogCard/BlogCard.tsx b/web/src/components/BlogCard/BlogCard.tsx
@@ -25,6 +25,8 @@ interface BlogCardProps {
 }
 
 const BlogCard = ({ post }: BlogCardProps) => {
+  const profilePictureUrl = new URL(post.author.profilePicture)
+  profilePictureUrl.searchParams.set('height', '128')
   return (
     <article className="rounded-[4px] border-1 border-maiTai p-7 pb-5">
       <p className="mb-2 text-sm font-bold uppercase text-maiTai">
@@ -54,7 +56,7 @@ const BlogCard = ({ post }: BlogCardProps) => {
             className="text-black dark:text-white"
           />
         </Link>
-        <Avatar alt={post.author.name} src={post.author.profilePicture} />
+        <Avatar alt={post.author.name} src={profilePictureUrl} />
       </div>
     </article>
   )

diff --git a/web/src/components/BlogListItem/BlogListItem.tsx b/web/src/components/BlogListItem/BlogListItem.tsx
@@ -23,6 +23,8 @@ interface Props {
 }
 
 const BlogListItem = ({ post }: Props) => {
+  const profilePictureUrl = new URL(post.author.profilePicture)
+  profilePictureUrl.searchParams.set('height', '128')
   return (
     <article>
       <h3 className="mb-2 text-sm font-bold uppercase text-maiTai">
@@ -55,7 +57,7 @@ const BlogListItem = ({ post }: Props) => {
 
       {/* author */}
       <div className="flex items-center gap-x-6">
-        <Avatar alt={post.author.name} src={post.author.profilePicture} />
+        <Avatar alt={post.author.name} src={profilePictureUrl} />
         <div>
           <div className="text-lg">{post.author.name}</div>
         </div>

diff --git a/web/src/components/IndividualBlogPostCell/IndividualBlogPostCell.tsx b/web/src/components/IndividualBlogPostCell/IndividualBlogPostCell.tsx
@@ -84,6 +84,10 @@ export const Success = ({
   }, [post])
 
   const { origin } = useLocation()
+
+  const profilePictureUrl = new URL(post.author.profilePicture)
+  profilePictureUrl.searchParams.set('height', '128')
+
   return (
     <div className="page-grid">
       <Metadata
@@ -104,7 +108,7 @@ export const Success = ({
         </h2>
 
         <div className="mb-10 flex items-center gap-3">
-          <Avatar alt={post.author.name} src={post.author.profilePicture} />
+          <Avatar alt={post.author.name} src={profilePictureUrl} />
           <div className="text-lg text-black dark:text-white">
             {post.author.name}
           </div>