TUTORIAL: "Appears in" Book List Block at Bottom of Article

What's a book list block?

How would you like to have a list of books that your character (or location, item, etc.) appears in at the bottom of your articles, like in the image below?

List of books and stories the character Umeji Tatsuya appears in

My character, Umeji Tatsuya, has the above book list at the bottom of his article. If someone clicks on the book cover image, they go to a sales/info page with a sample of the book. If they click on a short story cover they go to the WA manuscript where they can read the short story. (I have quite a few more short stories, but I didn't tag my article with those so they don't show up.)

Why make this? (It looks like work...)

There's a two-fold purpose. This stablock acts as a gentle reminder of the books I have for sale. And it's also informational for my WA readers. For example, if they like my character, Umeji Tatsuya, maybe they want to read the short stories he's in, too.

How is this tutorial organized?

There are two sections, the WA BBcode and the CSS. I have the code for each to copy and paste along with explanations and graphics to help you understand each step. For simplicity I'll call the Book List Block the BLB from here on out.

KEY

Red highlighted areas in the images for each code section show which part of the stat block the code snippet will refer to.

Yellow highlighted sections are class or WA bbcode names.

WA BBCode and CSS code is bolded with an explanation after each line.

The entire code sections will be provided below the explanations for easy copy paste.

Work in Progress

This article will be expanded in the future.

Stub

This article will be expanded in the future.

Definition

This article stub serves as a simple definition.

The article has been updated to use the Global Full Width Footer feature request. Thank you Dimi and all the coding team for implementing this feature!

You'll need to be a World Anvil Grandmaster or above to be able to use this tutorial.

Help Pages

If you're not sure what I mean by statblock or tag, check out these tutorials.

