How to make a slide post?

[hokod]

Suppose I have 3 images posted by 3 links, and 3 captions for these 3 images.
How to make a slide post like in the 4th image (in this topic)

iMage1:

image2:

image3:

=================
image4:

Thanks!

[merefield (Robert)]

It’s not possible to achieve this on the Topic List because only one image is serialized per Topic.

However, on a single Topic you could look at: Slick Image Gallery

[hokod]

Thank you for your support.
As you say is not feasible.
So if I just want to create a slide for the content (no images),
then how can i create slide for conent in post.

[merefield (Robert)]

You can embed a Google presentation as a slideshow in an iframe:

You need to permit this source for iframes in allowed iframes

Google Slides - create and edit presentations online, for free.

Once you’ve made your presentation, go to File -> Publish to Web and copy the link at the end of the short wizard.

[merefield (Robert)]

Same thing also works with PowerPoint Sign in to your Microsoft account

Use Office 365 online, access Powerpoint and once ready go to File -> Share -> Embed to get the iframe link

[hokod]

I’m worried, this will affect SEO,
because the content is not in the discourse editor.
Instead, the content is in Powerpoint (google , or Microsoft)

[merefield (Robert)]

I think it’s a lot to expect Discourse to be a fully featured presentation tool

Perhaps you can include Markdown versions of the slides in the following posts.

[hokod]

I hope, there is a way to create a slide for the content in the post (discourse).

[jrgong]

Currently exploring options as well. It should be possilbe to implement it as theme component, right?

E.g. there are markdown to slides libraries that could be used:

Here are the best GitHub repositories for this, ranked by how easily they can be adapted into a Discourse Theme Component.

1. Remark.js (Highly Recommended for Discourse)

• GitHub: gnab/remark

• How it works: Remark is designed specifically to run entirely in the browser. You feed it a Markdown string (where slides are separated by ---), and it dynamically generates the HTML/CSS required for the presentation on the fly.

• Why it fits Discourse: Because it requires zero build steps, you can easily load the remark.min.js script via your Discourse theme component. You can capture the Markdown from a user’s post and pass it directly into the Remark engine.

2. Reveal.js

• GitHub: hakimel/reveal.js

• How it works: Reveal.js is the heavy hitter of web presentations. While it is primarily an HTML presentation framework, it has a built-in Markdown plugin.

• Why it fits Discourse: It is extremely feature-rich (speaker notes, PDF export, animations, math typesetting). It can run client-side, but it is much heavier than Remark.js. You would need to load the core Reveal library, the Markdown plugin, and the Reveal CSS theme into your Discourse component.

3. Marp (Markdown Presentation Ecosystem)

• GitHub: marp-team/marp

• How it works: Marp is the modern standard for Markdown slides, utilizing a concept called “Directives” to handle CSS theming directly inside the Markdown frontmatter.

• Why it fits Discourse: Marp relies heavily on CLI tools and Node.js for rendering. However, they do offer Marpit (@marp-team/marpit), the core framework which can parse Markdown and output HTML/CSS. Implementing this in Discourse would require you to bundle Marpit into a client-side JavaScript file using a tool like Webpack or Rollup before uploading it as a theme component.

---

How to Implement This as a Discourse Theme Component

To repurpose one of these (like Remark.js) into a Discourse theme component, you’ll want to use the Discourse Plugin API to intercept specific Markdown blocks before they render on the page.

Here is a high-level blueprint of how you can build it:

1. Define a Trigger: Decide how users will tell Discourse to render slides. A great way is to use a specific code block language, like ```slides or a Discourse BBCode wrap like [wrap=slides].

2. Load the Library: In your theme component’s about.json, include the external script for Remark.js or Reveal.js so it loads when the user visits the forum.

3. Decorate the Cooked Content: Use the Discourse JavaScript API (api.decorateCookedElement) to look for your trigger blocks whenever a post is rendered.

4. Render: When the API finds a ```slides block, it hides the default code block, creates a new <div> container, and initializes the slide library inside that container using the raw text from the code block.