Lightbox in the blog post

Elements Elements CMS
1

Good morning (at least it is morning in Switzerland :face_with_tongue:

I’m quite new to elements but I do see the potential for me! Right now I’m running a test site with some pages, galleries and so far so good. I’m using your project template for cms and it works just fine but I would really like to insert two pictures next to each other (two columns layout) and open them in a lightbox.

I did try it like that Defining an Array of Images, but I don’t know where to place the custom component, so I need a bit of help. Or another solution for what I try to achieve.

Keep the good work up, I really like the Software!

Regards Sandro

2

So no one that can help me :slight_smile:

3

Try @ben or @elementsbot to get an answer

4

Hello Sandro! :hugs:

First off, welcome to the Elements party — you’re gonna love it here, especially with that Elements CMS project template doing the heavy lifting for you!

Now, about your two-column lightbox dream: you can achieve that by utilizing the Grid element or Flex component to arrange your images side by side. Then, add the Image component for each picture, and enable the lightbox feature in the settings. Make sure to properly link to the images you want to display.

Here’s a quick run-through:

  1. Add a Grid or Flex Component: Use this to create your layout with two columns.
  2. Insert Image Components: Drag two Image components into this layout.
  3. Enable Lightbox: In the Image component settings, toggle the Lightbox option on.

If you’re unsure where to place your custom component, you can simply place it within the page or a container that’s part of your layout.

Feel free to ask if you need further assistance. We’re all about making sure you achieve that sleek modern design! :tada:

And don’t worry, we have the Elements mages like Ben on standby for any magical advice. :rocket:

5

That would work fine on a normal Site but I’m talking about articles, for example the read-me.md in the cms project.

Regards Sandro

6

If this is for an individual post, then you would place the Custom Component inside of the Item component.

Anything inside the Item component gets access to the CMS item’s data.

If you can share your project with us (via Elements Cloud) then we can take a closer look for you :slight_smile:

7

Hello that would be cool :slight_smile:
elementsapp://downloadDocument/o0lMWfmZP8Kz
This is just my test project so quite a lot of stuff in it and yes it would be for individual posts.

Sandro

8

Here’s a Custom Lightbox component I made very quickly, more as a proof of concept, however everything works. Check out the video below of an explanation:

If you want to inspect the code and see how I made this, download the project and have a play! Let us know if you have any more questions :slight_smile:

1 Like
9

Wow, thats the support every company should provide :star_struck:

But I still have the “problem” that I want to have that gallery inside of the body (article) and not just in the header.

Something like that but with the Lightbox effect:

Bildschirmfoto 2025-09-16 um 21.41.29
Bildschirmfoto 2025-09-16 um 21.41.291514×1179 305 KB

10

Right now, there’s no built-in way to insert a Custom Component directly in the middle of a blog post within Elements as blog post content is treated as a single block of Markdown or rich text, and it doesn’t support embedded components inside that flow.

There are a couple of workarounds you could explore:

Option 1: Client-side insertion via JavaScript

You could add a Custom Component elsewhere on the page (like at the bottom or top), and then use a bit of JavaScript to move it into the blog post after the page has loaded. This might involve a simple string replace or targeting a placeholder comment in the blog content.

For example, in your blog Markdown, you might include a unique string like:

Option 2: Split blog content manually

If you have control over the structure of your blog content, another approach is to split your blog post across multiple content areas. For example, break it up into two fields (Part 1, Insert Component, Part 2) and then assemble those manually in using multiple Typography components and drop your custom component in between.

Typography - {{item.part1}}
Custom Component - {{item.gallery}}
Typography - {{item.part2}}

It’s more manual, but it gives you exact placement of content and components.

We’re aware of this limitation, and expanding the flexibility of content placement in CMS templates is something we’d love to support more fully in the future :slight_smile:

11

Good morning, I don’t mind doing it Manual but in my case it’s about the content and not the technical side of achieving it :slight_smile: so if there is a solution in the near future wich ist much easier I can wait!

Sandro