Stablocks (We'll be using non RPG system blocks--the "Generic Text ones.)

CSS on World Anvil

Generic article | Oct 30, 2023

Explains how CSS can be used on World Anvil and any special considerations.

Code Gift from Ademal

contain-grid

Ademal shared a code snippet I absolutely love for a responsive grid. It works nicely with mobile. (Link to code here on the Discord server.)

Remember to give credit!

Code (Incase the Discord link doesn't work)

WA Code
[container: contain-grid contain-grid-col-3]
   [container:tagclassesgohere]Text[/container]
   [container:tagclassesgohere]Text[/container]
   [container:tagclassesgohere]Text[/container]
[/container]

CSS
 @media only screen and (min-width: 960px

  .contain-grid{

    display: grid;

    grid-gap: 20px;

    grid-auto-rows: minmax(0px, auto

  }

  .contain-grid-col-6 {grid-template-columns: repeat(6, 1fr}

  .contain-grid-col-5 {grid-template-columns: repeat(5, 1fr}

  .contain-grid-col-4 {grid-template-columns: repeat(4, 1fr}

  .contain-grid-col-3 {grid-template-columns: repeat(3, 1fr}

  .contain-grid-col-2 {grid-template-columns: repeat(2, 1fr}
}

Create the Book List Block with WA BBCode

The Statblock

Create a Generic/Text statblock and paste the code from the section "BLB WA BBCode Block for Copy/Paste" below into it. If you're unsure of how to do this, see the sidepanel "WA Help Pages" link for Statblocks.

BLB WA BBCode Block for Copy/Paste


  [container: contain-grid contain-grid-col-2]

  	[container: lc-books]

  [h3]{BOOK SERIES NAME} Books[/h3]

  [small]Click book to learn more.[/small]

  [section:lc-books-list contain-grid contain-grid-col-3]

  [container: lc-{bookname}][url:{URL where your book sales page or manuscript to read is}|tab][img:{image number for your book cover}|center|nolink][/url][/container]

  [/section][/container]

  [container: lc-stories]

		[h3]Short Stories[/h3]

		[small]Click story to read.[/small]

  [section:lc-stories-list contain-grid contain-grid-col-3]

  [container: lc-{storyname}][url:{URL to your story page or manuscript}|tab][img:{number for the story cover image}|center|nolink][/url][/container]

  [/section][/container][/container]

  [small] {Insert your book and story cover credits here.} [/small]

WA Code Breakdown

There's quite a bit of code. So once I got it working, I put it in a statblock. Then I just have the statblock code to copy to be able to put it into every page. And when I need to change the code (to say add another story), I only have to change it in the statblock and my CSS. I'm going to number the steps. So the "{number}:" isn't part of the code. But a way to reference back to a certain step.

1:

[container: contain-grid contain-grid-col-2]

For contain-grid contain-grid-col-2, see side bar box "Code Gift from Ademal" for her awesome code and explanation. The gist for what I have here is this will create a grid of 2 columns. In my example, the first column is my books. The second is my short stories.

Alternately you could use [row] and [col] tags.

2:

[container: lc-books]

lc-books is the name of the class that I use to say I have books I want to show. The lc prefix in my class names refers to my series name, Liminal Chronicles. You may want to change the class name prefix through out your code.

3:

[h3]{BOOK SERIES NAME} Books[/h3]

In the image I have "Liminal Chronicles Books" for the header that notes my book series.

4:

[small]Click book to learn more.[/small]

I use a bit different code for this. But this is pretty much the same thing. I'm using the small bbcode tag because don't want to muddy up the code I share here. If you need you can add more small bbcode tags to make the text even smaller.

Visually, I don't want the explanation text to compete for space with my cover images—which should be the center of attention in the block. The text is there just to make it obvious to click the cover image to go some where for book info or to read the story.

5:

[section:lc-books-list contain-grid contain-grid-col-3]

lc-books-list is the class that holds the list of books. Then with the contain-grid contain-grid-col3 section, we'll show 3 rows of books in this side of the statblock.

I varied section and container bbcodes here. But they have they can use the same class css code, due to the display property for the class. If I recall right, there was a limit on how many deep we could do containers and sections at one point. I think that's why I used section here instead of container. (See this WA Codex article for more info on containers and sections.)

6:

[container: lc-{bookname}][url:{URL where your book sales page or manuscript to read is}|tab][img:{image number for your book cover}|center|nolink][/url][/container]

lc-{bookname} is the class for the book image container that we will hide and unhide with article tags.

I chose to do images with links instead of manuscript blocks because not all my stories were in manuscripts and I wanted them the same. You can use manuscript blocks too. You may just need to tweak the CSS code a bit.

Make one of these for each book in your series with a class name unique to each book. (I have lc-rise and lc-guardian.)

7:

[/section][/container]

Close the lc-books-list and lc-books sections and containers.

8:

[container: lc-stories]
[h3]Short Stories[/h3]
[small]Click story to read.[/small]

We're creating a second column (in our container from step 1) for the lc-stories class and the setup for the list of stories, just like we did for the lc-books in step 2.

9

[section:lc-stories-list contain-grid contain-grid-col-3]

Just like in step 5, we'll create a container for our list of story cover images. We'll have up to 3 across. (If you have more than 3, the container will have more than 1 row of cover images.)

10:

[container: lc-{storyname}][url:{URL to your story page or manuscript}|tab][img:{number for the story cover image}|center|nolink][/url][/container]

This is just like step 6, but for your short stories (if you have them).

Make one of these for each short story you have with a class name unique to each story. (In the example I have lc-initiation and lc-train-ride.)

11:

[/section][/container][/container]

Close the containers and sections from steps 9, 8, and 1 (in that order).

12:

[small] {Insert your book and story cover credits here.} [/small]

I always like to ensure my cover artist gets credit. I put the info here, since I hid the artist attribution for my cover images (to keep the display clean).

Add the CSS

If you're not sure how add the CSS to your world, please see the WA Codex page listed in the sidebar.

	.lcm-list, 

	.lc-books, 

	.lc-{bookname},

	.lc-stories,

	.lc-{storyname}

	{ display: none;}

Initially, hide the lcm-list, book and story columns, book and story cover image containers and sections. You'll need a line of code for each book and story you have. (Remember to put a "," after each line except the last one!)

	.tag-lcm-list .lc-books img, .tag-lcm-list .lc-storiess img {

		max-width: 200px;

		max-height: 340px;

		margin-left: auto;

		margin-right: auto;

  }

Set the cover images to a specific size and center them.

	.tag-lcm-list .lcm-list, 

	.tag-lc-books .lc-books, 

	.tag-lc-{bookname} .lc-{bookname}, 

	.tag-lc-stories .lc-stories,

	.tag-lc-{storyname} .lc-{storyname}

	{
		display: inline-block;
	}

Display the book if the article has the tags: lcm-list, lc-books, and lc-{bookname}. Display the story if the article has the tags: lcm-list, lc-stories, and lc-{storyname}. You'll need a line of code for each book and story you have. (Remember to put "," after each line except the last one!)

	.tag-lcm-list .lcm-list .artist-credits {
		display: none;
	}

Hide the artist credits in the lcm-list container. I give them at the bottom of the book list to keep it clean.

How to we tag the articles and use the statblock?

On the edit article page (or in your articles list when you click on the article), you'll see a section to be able to add tags. Add the lcm-list tag. For your books this article (character/location/item, etc.) appears in, add the tags: lc-books, and lc-{bookname}. For your stories this article (character/location/item, etc.) appears in, add the tags: lc-stories, and lc-{storyname}. For more information on tags see the "WA Help Pages" link for tags.

[container:lcm-list][block:{Your statblock's number}][/container]

Now you can put the code into the full width footer in your global full width footer and the BLB will show up when you have it tagged to show the book and/or story cover images that your article appears in.

Suggestions

I created a list of the tags I often use. Doing something like this will help you remember to add the BLB tags. :D (You might also put the WA BBCode snippet with it for easy copy and paste.)

That's all Folks!

There you go! Enjoy! I'd love to see what you do with this. Feel free to post a link in the comments so I can take a peek and ooh and ahh over your work!