[BETA] ShortCodes: Place Galleries, Tables or Any Other Elements Component Inside Your CMS Text

Dear Elements Weavers,

As I’ve mentioned here a few times, I’m moving my WordPress travel blog 500places.com over to Elements. SkyCast and Table of Contents were the first components I built for it – each one extends Elements CMS to do something my blog needs.

The biggest extension is now coming soon, and I’m excited to introduce it: ShortCodes. The name is inspired from WordPress, where shortcodes work in a similar way. With the coming ShortCodes component, you can place almost any Elements component anywhere inside the Markdown text of a CMS entry – galleries, tables, author cards, SVG graphics, audio players – nearly everything Elements has to offer.

The idea is simple: create a regular Elements page in the ShoerCodes folder, build your block on it and give its container an ID. Then type one line in your CMS text, exactly where the block should appear:

[[ shortcode.galleries.gallery-01 ]]

“galleries” is the name of your page, “gallery-01” the ID of your container. That’s it. When the page loads, the line is replaced by the real component, right between your paragraphs. Change the block on its page, and it updates in every post that uses it.

Everything keeps working the way you built it: lightboxes open and close, audio players play, tables stay interactive. Your blocks also adapt to the space they get. Build a container on a full-width page, place it in a narrow text column, and it uses the layout you designed for that width – so the breakpoints you check once are exactly what your readers see.
ShortCodes is now ready for a beta test, and I’d love to ask for your help. It works with every component I have tested so far – help me find the ones it doesn’t.

I’m looking for up to five beta testers with some experience in Elements CMS. If you’re interested, send me a PM or leave a comment below. Payment is made in the finest currency: good karma. Exchange rates may vary. :grinning_face:

Happy weaving!


That’s how your Blog can look like with ShortCodes

There’s already a demo site online, so you can take a sneak peek.
:backhand_index_pointing_right: Live demo: ShortCodes demo posts

I have to say, I am impressed. This really does expand CMS capabilities. Is there any concern that at sometime Elements CMS won’t parse out the codes?

Thank you, that’s great to hear! Opening up Elements CMS to all these components was exactly the goal – it’s what my own blog needed most.

To your question: ShortCodes doesn’t rely on Elements CMS to parse anything. For the CMS, the shortcode is just a line of text, and it’s published exactly like the rest of your post. The ShortCodes component then finds that line on the finished page and replaces it with your block.

The only thing that could get in the way is if a future Elements version started to treat double square brackets as special Markdown syntax. I think that’s very unlikely: Elements CMS sticks to basic Markdown, and double square brackets aren’t part of it – nor of the common Markdown extensions. And if it ever did happen, I can adjust the pattern ShortCodes looks for, and existing posts would only need a quick search and replace.

Woah, this is super interesting, congrats on the announcement!

I’d buy this now. It’s only going to get better. Definitely worth the investment.

That looks very useful. Can’t wait for it to be ready.

Thanks for the good feedback.

Would you be interested in testing a beta version?

Great job @WeaverPixel ! This looks great!

Let me know when it becomes available - I use local CMS not via a browser

I would love to try this out.

Thanks Mark @Mark_Woolwine

I will soon send you a PN :+1:

Good morning Markus,

I would like to apply for a beta version with you :upside_down_face:

Best regards
Mike

Thanks Mike @Blumik
I will send you a PN soon!

Good morning! :blush:
Today I took a look at the shortcodes – I always like to try out new plugins. First, I tried hovVver because there were problems with it before. And I have to say: It works really well! I actually read the instructions twice, but now everything is clear – hovVver wasn’t that difficult after all. Let’s see if it gets trickier. :wink: And if that works too, I’ll be seriously impressed – and then questions come up like: “How do I, for example, make an image smaller and centered in Markdown?” At the moment, that’s either impossible or only doable with a lot of fiddling – and even AI doesn’t really understand it. Markdown is especially important for bloggers. Right now it’s very limited, but with this tool, I’d already say -----AWESOME.

If it is transporting the component into Markdown couldn’t you put the image in a container that has all the sizing and bring that container into the Markdown?

Hi Mike @Blumik

it’s like @ercross wrote, put the image in a container and then you can do all the sizing and positioning you want. ShortCodes then brings you container (with the image) to the Markdown.

Look at the example I sent you at then “ads” section. There it is done but with an SVG instead of an image.

Hello Moin! :blush: I think a little misunderstanding has crept in: It’s not about shortcodes at all - they work exactly as you described them. We’re probably confusing two of your programs or plugins. It’s about the plugin Table of Contents

Hello Marcus,

what I noticed.

Here are the pictures



The color you choose is not copied into the social media icons.

I just used the cover. However, in the work view, it stays the same as in the third picture when you make a preview.

Mike

If I understand you correctly, what you’re describing isn’t a bug. Please take a look at your settings: the colors you changed apply to the hover state, not to the normal view. Could you please check that? Then again, I may have misunderstood you.

Yes, you’re right! I tried it out at the container once – there was a problem in the background before, but now it’s working. Thank you very much! :blush: