How to make a blog with images between the text

How to design a Content Type (let’s name it blogpost) that is used for representing posts for a blog and each blog-post contains text and images between the text?

The users would not have access the admin panel. They will be using a WYSIWYG editor or a Markdown editor to create a entry to the blogpost Content Type via the Strapi API. And then each blog post will be pulled via an API call to Strapi and posted.

What is the best way of handling the images for this case?

1 Like

In this case I believe your WYSIWYG editor will need to upload these images via the upload API which will return a relative URL response (depending on if you are using the local provider or a 3rd party like AWS-S3). If you are using the local provider, take the relative response and concatenate that with your public API domain and inject that as a markdown image link.

So say you are uploading a cat.png, the url response that Strapi is going to return is /uploads/cat_3526003b5b.png and you concatenate that with to get and your editor drops that into the body as ![](

Now if you are using a 3rd party upload provider the API response will just be the full URL to the image so the editor could just drop that directly into the markdown inline image format ![](yoururlhere)

The key point being your editor needs to be able to support custom logic for inline images and hooking that into the Strapi upload route: Upload - Strapi Developer Documentation which is handled as formdata.


I’m trying to solve a problem I have with the WYSIWYG editor and this post seems related to what I’m searching for.

When inserting media like image with the WYSIWYG editor, I want to prefix the returned path with my api base url like in this post here but the solution seems to be deprecated.

I want to know which component do I have to customize.
The idea is to add my api base url in the server.js and then concatenate it in the wysiwyg editor.

so my server.js will look like this :

module.exports = ({ env }) => ({
  host: env('HOST'),
  url: env('URL', 'http://localhost:1337')

And in the customize component code, I will add something like

strapi.config.get('server.url') + the url returned by the api;

Thanks for help :slight_smile:

1 Like

Hello, somewhat related to this post – I’m trying to determine if there is a possibility to have thumbnail images embedded in-line with the blog body copy, so that when you click on the thumbnail it expands into a pop-up window. Is this something that is possible using Strapi?

It can become complicated since there is no a easy way to handle images and videos on Mardown language (specially videos on the Strapi’s default rich text editor.

Another way is using DynamicZone, but it is also complicated since is not easy to parse DynamicZone response format on TypeScript.

@cnik I had this same issue I resolved it using a proxy. However, note that I am using angular with strapi.
Check out the docs for those using angular Angular