My Website Framework - Part 3: Text File Macros
The Framework creates content from several text files for: items (poems, stories, articles etc); collections of items; promotions of other content; and photographs.
There are two (content) files for items, the base file and then any additional author's notes. (In fact, there are many more possibilities if you implement richer pages, see my next article)
Collections use a single file - begining with a list of the items in the collection (terminated with '@@@') followed by a text description of the collection.
Promos can have a text file that firstly lists title and links, but then provides a full text description.
Photographs can have an associated text file that gives background information about the image.
All of this descriptive text (in any of these files) can be: simple plain text; HTML; or one or more of the 'macros' described here.
The purpose of these 'macros' is two-fold:
They ensure consistency in how content is displayed
They provide additional, sometimes powerful certainly complex, features
The full list of macros (currently) available is:
List macros:
ul-outline
ol-outline
ol-outline-numeric
ul-inline
ol-inline
ol-inline-numeric
image macros:
img
img-left
img-right
Callout macros:
callout
callout-left
callout-right
Grouping macros:
group
group-centre
Literal macros:
literal
literal-wrap
Other macros:
quote macro
table macro
chorus macro
audio-player
video-player
accordion
gallery-<name>
Examples
Lists
An unordered outline list
you can see has bullets
is displayed inside a white box
which has a black border
An ordered outline list
Has alpha enumerators
instead of bullets
in the same boxed style display
A numeric ordered outline list
Has numeric enumerators
instead of apha enumerators
but with the same boxed style
Inline lists
work just like outline lists
but do not have the boxed styling
They can be ordered or unordered (using enumerators or bullets)
and the enumerators can be alpha or numeric
The macros for these lists are:
###ul-outlineAn unordered outline listyou can see has bulletsis displayed inside a white boxwhich has a black border######ol-outlineAn ordered outline listHas alpha enumeratorsinstead of bulletsin the same boxed style display######ol-outline-numericA numeric outline ordered listHas numeric enumeratorsinstead of apha enumeratorsbut with the same boxed style######ul-inlineInline listswork just like outline listsbut do not have the boxed stylingThey can be ordered or unordered (using enumerators or bullets)and the enumerators can be alpha or numeric###
You'll notice from the top of this article that lists can be embedded inside lists, like so:
Here's a list of lists
The outer list is in the inline style
but it includes inner lists:
The first inner list
is an ordered outline list
using alpha enumerators
The second inner list
is also an ordered outline list
but this time using numeric enumerators
We can nest other things, like images inside a list:
Outline outer list
Inline inner list 1
line 1.1
line 1.2
line1.3
Inline inner list 2
line 2.1
line 2.2
line2.3
You can always nest one macro inside of another so that things like lists of lists, lists of images, lists in tables, tables of images etc… are all possible
Here's the macro for that last 2-level list with image:
###ul-outlineOutline outer list###ul-inlineInline inner list 1line 1.1line 1.2line1.3######imgarticles,images/my-website-framework-3alt text here image in a list100######ul-inlineInline inner list 2line 2.1line 2.2line2.3######
Images

