State of Play Reports III

Template considerations in a different way - step by step

In the state of play reports, I would like to edit content on a long-term and permanent basis. In this part, I would like to introduce the layout for the state of playreports and explain the history of their development.

Part I dealt with the background to the decision to introduce a format for progress reports in the first place, in Part II I presented the overview page and explained how some of the layout details came about.

Part III now deals with the layout of the individual progress report pages. What considerations did I make in advance, do I even have that? ;-) To what extent is it useful if I develop both design, HTML 5, CSS and MODX templating from one source?

  • What preliminary considerations have I made?
  • What would a status report consist of?
  • How would I like to present the revisions?
  • How do I want to make text changes visible?
  • How will this feature affect the readability of the text?
  • What elements are still missing?
  • What difficulties arise?
  • What could I implement successfully, what not?
  • What would I still like to implement, but cannot?
Preliminary considerations

One idea, massive consequences

In February 2022, I had the idea to save time by using an essay I wrote at the University of Wuppertal in 1995 as an article for my blog. This might have been the most time-saving idea I've ever had. I admit I like to flirt with it, but it actually turned out that way. Instead of just blogging something exciting, I developed a new article format en passant. After almost 5 months, it's still not finished. A first version, already corrected in the new German spelling, is online next to the original, but not everything is ready yet. I still don't have a technical solution for the footnotes, which is a massive problem for the further development of the essay, but I am confident that I will find one.

Template development

As it has always been the case here on the blog, I have repeatedly written articles for which a template was not sufficient or with which I could not implement the content as desired. And then I tried to find a quick solution. It's a bit like taking a pocket knife on a trip. If you don't want to open wine bottles, why carry a corkscrew? And if you need one, you build one. Keep it simple and lightweight. Keep it simple and lightweight. But this approach can lead to a totally tinkered-with pocket knife that's not really good for anything anymore. In the meantime, by starting simple and easy, I have created 10 different templates for blog posts. Since I use a combination of numbers and names for them, that's what they are called:

  • 04.10.Blog.Beitrag
  • 04.12.Blog.Beitrag.EinBild
  • 04.40.Blog.Beitrag.Multi-Image
  • 04.41.Blog.Beitrag.Multi.Content
  • 04.42.Blog.Beitrag.Multi.Content.Plus.Galerie
  • 04.50.Blog.Lieblinge.Multi.Content.Multi.Galerie
  • 04.55.Blog.Zwei.Spalten.Multi.Content
  • 04.80.Blog.Multi.Content.6fach-Do.not.Use.Anymore
  • 04.91.Blog.Beitrag.Coding.Rstats
  • 04.92.Blog.Beitrag.Coding.php

As you can easily see, the numbering strategy copied from Basic has proved successful, because I can usually insert new templates. Also very interesting are the comments I write to myself in the titles. ,-)

A task still to come - transfer the posts based on a 16 column grid to a 20 column grid. I will hopefully start that this year and implement it gradually.

This approach - changing what you need - leads to what is often an incomprehensible approach in the future. "What was I thinking back then?" Of course I should document all changes, but I maintain that documenting should only take up a minimal amount of my time, not the majority.

I did some things better with the new template, some things I could have thought through better.

Derivatives: A small specification

The essay I wrote in 1995 was, so to speak, the blueprint for the new format. I wanted to be able to implement that. In addition, there are new requirements concerning the visibility of changes and the easy accessibility of different versions of the essay. I had to consider the impact on Google of having double, triple or X versions of a text on the website.

A very simple, chapter-oriented template might structurally look like this:

Layout for a simple template with repeating chapter elements
Layout for a simple template with repeating chapter elements
Simple template with chapters

If only it were that simple

There are no sub-chapters yet, no citations. My reflections led to this list, the small template specification booklet

  • Title
  • Subtitle
  • Teaser
  • Table of contents
  • Article image
  • Meta information
  • Chapter
  • Subchapter
  • Chapter headings
  • Chapter citations
  • Chapter images

