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 BlockThe 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.
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 HeroAs 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 BlockThe 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.
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 RecordSometimes 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 PopupThe 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.
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 HeroWe 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 BlockThe 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 FormThe 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.
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.