Is there a way to utilize InlineImage along with NextImage together?

I’d much like to reserve the image optimization that NextJS provides with vercel and it’s Image components, and also keep the ability that tinacms’s amazing inline image capabilities. I’ve been playing around with it for abit and I’m not sure how to make it work.
I wanted to know what my options were, if there was a work around to be able to get best of both worlds, or if it’s an either or type of situation. I couldn’t find any info in the docs and would appreciate anytype of guidance.
Thank you!

We didn’t get a chance to experiment with Next.js Image component, you might be able to make it work by passing children as props as it’s done for Gatsby image?

Please let us know if this works, and we’ll update the documentation.

It does :slight_smile:

I’m using tailwind with the aspect ratio plug-in, but check the below:

<InlineImage
  name="image"
  parse={(media: any) => {
    return `/${media.id}`;
  }}
  uploadDir={() => "/images"}
  alt="${name} illustration"
>
  {(props) => (
    <div
      className={`relative ${
        thisData?.aspectRatio ?? "aspect-w-4 aspect-h-3"
      }`}
    >
      <Image
        src={props.src || "https://source.unsplash.com/random"}
        layout="fill"
        objectFit="cover"
      />
    </div>
  )}
</InlineImage>

Will add a PR for docs shortly.

1 Like

Thanks for the feedback, interesting context with the aspect ratio.
It might feel cleaner to insert such a component with the ref-based inline API (to be released).

1 Like

It works! Sorry I’m late to reply. All i needed to do was add ‘raw.githubusercontent.com’ (since i’m using next-github-tinacms) to the images domain, in next.config.js, and just copy paste joeinnes’s code snippet.

Unrelated to this topic, but one of the things i got stuck on, was the nextjs limit on bodyParser of 1mb, and being unable to upload any image through the media manager, that was larger than 1mb. Might be helpful for future users if it was part of the docs, to add a config in the proxy-github api, that sets the sizeLimit to whatever they prefer (above 1mb). Was banging my head against the wall for a while with this lol.

2 Likes

Great to hear, thanks for sharing :hugs:

Yep :slight_smile: There are still issues with previews of files larger than 1MB though, but that’s a Github API limitation. If you set the sizeLimit to more than 1MB, it will work (as in, you can upload them, and your application will display them when not in preview mode), but previews greater than 1MB won’t load using the API Tina uses by default - the repository contents API.

There’s a tutorial here on how to get around it in general - I’m sure this could be implemented in Tina somehow, but I haven’t found it enough of an inconvenience yet personally to give this a go.

Note: I haven’t done enough research to confirm whether this is in fact the best way of doing it, and there are a few things that I’m not convinced about in that tutorial, but in principle, the idea that you’ll need to use the data API rather than contents is correct.

Oof. I hit that 1mb preview wall that you mentioned. You have no idea how much I appreciate you warning me ahead of time, cause other wise i’d be ripping my hair out again, thinking i somehow broke my code… again…

I looked at the tutorial and given how much more time efficient (and how inexperienced as a developer I am…if i can be called one at all), it is to just stick a brightly colored div saying ‘Image files over 1mb will not be displayed in preview due to Github Limitations’, than try to look under the hood and try to play reverse-jenga with my code… Reverse jenga, as in instead of taking out blocks, adding more blocks has a chance that everything that collapses!

Eitherways, Thank you again joeinnes!

1 Like

Welcome! Broke my head over it to begin with, eventually I went for a similar solution to you :slight_smile: