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!
Great tutorial, thank you <3
Glad to share! <3