Hi everyone.
Over the past several months, I’ve been working on a stack that can be used to publish data that’s stored in Airtable databases. I think I’m finally at a point where I’m ready to release it. I’m planning to do that next Tuesday, May 5th.
In the meantime, I’ve put together a preview video here:
https://timdietrich.me/stacks/air-publisher/
If you have any comments, questions, or suggestions, please let me know.
Thanks,
Tim
Sweet! That would be cool.
Hi everyone. I’ve just released Air Publisher, a free Airtable database publishing stack. A demo video, documentation, and more are now available.
Wow, very cool - thanks Tim. Just downloaded the stack and checked the documentation. Am working with G-Sheets and the G-stacks but Airtable looks and feels more intuitive and designwise so much better than G-Sheets. And the ability to add a form to fill an Airtable is also great - thanks for this great job and giving alternatives to G-oo-gle… could easily become a “light” CMS for Rapidweaver designers’ clients!
Tom
Thanks Tom!
The stack has been a lot of fun to work on, and somewhat stressful, too. I’ve developed a number of private stacks (primarily for use on client projects), but this is the first stack that I’ve made available to the public - so this takes things to a whole new level.
On a side note: I’m also working on a similar stack that can be used to publish data that’s stored in FileMaker databases. It’s a bit more complicated, due to how FileMaker itself works (especially portals, binary data stored in container fields, etc). In any case, I’m hoping to release that stack in a few weeks.
Thanks again for the feedback, and please keep it coming!
Tim, Great Job for your first Realease!
It’s great to have an alternative for dynamic data. I use Live Data from GoogSheets, It works realibly well, but it is limiting in terms of filtering and adding new records automatically from sheet to layout. I have also used Gsheets which is great at filtering data, if/then/else, but is limited in using other stacks for layout control/ buttons, images.
It’s great to have another tool for dynamic data. GoogSheets does not really handle image imbed very well, while Airtable has a nice Drag-n-Drop for images which makes things much easier.
I really need at the least, to buy you a coffee for all your efforts.
Please send me your paypal DM, I want to send you something for your time.
Can’t wait to see what you are doing with Filemaker.
Thank You.
Goodness gracious. I’m like a kid waiting for Christmas morning with this Filemaker stack. The Airtable stack is amazing. You are amazing.
Hello @timdietrich,
building my first site with air-publisher. Easy to setup and connecting.
Is there a chance to create a columns layout / grid instead the list? And if, how?
Thanks for helping out - and where can I give a donation to you for the stack?
Hi Tom.
It is possible to display the records as a table, but it’s a little tricky. It involves writing some HTML and possibly some Javascript, too (if you want to publish images).
Here’s how it works: First, add an HTML stack to the “Intro” zone and add code to open an HTML table. Then add an HTML stack to the “Record List” zone to generate the table rows. And finally, add one more HTML stack to the “Outro” zone to close the table. (When adding the HTML stacks, be sure to uncheck the “Render HTML in Edit Mode” setting.)
I’ve attached a few screen shots of a RapidWeaver project that demonstrates the technique. I’ve also posted an updated demo project to the Air Publisher Downloads page ( https://timdietrich.me/stacks/air-publisher/downloads/ ). It includes a second “Designers” page that renders the records as a table.
One more thing: While I haven’t tried this technique with a grid, I believe it would work. You’d open a grid container in the Intro zone, add the grid items in the Record List zone, and then close the container in the Outro zone.
I hope this helps. Let me know if you have any other questions.
~ Tim
Thanks Tim,
for the fast reply and the examples. I think I was not clear enough with my question.
I want to show the entries in a grid (not the content of the entries). I suspect it would be necessary to “tell” Air Publisher to show a certain number (3, 4 or 5) entries side by side. G-Stacks has this option which is great (screenshots attached) and works responsively with breakpoint settings. Example comes from a GSheet. But the layout of the G-Stacks with boxes is quite a bit of work so I was looking for easier alternatives.
Air Publisher plays very nicely with other stacks even multiple layers or fixed heights etc. Great job!
Hi Tim,
In your demo video for Airtable DPS, you create a table with images, and the images
are displayed at their origial size/ratio, so some are bigger/smaller/taller, etc.
If I wanted all the images to be a constant size, let’s say 100x100 px, and have image
display options such as, “shrink / stretch to fit” or “shrink / stretch to fit - maintain ratio” or some other combinations, to keep all the image boxes consistant, what would be the best way to do that?
Thank You.
Tom,
Ok, I think I understand the layout that you’re trying to create.
Take a look at the screen shots below. This grid-like layout can be achieved by adding a 1-column stack to the “Record List” zon, and setting its Fill Mode to “float.” I’ve attached a second screen shot that shows the settings for the 1-column stack.
You might want to experiment with alternatives to the 1-column stack. For example, if you use the Foundry framework, you might want to experiment with the Card stack, the Display stack (which is part of the Foundry Thunder Pack), and so on.
I am considering developing a new add-on stack that would generate a “real” grid, but I’m not sure when I’ll get to that. I’m currently working on a FileMaker version of Air Publisher, as well as versions that will support MySQL, PostgreSQL, SQLite, and MS SQL Server databases.
~ Tim
Great question!
In hindsight, I wish that I had added options for things like min/max-height, min/max-height, alignment, and so on, to the Air Publisher Image stack. At some point I might add them. In the meantime, here’s an admittedly odd work-around…
You can overload the “Alternate Text” setting for the Air Publisher Image stack, and add in-line styling. See the screen shot for details. In that example, the value isn’t fully displayed, so here it is:
{{name}}" style="align: center; max-width: 290px; max-height: 290px; min-width: 290px; min-height: 290px;"
The first double-quote will close the alt attribute of the image tag. Everything that follows the first double quote will appear in the tag - so in this case, that’s the style attribute.
I use this technique often with other stacks. It’s an interesting way to force in-line styles, or anything else for that matter, into stacks that don’t support settings that you need. This technique doesn’t always work, but it’s worth a try when you’re in a jam.
I hope this helps.
~ Tim
Thanks a lot Tim,
I always forget about about the “float”. Works. Using the fixed height stack from Defligra I can control the output and get what I want/need.
Looking forward to your solutions with MySQL!!
Thanks again,
Tom
I’m close to having the MySQL stack ready for testing. It’s very much like the Airtable stack, with support for the intro, record list, outro, and no records drop zones - and of course, support for token substitutions. The big difference is that you have to provide a SQL query to specify the record(s) that you want to retrieve / publish. The nice thing about that, is that you can join to multiple tables, easily sort the records, use functions, and so on.
Below are a couple of screen shots showing how the stack works. In the example, I’m using @joeworkman’s Warehouse Image stack to display the product photos.
I’m hoping to release the MySQL stack before the end of the month, along with the FileMaker stack. That might be a little ambitious, but we’ll see.
~ Tim
Thank You Tim. Yes, That does help, I was trying to grid things and forget about float options.
Let me see what I can work out.
As for Filemaker, and as much as I have salivated for a Filemaker connection to RW over the years, I now think it would be great for local development, but less useful for real production use.
A Filemaker solution would require a FM host, which is not that common, then a copy of
Filemaker server, which has no upgrade path as of late, so that means buying every new version for every upgrade, and quite frankly FM is just slow. Great for local dev and data gathering organiztion and front-end schema, but less great for real world usage. Not to mention a ODBC connector, limited FM to SQL interaction, etc. So, as much as I still would like to play around with it, I’m a little conflicted on how I would use it. The Filemaker roadmap has been tragic over the years. FM should have had a free reader like Adobe Acrobat to drive adoption, and a paid version to do the dev, and should have got on-board with a direct SQL backend ability with no hassles. FM has been disappointing.
So, excited to see the MySQL version. It’ll just be easier to implement as all Apache hosts will have and MySQL options available and are included for free in most hosting plans.
Thank You for all your help, can’t wait to run the SQL version.
Hello Tim and thank-you for your Air Publisher Stack.
I’m trying to use long text Airtable fields with format (I think it is markdown) but it doesn’t display in the Rapidweaver site.
Do ou have any advice ?
Here is an example: Untitled Page | FAQ
Hi Thierry,
Welcome to the forum. Have you purchased Stacks and entered the serial number? I only ask because I can see the “Buy Stacks” ribbon in your screenshot and wonder if Stacks is still in demo mode, so limited functionality that would stop the Air Table stack working?
Hi Thierry.
Great question!
You’re correct - the Airtable API returns formatted long text fields using Markdown, which is a nice feature of the API. However, because of how the Air Publisher stack works, using a Markdown stack to convert the markdown returned by the API to HTML is problematic. (Specifically, the issue has to with when Air Publisher replaces tokens.)
I do have a solution for this, but it’s a technique that isn’t as straightforward as I’d like it to be. Essentially, it involves doing the “markdown to HTML conversion” on the client-side (using Javascript) instead of server-side (using PHP).
Here’s a screenshot showing some formatted text sourced from an Airtable base.
At some point, I’ll write up a blog post and provide a sample RapidWeaver project that demonstrates this technique. In the meantime, here are some notes on how the technique works.
First, in RapidWeaver, pull up the page that you want to display the formatted text on. Then, in the Inspector, select HTML, and click on the Head tab. Then paste in this code:
<!-- Source: https://marked.js.org/ -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<!-- Source: https://locutus.io/php/strings/nl2br/ -->
<script>
function nl2br (str, is_xhtml) {
if (typeof str === 'undefined' || str === null) {
return '';
}
var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}
</script>
Next, in the Record List Stacks area of the Air Publisher stack, where you want the formatted long text field to be displayed, use this code:
<script>document.write ( nl2br( marked(`{{Formatted}}`) ) );</script>
Be sure to update “{{Formatted}}” token with the name of your field. Also, be sure to retain the backticks (`) that wrap the token.
So there are two Javascript functions involved. One converts the markdown to HTML, and the other retains any line breaks in the field.
Here’s another screenshot. This shows the project’s stacks, etc.
Then preview your page, and you should see the field values displayed properly (with the correct formatting).
Note that this technique also works with Airtable fields in which you’ve directly entered Markdown. In other words, you can enter Markdown directly in long text fields, and then have it display properly on your site. So potentially, you could use Airtable, the Air Publisher stack, and Markdown, as a lightweight CMS.
If you have any questions about this technique, please let me know. Also, I’ll be sure to post back to this thread when I have a blog post and sample project available.
Thanks,
Tim
