Contentful logo

Contentful Community

Rich text image as a link

This feels like a dumb question, but, in a rich text field, is there any way to add an image link (i.e. an image wrapped in a link element)? I can see that you can insert a hyperlink with a Link Type of Asset… I’m not 100% sure what this is meant to render as on a page, but there’s no way to add a URL, so I’m guessing this isn’t what I’m looking for.

This appears to be possible with a long text markdown field, as you can just insert the asset and then highlight the text and wrap it in a link, e.g. [![Hello world](//images.ctfassets.net/path/to/file.jpg)](https://example.com). I’d like to know if this is possible with a rich text field though… seems like a pretty basic use case.

Hi Mr. Sean, this is Alma from Contentful support :blush:

In Rich Text field, it is possible to add hyperlinks to image in Rich Text field, you will need to click on “hyperlink” -> choose “asset” in the “Link target” dropdown list:

For this use case, the key difference is that: in markdown you add the static asset URL, meanwhile in Rich Text you will “reference” the asset. This will eventually prevent any broken link in your website because you could modify an asset file in an existing asset.

Hi Alma,

Thanks for your response, however, this is not what I am looking for. What I’m trying to do is create a clickable image on my site, NOT a link to an image. In HTML this would look something like:

<a href="http://example.com">
  <img src="//images.ctfassets.net/abc123/some-image.jpg">
</a>

The only way I’ve found to do it is to create a new Entry (I’ve called it Image Link) with 2 fields, 1 text field for the url and 1 media field where you select an image. This way I can add an embedded entry block inside the rich text field.

This feels like a bit of a hack, is not the best experience for content editors and is a lot more difficult than it should be for developers, especially when using the SDKs to push content to Contentful.

I think a lot of other rich text editors allow you to just select the image and click on the link option in the toolbar of the rich text field where you can then input the destination url.

Please let me know if I’ve missed something, or if the method I’m currently using is the only way to achieve this.

Thanks