Here's an image that floats left, with the following paragraphs flowing (on the right) with it.
Look at this long paragraph flowing round the image
An image grouped with some text. An image grouped with some text. An image grouped with some text. An image grouped with some text. An image grouped with some text. An image grouped with some text. An image grouped with some text. An image grouped with some text.
And another paragraph.And another paragraph.And another paragraph.And another paragraph.And another paragraph.And another paragraph.And another paragraph.
Here's what the macro for a left floating image looks like:
###img-leftarticles,images/my-website-framework-3alt text here image in a list200###
Tables
We can display tables. Which can contain other things like images and lists. If the table is too wide for the screen (often the case on mobile) then tapping a row pops-up the detail of that row (which might otherwise have been off-screen). Tables also have 'zebra styling' so alternate rows have slightly different background shading - to make it easier to read the table:
(click or tap any table row to enlarge)
col 1 | col 2 |
---|---|
1 | 2 |
3 | 4 |
5 | 6 |
Here's the macro for that table:
###tablecol 1@@@col 21@@@23@@@45@@@6###
A more complex example creates a table that contains images and lists, such as:
col 1 | col 2 | col 3 |
---|---|---|
1 | 2 | 3 |
4 | ![]() | 6 |
7 |
| 9 |
That's quite a complicated table. Here's the macro that creates it, which is explained more fully later..:
###tablecol 1@@@col 2@@@col 31@@@2@@@34@@@^^^###imgarticles,images/my-website-framework-3image in table60###@@@67@@@^^^###ul-inline8.18.2###@@@9######
We can even embed tables in lists:
table inlist
list entry 1
col 1 col 2 1 2 3 4 5 6 List entry 3
To get an idea of how these special features make text files easier to write and more consistent, you can see here the standard HTML needed to make this 'table in a list' followed by the macro version:
Here's the HTML
<div class="user-ul-outline"> <p class="user-text">table inlist</p> <ul class="user-ul-outline"> <li class="user-ul-outline-item"> <p class="user-text">list entry 1</p> </li> <li class="user-ul-outline-item"> <div class="user-table-container"> <table class="user-table" id="myTable2"> <thead class="user-table-header"> <tr id="tr-2-1" class="user-table-head-row tablehead"> <th class="user-table-heading">col 1</th> <th class="user-table-heading">col 2</th> </tr> </thead> <tbody class="user-table-body"> <tr id="tr-2-2" class="user-table-data-row even-row tablerow"> <td class="user-table-data">1</td> <td class="user-table-data">2</td> </tr> <tr id="tr-2-3" class="user-table-data-row odd-row tablerow"> <td class="user-table-data">3</td> <td class="user-table-data">4</td> </tr> <tr id="tr-2-4" class="user-table-data-row even-row tablerow"> <td class="user-table-data">5</td> <td class="user-table-data">6</td> </tr> </tbody> </table> <div id="myModalTable2" class="modal table"> <div id="tablediv2"></div> </div> </div> </li> <li class="user-ul-outline-item"> <p class="user-text">List entry 3</p> </li> </ul></div>
And here's the macro version:
###ul-outlinetable inlistlist entry 1###tablecol 1@@@col 21@@@23@@@45@@@6###List entry 3###
I admit, macros can get a tad ugly, especially for tables
BUT they are a lot smaller, and I think more readable, than the raw HTML
as well as giving advanced functionality (like the table pop-up)
AND consistency of styling...
Callouts
'Aside' type information can be put into a 'call-out' that floats either on the left or on the right side of the page, with other content wrapping around it. Call-outs have a heading, an image and then more content (which can be a list or just text or whatever)
Callout

text of callout,
and the callout has a list
list a
list b
a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.
And the call-out macro:
###callout-rightCallout/me.jpgdemonstrating a callouttext of callout, ###ul-inlineand the callout has a listlist alist b######
Quotations
We also have standard quotations
so said ant
###quoteso said antWe also have standard quotations###
Choruses
To see how Chorus works in action check out Anxiety - or see this little example below... The idea is by default you only see the chorus in full the first time, later choruses just say 'CHORUS' - BUT if you click on 'CHORUS' the display changes to show the full chorus everytime -
CHORUS:
a chorus is a repeated block of text with the heading 'chorus'
The first chorus is displayed with it's heading
Subsequent choruses display the heading only
UNLESS YOU CLICK the chorus or its heading!
And look here's a repeat of the chorus above:
CHORUS
###chorusa chorus is a repeated block of text with the heading 'chorus'The first chorus is displayed with it's headingSubsequent choruses display the heading onlyUNLESS YOU CLICK the chorus or its heading!###And look here's a repeat of the chorus above:###chorus######
Groups
we can also group things togther
Which means they get indented (on large screens)
and blank lines insert a bit of space
whereas normally blank lines are just ignored
Good for displaying poetry”in a section that hasn't enabled 'Group_Lines'
See Part 2 for more on line grouping
and we can
centre group things
if we like
###groupwe can also group things togtherWhich means they get indented (on large screens)and blank lines insert a bit of spacewhereas normally blank lines are just ignoredGood for displaying poetry”in a section that hasn't enabled 'Group_Lines'See Part 2 for more on line grouping######group-centreand we cancentre group thingsif we like###
Playlist Players
We can also create an audio playlist:
###audio-playerpoetry,shorty,states-of-matter-imonypoetry,shorty,morticianpoetry,shorty,i-cant-believe-its-not-punk-rockpoetry,shorty,youre-the-very-definition-ofpoetry,shorty,playthingpoetry,shorty,strange-girlpoetry,shorty,i-will-do-things###
Video playlists work the same, but use the macro 'video-player'.
Accordions
An accordion loads additional text files on to a page inside a 'roll-up/drop down' device. Here's an example, using a few of the 'author notes' I've written for some of the articles:
Example Accordion
Author Notes
Amateur Photography Magazine Workshop
Project 269
And the macro that created this:
###accordionExample Accordionarticles,my-website-framework-3,bookcasearticles,my-website-framework-3,circusarticles,my-website-framework-3,marketing-tips###
Galleries
Here's a set of images from my 2020 Calendar
Message: Undefined offset: 0 in:/home/hp3-linc7-nfs2-z/922/1863922/user/htdocs/framework/txtio.php at:1066