Building a Blogging System with Airtable

Blog Builders

Photo by Hunter Harritt on Unsplash.

Login Page

This system is a pure portal for Writers to login and write, edit and submit articles for publication. The writers apply to join from the 'write for us' page on the blogs so we dont have a public homepage or signup page on this system.

As this is a client portal only, we put all the pages (including the homepage) behind a login.

How its made…

Airconnex Login Block

The login overlay is made by just adding a login block to the page. After people succesfully login they can see the rest of the page content.

Homepage

After logging in, the writer can see the list of publishers available on our network. The writer can choose which publisher they want to submit an article for by just clicking on the publisher. This is an example of how loops can be used to make multi-step forms. So rather than adding a field to the 'new article' form where they choose which publisher, we ask them to make that choice first and then take them to a dynamic page for the publisher.

How its made…

Airconnex Hero

As usual we have included an Airconnex Hero block to give a very clear prompt to the user on what to do… and to make the page more colorful and appealing.

Airconnex Loop Block

The loop is derived from a table of publishers in Airtable.

Each publisher links to a dynamic page for the publisher. We chose to use record id for the dynamic value as it's the easiest to maintain (the values are always unique and never change) and we dont need pretty urls because the whole site is behind a login anyway.

Article Loop

After choosing the publisher, the writer can see the articles they have submitted to this publisher and also add a new article using a popup form.

How its made…

Airconnex Single Record

Sometimes a header block is a bit overpowering on more functional pages. So we can use a Single Record block instead. This allows us all the same formatting options as the loop block, but with a single item. Its ideal for situations where you have some text and an image that you want to arrange in a side-by-side format.

Airconnex Form Block > Banner Popup

The form is made in the same way as any other form, using the Airconnex Form block. It has some hidden values such as the Publisher (linked) and the Writer (linked). So, when the form is submitted it will add a new record to the Articles table, but with the Writer (user) and the Publisher (page) values linked.

To make the form appear inside a banner / popup we just use the Section tab and choose the banner popup. This will make the form appear when the user clicks the button on the banner.

Article Editor

After adding the article from the form on the previous page, the new article will appear in the listing. The writer can then click the link to view (or edit) the article.

We have tried to make this editing page match the appearance of the publishing website as much as possible, so the writer can really see the result when published. This includes applying some of the publishers' branding, logo and colors to the page.

How its made…

Airconnex Login 

The login block is necessary to make sure the page is not accessible to the public, although all the 'backend' pages on Airconnex are set to repel indexing from search engines. It also allows us to tie a specific user to media they added into the media library.

Airconnex Hero

We used a hero block at the top of the page to give the visitor a nice visual welcome to the page and present the article title.

Airconnex Text Block

The text block can be configured to allow front end editing when a user is logged in. This emulates the typical WYSIWG editing experience most writers prefer (similar to the vanilla WordPress editor). The front end editor also allows access to a media library so images can be added to Airtable and inserted into the text block as HTML tags.

Airconnex Form

The form at the bottom will change the status of the article, indicating to the editors that the writer is finished editing and it's ready to be published.

User Management

Once you are ready to invite users onboard, just visit the connection manager and click on User Management. Then you can issue passwords from Airconnex via email to your account users.

While developing the site, you can use the adminstrator 'Login As' tool to browse the pages as any user.

How its made…

Connection > User Management

The users and accounts come from a table in Airtable for Writers, and we issue passwords to the approved writers from the Airconnex User management system.