How can I make responsive images from Ghost (Content API) to Next.js?

Question

I've created a blog website based on this video: https://www.youtube.com/watch?v=1SYU1GorO6Y. Where it has:

• Next.js as the frontend,
• Ghost CMS as the backend (with Heroku), and
• Vercel for deployment.

Also used TypeScript and Sass used for this blog.

I've researched on who to do it but this was the only thing I found: https://forum.ghost.org/t/responsive-images-from-content-api/13481 where it says that they do not currently have it, but this was a last year.

I am not sure if it is a problem on the Ghost CMS or the way I've extracted the information using html <div dangerouslySetInnerHTML={{ __html: post.html }}></div>.

So I would like to know how to make my images responsive or at least center them. I am also open to any suggestions for my first blog website.

[sulg].tsx

const Post: React.FC<{ post: Post }> = (props) => {
    console.log(props)

    const { post } = props
    const [enableLoadComments, setEnableLoadComments] = useState<boolean>(true)

    const router = useRouter()

    if (router.isFallback) {
        return <h1>Loading...</h1>
    }

    function loadComments() {
        setEnableLoadComments(false)
        ;(window as any).disqus_config = function () {
            this.page.url = window.location.href
            this.page.identifier = post.slug
        }

        const script = document.createElement('script')
        script.src = 'https://apdv-dev.disqus.com/embed.js'
        script.setAttribute('data-timestamp', Date.now().toString())

        document.body.appendChild(script)
    }

    return (
        <div className={styles.container}>
            <p className={styles.goback}>
                <Link href="/blog">
                    <a>Back</a>
                </Link>
            </p>
            <h1>{post.title}</h1>
            <p>{post.reading_time} minute(s) read</p>
            <div dangerouslySetInnerHTML={{ __html: post.html }}></div>

            {enableLoadComments && (
                <p className={styles.goback} onClick={loadComments}>
                    <a>Load Comments</a>
                </p>
            )}

            <div id="disqus_thread"></div>
        </div>
    )
}

export default Post

Answer 1

You can grab the class with global jsx :

<style jsx global>{`
    .kg-image-card img {
      width: auto;
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      margin: 1em auto;
      box-shadow: 38px 24px 50px -21px #C9D3DF;
    }
 `}</style>