Unlock seamless workflows and faster delivery with our latest releases- get the details

Help with outputting background image from Sanity in Next.js project

4 replies
Last updated: Jun 25, 2021
Hey amigs!I’m putting together my first Sanity project (using Next.js for the fe) and am having some trouble outputting a background image from Sanity…any help would be much appreciated
🙂

The story so far…• I have 3 documents in my schema which have the following types:
projects
,
articles
&
people

people
and
projects
are referenced in
articles
• I would like to output the image from
people
as a background image on a
.com/projects
and/or
.com/projects/[slug]
page• My groq query (which lives in
lib/queries.js
) looks like this:
 export const projectQuery = `
*[_type == "project"] | order(slug.current asc) {
  _id,
    website,
    slug,
    image,
    title,
    description,
  "collaborators": *[_type == "article" && references(^._id)]| order(publishedAt desc){
    personReference->{
      image{asset->{url,_id}}
  	}
  }[0...3],
}`;
• I then have an
<Avatar />
component that loos like this
import { urlFor } from "../lib/sanity";

const Avatar = (props) => {
  return (
    <>
      <StyledAvatar
        css={{
          backgroundImage: `url(${urlFor(props.url).url()})`,
        }}
      />
    </>
  );
};
export default Avatar;
• Which is used in a
<ProjectCard />
component that…
import { sanityClient } from "../../lib/sanity";
import Avatar from "../avatar";

const ProjectCard = (props) => {
  const {
    _id,
    website,
    slug,
    image,
    title,
    description,
    collaborators,
  } = props;

  const collaboratorsImageItemProps = props.collaborators;

  return (
    <>
          {collaboratorsImageItemProps.length ? (
            <>
              <FlexBox>
                <Label>Collaborators</Label>
                <FlexAvatars>
                  {collaborators &&
                    collaborators.map((props) => (
                      <Avatar key={props._id} url={props.url} />
                    ))}
                </FlexAvatars>
              </FlexBox>
            </>
          ) : (
            <Label>No collaborators</Label>
          )}
    </>
  );
};

export default ProjectCard;
• Which is finally used in
index.js

import { sanityClient, urlFor } from "../../lib/sanity";
import { projectQuery } from "../../lib/queries";
import ProjectCard from "../../components/cards/project-card";

export default function ProjectsIndex({ projects }) {
  return (

        <>
          {projects && (
            <Grid>
              {projects.map((project) => (
                <ProjectCard
                  key={project._id}
                  website={project.website}
                  image={project.image}
                  title={project.title}
                  slug={project.slug}
                  description={project.description}
                  collaborators={project.collaborators}
                />
              ))}
            </Grid>
          )}
        </>

  );
}

export async function getStaticProps() {
  const projects = await sanityClient.fetch(projectQuery);

  return {
    props: { projects },
  };
}
Thanks in advance
🙌
Jun 23, 2021, 1:01 PM
Hey
user M
Thanks for your assistance on this. Although this is successful in outputting a BG image, it unfortunately outputs the main project image 3 times instead of the image for the people we reference the project. Could this be because we are using
image
the card which clashes with the main project image? Or perhaps my implementation of the card in the index page?
Jun 24, 2021, 11:15 AM
Ah, I think it should be the following, otherwise it will just use the main image:
{collaborators &&
   collaborators.map(collaborator => (
     <Avatar key={props._id} 
        image={collaborator.personReference.image} 
     />
   ))}
Jun 24, 2021, 3:47 PM
AMAZING, it works! Thanks a milli, Racheal :fast_parrot:
Jun 25, 2021, 3:21 PM
Perfect! Happy to help!
Jun 25, 2021, 3:58 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?