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

user_15333121 0
Viewed 387

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
ghost-blog typescript next.js reactjs sass
2 Answers

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>
user_184197050

Rendering the HTML of your rich text is simple, but comes without much customization, so you can put your div inside another div with class and style it.

<div className='post__html'><div dangerouslySetInnerHTML={post.html}/></div>

.post__html img {
  width: 300px;
  height: 300px;
  border-radius: 20px;
}

But all images on the blog post will take the same styles.

If you want more customization, you can fetch the raw version of the blog post, you will have ultimate control over how these nodes are presented to the user, you can read more here

user_148397820
Related