Hi
Working on a open source card builder for d&d spells—and other card sets. Building a digital version and now working to add the possibility of printing the cards on A4.
The main reason for creating this project with Kirby is to make generating print cards easier on the client-side by generating the card layouts on the server-side.
In essence, I’m attempting to set up a double sided print.
That means one a4 page has 8 card-fronts total on side side, and their corresponding backs are printed on the back.
Have been reading through the forum and stackoverflow this afternoon, testing with modulus operators and doing an offset of the foreach loop every 8 cycles.
Haven’t found a working solution yet.
This is what I’m trying to do:
- Loop through 8 pages for a front side.
- Pause the loop to generate the backs
- Loop through the same 8 pages containing the back image.
- Then continue this process for the next 8 pages.
A bit lost at the moment.
Would be very grateful for any Kirby-style suggestions/inspirations!
Oliver
Content in card subpages, eg. card-a:
Title: Spell
Class-image: class-icon.jpg
- cards
- card-a
- card-b
- card-c
...
And to have the card-back mirrored correctly I need to set up the html to output where the back card rows are flipped, like this:
<!--A4 Sheet 1-->
<div class="a4-sheet">
<!--Front Sides with Titles-->
<div class="a4-front">
<article>Card A - Front</article>
<article>Card B - Front</article>
<article>Card C - Front</article>
<article>Card D - Front</article>
<article>Card E - Front</article>
<article>Card F - Front</article>
<article>Card G - Front</article>
<article>Card H - Front</article>
</div>
<!--Back Sides with Class Image Icon-->
<div class="a5-back">
<article>Card D - Back</article>
<article>Card C - Back</article>
<article>Card B - Back</article>
<article>Card A - Back</article>
<article>Card H - Back</article>
<article>Card G - Back</article>
<article>Card F - Back</article>
<article>Card E - Back</article>
</div>
</div>
<!--A4 Sheet 2 (next 8 cards/pages)-->
<div class="a4-sheet">
... Card I, J, K, L, M, N, O, P
</div>