Add example-media.json file for testing php-template

php-template/.vscode/launch.json

@@ -6,7 +6,7 @@
             "type": "php",
             "request": "launch",
             "program": "${workspaceFolder}/main.php",
-            "args": ["--council-file", "${workspaceFolder}/example-config.json", "--candidates-file", "${workspaceFolder}/example-candidates.csv"],
+            "args": ["--council-file", "${workspaceFolder}/example-config.json", "--candidates-file", "${workspaceFolder}/example-candidates.csv", "--media-file", "${workspaceFolder}/example-media.json"],
             "cwd": "${workspaceFolder}",
             "port": 9000
         }

php-template/example-media.json

@@ -0,0 +1,10 @@
+{
+    "map.jpg": {
+        "id": 123,
+        "url": "http://localhost/map.png"
+    },
+    "default.png": {
+        "id": 987,
+        "url": "http://localhost/default.png"
+    }
+}

php-template/template.php

@@ -1,3 +1,11 @@
+<?php 
+
+function sluggify($input) {
+    return strtolower(str_replace(' ', '-', $input));
+}
+
+?>
+
 <!-- wp:paragraph -->
 <p>The Streets People Love campaign has created scorecards for candidates in the 2024 council elections. Scorecards have been generated based on a candidate's engagement with the Streets People Love campaign, their commitment to our pledge, their responses to a survey and input from campaign members located in the local government area in which they are running.</p>
 <!-- /wp:paragraph -->
@@ -12,9 +20,74 @@
 <!-- /wp:image -->
  <?php endif ?>
 
+ <?php 
+ 
+ $wardCount = count($config['wardNames']);
+
+ if ($wardCount > 1) {
+    $wardsDescription = $config['councilName'] . " is divided into " . $wardCount . " wards:";
+ } else {
+    $wardsDescription = $config['councilName'] . " is unsubdivided and does not contain any wards.";
+ }
+
+ ?>
+
+ <!-- wp:paragraph -->
+<p><?php echo $wardsDescription; ?></p>
+<!-- /wp:paragraph -->
+
+<?php if (isset($media["map.jpg"])): ?>
+<!-- wp:image {"id":<?php echo $media["map.jpg"]['id']; ?>,"width":"550px","sizeSlug":"full","linkDestination":"media","className":"is-style-default"} -->
+<figure class="wp-block-image size-full is-resized is-style-default"><a href="<?php echo $media["map.jpg"]['url']; ?>" target="_blank" rel="noreferrer noopener"><img src="<?php echo $media["map.jpg"]['url']; ?>" alt="" class="wp-image-<?php echo $media["map.jpg"]['id']; ?>" style="width:550px"/></a></figure>
+<!-- /wp:image -->
+<?php endif ?>
+
+<?php if ($wardCount > 1): ?>
+
+    <?php 
+
+    if ($wardCount > 8) {
+        $wardListChunkSize = ceil($wardCount / 2);
+    } else {
+        $wardListChunkSize = $wardCount;
+    }
+
+    $wardChunks = array_chunk($config['wardNames'], $wardListChunkSize);
+
+    ?>
+    <!-- wp:columns -->
+    <div class="wp-block-columns">
+
+    <?php for ($columnIdx = 0; $columnIdx < 4; $columnIdx++): ?>
+        <!-- wp:column {"verticalAlignment":"top", "style":{"spacing":{"padding":{"top":"0","bottom":"0"}}}} -->
+        <div class="wp-block-column is-vertically-aligned-top" style="padding-top:0;padding-bottom:0">
+            
+            <?php if (array_key_exists($columnIdx, $wardChunks)): ?>
+                <!-- wp:list -->
+                <ul class="wp-block-list">
+
+                    <?php foreach($wardChunks[$columnIdx] as $wardName): ?>
+                        <!-- wp:list-item -->
+                        <li><a href="#<?php echo sluggify($wardName); ?>"><?php echo $wardName; ?></a></li>
+                        <!-- /wp:list-item -->
+                    <?php endforeach; ?>
+
+                </ul>
+                <!-- /wp:list -->
+            <?php endif; ?>
+
+        </div>
+        <!-- /wp:column -->
+    <?php endfor; ?>
+
+    </div>
+    <!-- /wp:columns -->
+
+<?php endif; ?>
+
 <?php foreach ($config['wardNames'] as $index => $wardName): ?>
     <!-- wp:heading {"level":3,"className":"is-style-default"} -->
-    <?php $wardSlug = strtolower(str_replace(' ', '-', $wardName)); ?>
+    <?php $wardSlug = sluggify($wardName); ?>
     <h3 class="wp-block-heading is-style-default" id="<?php echo $wardSlug; ?>"><a style="text-decoration: none;" href="#<?php echo $wardSlug; ?>"><?php echo $wardName; ?></a></h3>
     <!-- /wp:heading -->