Image

The HtImage component lives alongside your post body. Instead of just rendering a plain old image it comes with some additional functionality out-of-the-box:

• The ability to click the image to view an enlarged version in a modal (like you might see on Medium and other blogging platforms.)
• We also display caption text right below the image within the body of content.

How to use

Unlike the HtHero or HtAuthor components, this component is meant to live alongside your article content. It is typically rendered by your headless CMS's "resolver" aka "renderer" aka "serializer" (depending on which one you use).

This differs based on your headless CMS of choice, but the basic patterns are the same. For example, if you are using Contentful's @contentful/rich-text-react-renderer library, you would need to pass custom components to the second argument of documentToReactComponents:

1<article>
2  {documentToReactComponents(myPostContent, RICH_TEXT_OPTIONS}
3</article>

To use our custom image in this instance you would simply construct RICH_TEXT_OPTIONS like so:

const RICH_TEXT_OPTIONS = {
  renderNode: {
    'embedded-asset-block': ({ data }) => {
      const { fields } = data.target

      if (fields.file.contentType.includes('image')) {
        return (
          <HtImage 
            src={fields.file.url} 
            alt={fields.description} 
            caption={fields.description} 
          />
        )
      } else if (fields.file.contentType === 'video/mp4') {
        // return video element
        // etc. etc.
      }
    }
  }
}