This already leads to a relatively complicated template, as can be seen in the next picture.

Increasing complexity - Pictures can now be created for the chapters and the subchapters.
Increasing complexity - Pictures can now be created for the chapters and the subchapters.
Chapter pictures

And subchapter images

I went through the existing text and noticed that each subchapter has its own picture that runs along with the text, i.e. above the subchapter. In addition, the chapters usually have more than one image, at least this is the case in the essay from 1995. 

In addition, no marginalia were planned at all. First, a marginalia, that's a side note, and I need at least one per article. All pictures would need a title, in the best case also a unique numbering, a problem I have not solved as of today.

In this version, marginal notes can be inserted in the right-hand column.
In this version, marginal notes can be inserted in the right-hand column.
More marginalia

More details

As you can see, I am adding more and more details to make the complex image more realistic. We are coming to the end of thinking about the basic layout. At some point I decided to say goodbye to my beautiful 16 grid, because with it I got a very nice approximation to the golden ratio, because 16 can be composed of 3, 5 and 8, which is a good approximation in the area of low numbers (and part of the Fibonacci sequence). 

Marginalia are a very good idea, but I like to have marginal notes both to each chapter and to each sub-chapter. Marginalia basically have all the titles, a text, a source reference and a field where a link can be entered.

It should be possible to create as many chapters as desired, and to move them among each other if necessary. The numbering of the chapters should therefore be automatic.

The table of contents should also be generated automatically, and in a later version perhaps also the list of illustrations.

Many image options and multiple ways to comment on the text.
Many image options and multiple ways to comment on the text.
Editions

Im Header

The part that has been completely missing so far is the edition-scientific part. Where can one get access to older versions of the text? How are changes to the text made visible? What other meta information do I want to add?

I have decided to design this as in a form that one might have filled out on paper in the past - a small table with a restrained line layout. On top of that the sequential number of all the status reports, the permanent title, in the table the following data:

  • the version number, I will occasionally get around to major releases, as in software, but stay behind the dot in single digits, I don't need to overdo it
  • the creation date
  • the date of modification - this is where access to older versions is supposed to take place
  • author information - which means I'm open to guest authors or theme sponsorships.
  • Topics, which in turn are linked to my categories, so the factual reports are linked to my blog ecosystem, into which the factual reports are also linked via the highlight categories, by the way.

References

Finally, a well-founded, almost scientific work naturally needs source references, a list of figures, and a list of all citations. Despite numerous recommendations, I have not yet found a technical solution that works for me. I already have an idea, but it will take a little more time.

I have moved the comments next to all this information, because I am already sure that the footnotes will become a long list if I solve the problem of correct presentation and inserting new footnotes into the text technically.

Implementation

Quite complicated

Building complex layouts in MODX is not that easy. In principle, all variables can be created individually for a page with 10 or 12 chapters, but of course that makes no sense at all. Basically, you have the choice between Modmore's Content Blocks or MIGX. And since I have already built a few templates with MIGX, that was my choice.

However, this would be my first time building a template with nested MIGX variables. Would I succeed. Yes. But it took quite some time.

But from the beginning

The page itself already has quite a lot of variables:

  • pagetitle
  • longtitle
  • description
  • introtext
  • template
  • alias
  • published
  • publishedon

I have left out some standard variables. In addition, there is a whole stack of values, some of which I also use in other blog templates:

  • versionnumber
  • stateofplay-number (der wievielte Sachstandsbericht ist es)
  • p0301-specialtitle (damit ich in der Headline HTML einsetzen kann)
  • blog-readingtime
  • blog-wordcount
  • blog-tags
  • blog-footnotes
  • blog-figures (Abbildungsverzeichnis)
  • blog-quotes (Verzeichnis der Zitate)

For the contribution picture, there are a bunch of TVs of your own:

  • photo-teaser-title
  • photo-teaser-image
  • photo-teaser-date
  • photo-teaser-description
  • photo-teaser-fulldesc

