Double-sided card layout generator


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!

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>

	<!--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>


<!--A4 Sheet 2 (next 8 cards/pages)-->
<div class="a4-sheet">
	... Card I, J, K, L, M, N, O, P

I think you’re overcomplicating this. Look into Output buffering with PHP. You don’t have to print/echo out the cards in a linear order. You can start an output buffer and then add to it in whatever order you want. I don’t have a lot of time right now but I’ll take a deeper look at your situation later!

Here’s a quick draft of a working algo

$cards = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P'];

//	Set the amount of cards per page + calc the # of pages to print
$cards_per_page = 8;
$pages_to_print = ceil(count($cards) / $cards_per_page) - 1;

//	Loop over each page to be generated
for ($page=0; $page <= $pages_to_print; $page++) {
  //	Determine the first card of each page
  $first_card_of_page = ($page * $cards_per_page);
  //	Determine the last card of each page
  $last_card_of_page = $first_card_of_page + ($cards_per_page - 1);
  //	Determine the middle card of each page
  $middle_point = $first_card_of_page + ($cards_per_page / 2) - 1;

  //  Start the output buffer

  //  Print the front of the page (from first card to last)
  for ($c = $first_card_of_page; $c <= $last_card_of_page; $c++) {
    $card_to_print = $cards[$c];
    echo $card_to_print."\r\n";
  //  Print the first past of the backside (middle to first)
  for ($c = $middle_point; $c >= $first_card_of_page; $c--) {
    $card_to_print = $cards[$c];
    echo $card_to_print."\r\n";
  //  Print the second past of the backside (last to middle)
  for ($c = $last_card_of_page; $c > $middle_point; $c--) {
    $card_to_print = $cards[$c];
    echo $card_to_print."\r\n";

  //  Gather all the generated pages in one variable, you can then send this to a pdf generation library or something
  $output = ob_get_clean( );
  echo '<pre>';

It is by no means perfect, its probably not even good, but it works.

1 Like

Thanks! Sorry to get back so late, but this is a great solution :wink: