Author Tools - 'Characters by Book'

As I write book 2 of my series, characters are multiplying like rabbits. I think it will be helpful to my readers to see who is in what book. So I did a bit of work on the character pages to turn this kind of summary into easy work. If this is something that you feel your world would benefit from, here is how I did my page.  
What you'll need:  
Character articles for each character
 
(Optional) Images of the characters put into the character's article headers
 
A bit of WA Code and (optional) CSS Code
 

Our example:

AT - Characters by book
To see the full page, click on the article block.
 

Behind the Scenes Work

Character Picture Headers (Optional)
I wanted my character page to be a picture directory. So that meant making a header with the character's image for EACH character article. A bit tedious, but not hard since I had character profile images for each already and created a template to drag and drop them into Affinity Designer. (If anyone wants a tutorial on how I did that, just say the word. It would be its own article, so this one is a readable length.)
Tagging Each Article
I used the 'Articles and Categories' view of articles, clicked on each character article, and typed in tag names like 'book1', 'book1-main', 'book1-major', and 'book1-minor'. This is necessary to get WA to auto-generate a list for you for later!
Giving a short description for each article
Just enough for the reader to identify the character
 
 

BBCode

Note: I listed my main characters separately, instead of with a 'tagged' list, so the blocks would be bigger and stand out.

  
[h1]BOOKNAME[/h1]
 
Click on a character to learn more about them.
 
[br][br]
 
[h2]Main Characters[/h2]
 
  [row]
  
   [col][Article block for your main character][/col]
    [col][Article block for your other main character - if applicable][/col]
    
  [/row]
[br]
 
[h2]Major Characters[/h2]
 
[tagged:book1-major|block|none]
[br]
 
[h2]Minor Characters[/h2]
 
[tagged:book1-minor|block|none]
[br]
  
   

CSS

I put this in the articles Design->CSS->Article CSS. It didn't need to be used world wide.

 
 
 
 media only screen and (min-width: 1000px)  {
 
 .user-css .tagged-articles-list {
  
  display:grid;
    
  grid-gap: 20px;
    
  grid-auto-rows: minmax(0px, auto) ;
    
  grid-template-columns: repeat(4, 1fr) ;
    
 }
}
 
.user-css-presentation  .tooltipster-base { display: none; }
  
 
 
 
 

media only screen and (min-width: 1000px - Only apply this formatting to screens 1000 pixels or bigger (like iPad and bigger). For smaller screens it will be one article per line. (Remember to change the Font Awesome (at) sign to a real one. I just can't use the symbol next to a word or the WA parser freaks out.)

I utilized the CSS code from this article in the codex.
Articleblocks
Generic article | Jan 1, 2021

This is an articleblock! Hover it for a tooltip, and click it to go to the related article!


grid-template-columns: repeat(4, 1fr) ; - this was the only line I changed. I wanted 4 rows across instead of 3. Make the number after 'repeat(' work for your preferences. 

.user-css-presentation .tooltipster-base { display: none; } - I have the tooltips article snippets turned on for my world, so that when you hover over a link info from the article pops up. But with a list like this it was maddening to run your mouse over the list to get to a specific article. So I turned it off for the page.  
 
   
 

Beyond a List of Characters

There are other uses for a page formatted like this. But this was the only need I have had for it so far. If you use the idea, let me know in the comments below or in a Discord DM. I'd love to see what you do with it.

For Guild Members

Journeyman 30x30.png


CSS modification is for guild members (Journeyman and above). If you're not subscribed at that level and wish to do so, you can on the membership page.


(Journeyman icon property of World Anvil.)

 

CSS Reference


If you'd like to learn more about CSS, check out FreeCodeCamp and w3schools' CSS Reference.
 
The WA Codex is a good place to start learning about how to play in WA.
 
WA's discord #guild-css-help channel is also great. I hang out there just to learn from what people ask about.



Cover image: Hacks and Help Cover by krzysztof-m

Comments

Please Login in order to comment!
21 Jan, 2021 22:34

This is a really good idea - I'll definitely be using it in the future! :D

Emy x   Welcome to Etrea!
23 Jan, 2021 11:52

Thank you! I would love to see it!

Author of Rise: Liminal Chronicles |
Powered by World Anvil