A ‘Masonry’ As A Better Lookout

After hav­ing exhaust­ed the images issue, it’s time to beau­ti­fy the list of posts. Up to now we only know the form that bootScore’s index.php gen­er­ates: a list of stripes, one for each arti­cle, the respec­tive Fea­tured Image in the left half, and in the right half the first lines of the arti­cle. How bor­ing. But bootScore also offers a nicer way: a mason­ry as a bet­ter look­out:

For­tu­nate­ly, bootScore offers more excit­ing vari­ants in an addi­tion­al pack­age. For exam­ple, the ver­ti­cal­ly aligned mason­ry form: The start­ing lines of the arti­cles appear in four ver­ti­cal columns side by side, opened by the respec­tive Fea­tured Images. And in each col­umn, the next arti­cle suc­ceeds direct­ly after the pre­de­ces­sor. So the ‘read­ing bites’ over­lap, like the bricks of a wall, but ver­ti­cal­ly:

Solution

• Install the plu­g­in bs Mason­ry via ‘Plugins/Add News’ in the Word­Press back­end.
• Down­load the pack­age bS Loop Tem­plates and unzip it.
• Copy the file archive-masonry.php under the name home.php into your child theme.
• In that file, replace the_excerpt() with the_content() and
• remove the fol­low­ing div includ­ing the embed­ded line <a class="read-more...

Background

bootScore itself describes the pure mason­ry instal­la­tion and acti­va­tion. I myself don’t want to com­plete­ly switch to that style, but just my gen­er­al overview page. So I copy only the file archive-masonry.php into my child theme — under the name home.php

But we can do more. The Word­Press func­tion the_excerpt() — as it is used in the home.php — dis­plays the post con­tent up to a cer­tain length pure­ly tex­tu­al­ly. No links, no text design. Often, how­ev­er, the read­er likes to read the invit­ing first lines of an arti­cle, visu­al­ly designed. To get such an ‘intro’, the author man­u­al­ly must set the <!-- more--> tag in all arti­cles, replace the_excerpt() by the_content() in the tem­plate, and remove the suc­ceed­ing div sec­tion con­tain­ing the read-more-link.

This allows the author to decide how much text to use as a teas­er. She cuts off where it makes sense. This is how text begin­nings of dif­fer­ent lengths are cre­at­ed. And that of the ver­ti­cal ‘brick­work’ turns out more clear­ly.

---

And how does this …

… sup­port our migra­tion to bootScore? Well, when the web design­er has com­plet­ed her work on good illus­tra­tions, she can relax and inte­grate tags and clouds into her site, improve her overview page and design her own land­ing page. Whether the result­ing full­ness real­ly ben­e­fits her own read­er, whether it can become slim­mer and how, whether more dis­creet ref­er­ences and spe­cif­ic fonts also increase the read­abil­i­ty, all this she should nev­er­the­less con­sid­er while imple­ment­ing these fea­tures. This post sup­ports these steps towards a per­son­al­ized bootScore site.

---