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

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

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

Solution

I was able to solve this by looking at the raw output of my dangerously set HTML using the Inspector Tool! From there, I was able to highlight the elements I wanted to edit and see their class or id names for me to target with SASS.

This GitHub was also useful in figuring out the classes Ghost gives to the HTML: https://github.com/TryGhost/Starter/blob/main/assets/css/ghost/content.css