Work in Progress: CMS Replacement for Foundry 3 Alloy

[logrunner (Jon)]

I have seen various posts referencing a CMS for Elements, so I thought I would share that over the last month or so I have been working with ChatGPT (OpenAI) and Le Chat (Mistral AI) to create a Foundry 3 Alloy replacement that I will be able to use in Elements.

As Alloy is a significant part of my Rapidweaver / Stacks/ Foundry 3 website that I want to move to Elements, getting a blog sorted was a priority. Without a replacement, I wouldn’t be able to migrate to Elements. I have a lot of blog posts, so one prerequisite was that my new version could read and show all the existing ‘Alloy’ blog posts.

At this stage, I haven’t attempted to replicate everything available in Alloy but I have added some new functionality that I was looking for.

I use Sitelok by @vibralogix and one of the bugbears I have with Alloy is that it has a roll-your-own security which only allows two user credentials to edit the blog. I wanted to be able to use Sitelok to control access so that all my security is one place. This means there is no inbuilt security in my new version as it will be controlled by Sitelok.

With progress so far I can display the existing posts in any of the six layouts available in Alloy (this can probably be easily extended). An enhanced function is that you can have a specific layout on the first page and a different (or the same) layout on subsequent pages. You can display blog pages before a date or after a date in ascending or descending order. This is useful if you want to setup blogs for say events happening in the future.

If a User is allowed to edit posts, then he is presented with an ‘Enable Editing’ button while browsing the blog and after clicking on this button (changes to ‘Disable Editing’), each post has three additional buttons (in addition to the ‘Read More’ button) to ‘Add’, ‘Duplicate’ or ‘Edit’ a post. All the posts use markdown (as Alloy does) and all the meta-data is used from existing Alloy blog posts, although it is reformatted into a new structure. It uses EasyMDE to edit the posts. This means that editing blog posts is done from the normal blog display as opposed to having a separate function.

Another addition is that there is an automatic ‘autosave’ of a the work-in-progress of the posts as you edit them (configurable but defaulted to 30 seconds) plus there is a manual autosave button for work-in-progress. This autosave doesn’t alter the original post being edited. This only gets updated when you click ‘Apply’ (you can continue editing) or ‘Save & Exit’.

When in editing mode, the body background colour is changed (default light green). There is a blog search facility, when a search is active it changes the body background colour (default light blue) so you know there is a search in progress when paging through the blog pages. Likewise when you edit a post and it is a draft (i.e. not published) the body background is changed from the default edit-mode colour to a draft mode colour (default light orange). When viewing the blog posts, there is a filter to show all posts (including drafts) or just draft (non-published) posts. Any draft post is identified by an overlay on the image (see example in first image).

It is largely working but I am still working with my AI colleagues on resolving some outstanding edge case bugs.

So this has all been written using standalone PHP (non-Elements) code. Once I have sorted out the last few bugs and stopped adding new features , I am intending to implement it into an Elements DevPack so I can drop it in as a component into my Elements Project.

I have primarily written this for my own use but with a view to making it generalised so it could be used by other Elements users.

Realistically it will be another month or so before the first ‘alpha’ of the Elements DevPack version is available for others to try.

Anyway, I thought I would share this update on where I have got to with this. I wouldn’t have dreamed of doing this without having Elements as the end destination and the help of AI.

PS. The steampunk themed images of Bengal cats have been created using (ChatGPT, Le Chat & Grok)

[handshaper (Robin Mair)]

This is exciting. As an existing Alloy user this would definitely be something I would be interested in exploring.

[dan (Dan C.)]

Wow. I have to say I’m blown away by this

This is exactly the kind of thing the community needs, I can see see this being very popular, especially with those that previously used Alloy.

Can’t want to see this progress, keep us posted, and keep up the good work

[pumpkin (Fynn)]

How’s element’s own CMS/Blog implementation going btw?

[dan (Dan C.)]

This is just in the conceptual stage right now. We have some ideas on what we could do, but it’s low priority — We need to finish and ship the core app as a 1.0 before we can tackle this.

I believe other third-party options (like the one from @logrunner) will be available long before we have something to officially offer.

[thominator (Thom Hogan)]

That’s disappointing.

[pumpkin (Fynn)]

Wordpress it is for me then.

[trinube (Kim)]

@logrunner

So this has all been written using standalone PHP (non-Elements) code

If it’s not ‘protected information’ can I ask where the posts are being saved? If you’re using PHP I assume they could be sent to MySQL?

Just for kicks, I tried using Apple’s Image Playground to create an image of a steampunk bengal cat and got this:

For a free tool included with the OS it does a fair job. Pretty sure it doesn’t do Elements code though…

[logrunner (Jon)]

Nice image.

The posts, images and thumbnails are stored in folders on your site, as they are for Alloy.

Separate protection could be added, as edit access is controlled by a php variable being set to true or false. So it would be possible for someone else to add a protection layer and maybe store the posts in mySQL but as I am using Sitelok to protect my site, I didn’t want to reinvent the wheel for my use, so to speak.

By the way, it isn’t my intention to charge for this CMS component and I will be making it available FOC for other Elements users to use and modify as they wish. It could help other Alloy users to more easily migrate to Elements as well as being a CMS in its own right.

I have also got an associated blog post carousel component that accesses the blog post folders to display a rotating carousel of blog posts. You can stop play, skip forward and backward etc. Clicking on an image will take you to the blog post:

[bon]

Just have to say it’s really exciting to see people building components like this for Elements

If you need any help building your components, just give us a shout—we’d be more than happy to assist

[trinube (Kim)]

@logrunner

Nice image.

Just fooling around - I only discovered Image Playground last week.

@logrunner

The posts, images and thumbnails are stored in folders on your site, as they are for Alloy.

By the way, it isn’t my intention to charge for this CMS component and I will be making it available FOC for other Elements users to use and modify as they wish.

I have also got an associated blog post carousel component that accesses the blog post folders to display a rotating carousel of blog posts. You can stop play, skip forward and backward etc. Clicking on an image will take you to the blog post:

Sounds great - and very generous. The carousel idea is cool! Would it use filters or search to find posts?

I know nothing about Alloy (we used Wordpress) but having a simple CMS storing data on the server - with an option to expand to a database - would be a great addition.

[logrunner (Jon)]

@trinube

The carousel idea is cool! Would it use filters or search to find posts?

You can search when viewing blog posts in the blog post viewer (see first image in this thread). When you enter a search term it searches the title, categories, tags, summary and content. So it is pretty comprehensive?

I can take a look at adding a filter based on categories and/or tags?

At the moment there is no searching or filtering of the carousel images as the carousel is intended just to give an overview (I display will display it on my home page). I could probably set the Elements Carousel Component up so that a date range, number of posts and category can be pre-configured e.g. limit number of posts to display to the last 12 added or in the last three months etc?

[logrunner (Jon)]

I got sidetracked

Added in Categories and Tag filtering, which turned out to be slightly more complicated than I anticipated! Seems to be working now.

I am also working my way through the code to generalise it and make it more configurable via Elements Component Properties.

[dan (Dan C.)]

Woooweee, this is really shaping up!