Insert Custom Widgets Into An Blog Post

Say, our blog posts need a slider (or any custom widget, a map, a chart, a table of content etc). What’s the best way to allow the writer to place the widget anywhere in blog post themselves? e.g writer might decide to put the sliders in the beginning, middle, or after a paragraph in a blog post. The blog post itself is written in markdown.

I should clarify here, the key here is using markdown. Richtext field can add bloks. However, we’d like to say with markdown for content editing. Is there anyway we can place a ‘marker’ inside markdown that reference another component? and we can fetch the components with content when generating static pages.

Hello Jim,

it is possible to add an internal link by clicking on the chain symbol in the menu of the markdown editor and then to choose a story of the drop down list when the option “Internal link” is checked:

Alternatively you could also create a component based approach with which you add all parts of your articles in form of components:

@Hannes, thx for reply.

I don’t get the first approach, we are not trying to add a link to another story, we try to include a widget(say a slider) in the blog post. would you mind clarify?

We thought about the second approach, however, asking our writers to breakdown a article and assemble it into components is a bit too much. it’s also a bit rigid, say, you have a slider after a intro markdown, later on, you decide you really want the slider to be in the middle of the intro, you have to break the intro into multiple bloks and insert the slider.

Is there any other possible ways to solve this?

Oops, now I see that the explanation which was below the images of the first solution seems to have been accidentally deleted when I was finishing the text.
To the first one:
You can create a story which holds the slider or other parts which you want to have in the content and load it using the full_slug in the link with the delivery API. This needs to be resolved in your implementation and could follow the steps:

  1. Check markdown content for links that start with / instead of https://
  2. Store such paths in a slugs array
  3. Send a request to our Content Delivery API to consume those stories using ?by_slugs=my/first/slug,my/second/slug
  4. use the content however you like

You could also take a look at creating a custom field type plugin with any type of editor which offers the needed features: https://www.storyblok.com/docs/plugins/introduction
You could create a custom version of the TinyMCE editor plugin https://app.storyblok.com/#!/me/plugins/396 or another Markdown Editor which offers extended capabilities.

Or the simplest is to use the richtext field because it has been optimized to allow such scenarios like the one you are describing. You can use components in it which can hold sliders etc.
For this one you will need to write a custom rendering function when using your own components:

thx for the pointers @Hannes. Will give both options a try.

1 Like