As you can see, this TV block doesn't really fit into the scheme, I took it from another template, as it also holds the social media image. Then I created another tab that contains the change log, the TV is called

  • p0301MigxProtocol

These are only values that have nothing to do with the actual content. Now the content is being compiled. How did I go about it?

I don't want to get too technical, even though I think there are too few comprehensible MIGX instructions. In MODX you can generate repetitive elements with the package MIGX. This is ideal for chapters. These can be nested. I generate a chapter and in the chapter I then generate the repeating subchapters.

The chapter display is controlled by the template variable (TV) p0301-MigxMasterStateofPlay. Via Json (JavaScript Object Notation), all other TVs are described in this TV and what type they are (image, text, richtext, logic value, selection field, date, etc.). For better editing, I have distributed the values to two tabs in the later display in the template editing. These are currently all the TVs in the higher-level chapter TV p0301-MigxMasterStateofPlay:

In the first tab:

  • p0301ChapterDate (Date of creation or editing of a chapter)
  • chapterKindOf (Original, new, deleted, edited)
  • p0301Quote (Quote)
  • p0301QuoteAuthor (Quote author)
  • p0301QuoteSource (Quotesource, later added)
  • p0301SubHeadline (Chapter Subheading)
  • p0301Headline (Chapter title)
  • p0301-MigxContent (The subchapters - see there). 

In the second tab: 

  • p0301MarginaliaTitle
  • p0301Marginalia
  • p0301MarginaliaSourceName
  • p0301MarginaliaSourceLink
  • p0301-MigxImage (Bilder in der linken Spalte - siehe dort) 

The subchapters

The sub-chapters also contain a considerable amount of variables, as do the images shown in the left-hand column. Here are the corresponding lists:

p301-MigxContent

  • p0301ContentDate (Date of creation or editing of a subchapter)
  • p0301ContentInsertType (Original, new, deleted, edited)
  • p0301MainContent
  • p0301mainPictureDate (Date of creation or editing of a subchapter image)
  • p0301mainPictureInsertType (Original, new, deleted, edited)
  • p0301mainPictureTitle
  • p0301mainPictureCaption
  • p0301mainPictureLinkText
  • p0301mainPictureLink
  • p0301mainPicture (the image - finally)

and for the marginalia next to each subchapter are added:

  • p0301MainMarginaliaTitle
  • p0301MainMarginaliaTitle
  • p0301MainMarginaliaLink
  • p0301MainMarginaliaLinkText

p0301-MigxImage 

  • p0301ColPictureInsertType (Original, new, deleted, edited)
  • p0301ColPictureDate (When was the image inserted?)
  • p0301ColPictureCaption
  • p0301ColPictureDescription
  • p0301ColPictureLinkText
  • p0301ColPictureLink

Have you still counted? That's really a lot of TV to work with. And there are a lot of variable options for each chapter.

However, I would like to limit the display of text changes to the actual text and exclude the marginal notes. Because the marginal notes are my individual reflections on the text, thoughts of why and wherefore.

I have inserted and labelled all the variables in the diagram below.

Online

But never finished

Until today, I had not really thought about what it actually means, the status report format. Above all, it means. I am never finished. Never.

I can't decide at the moment whether I want to think it's good or bad. I'll just get started. There is still a lot of work to be done in the template itself, I think I am 80% done. What still needs to be done:

A function that allows me to reliably insert footnotes into the text without renumbering them all each time. There is a plugin for Wordpress, but that and the underlying Javascript solution don't really help me either.

It should be enough for this part. In the next part, I will show how I can make it possible to look at the editing status.

tl, dr;

The MODX Migx package allows a modular structure of the article with repeating elements that can also be nested.

Comments (0)


Write a comment




By sending this comment, I agree that the name and e-mail address will be stored by cronhill.de in connection with the comment I have written. The e-mail address will not be published or passed on to third parties.