Add generateGridCard(), add placeholder thumbnail

lib/NewsItem.lib.php

@@ -58,4 +58,47 @@ class NewsItem {
         return $this->category;
     }
 
+    /**
+     * Generate a HTML card for a grid layout
+     * @return string
+     */
+    function generateGridCard(bool $lazyload = false): string {
+        $category = $this->getCategory()->toString();
+        $url = $this->getURL();
+        $headline = htmlentities($this->getHeadline());
+        $source = $this->getSource();
+        $imghtml = "";
+        if (!empty($this->getImage())) {
+            $imghtml = '<a href="' . $this->getURL() . '" target="_BLANK">';
+            if (strpos($this->getImage(), "preview.redd.it") !== false) {
+                $imgurl = $this->getImage();
+            } else {
+                $imgurl = Thumbnail::getThumbnailCacheURL($this->getImage(), 500);
+            }
+            if ($lazyload) {
+                $imghtml .= '<img src="./static/img/news-placeholder.svg" data-src="' . $imgurl . '" class="card-img-top newscard-img d-none" alt="">';
+                $imghtml .= '<noscript><img src="' . $imgurl . '" class="card-img-top newscard-img" alt=""></noscript>';
+            } else {
+                $imghtml .= '<img src="' . $imgurl . '" class="card-img-top newscard-img" alt="">';
+            }
+            $imghtml .= '</a>';
+        }
+        $html = <<<END
+            <div class="col-12 col-sm-6 col-md-6 col-lg-4 px-1 m-0 grid__brick" data-groups='["$category"]'>
+                <div class="card mb-2">
+                    $imghtml
+                    <div class="card-body">
+                        <a class="text-dark" href="$url" target="_BLANK">
+                            <h4 class="card-title">
+                                $headline
+                            </h4>
+                        </a>
+                        <p class="small">$source</p>
+                    </div>
+                </div>
+            </div>
+END;
+        return $html;
+    }
+
 }

static/img/news-placeholder.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="500" height="300" version="1.1" viewBox="0 0 132.29 79.375" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -217.62)"><path d="m90.426 239.65h-42.675c-1.2191 0-2.2073 0.98824-2.2073 2.2073v0.73577h-3.6789c-1.2191 0-2.2073 0.98824-2.2073 2.2073v25.016c0 2.8445 2.3059 5.1504 5.1504 5.1504h43.411c2.4382 0 4.4146-1.9765 4.4146-4.4146v-28.695c0-1.2191-0.98824-2.2073-2.2073-2.2073zm-45.618 30.903a0.73577 0.73577 0 0 1-0.73577-0.73577v-22.809h1.4715v22.809a0.73577 0.73577 0 0 1-0.73577 0.73577zm21.705-1.4716h-13.98c-0.6095 0-1.1037-0.49416-1.1037-1.1037v-0.73577c0-0.6095 0.49416-1.1037 1.1037-1.1037h13.98c0.6095 0 1.1037 0.49417 1.1037 1.1037v0.73577c0 0.60951-0.49416 1.1037-1.1037 1.1037zm19.13 0h-13.98c-0.6095 0-1.1037-0.49416-1.1037-1.1037v-0.73577c0-0.6095 0.49416-1.1037 1.1037-1.1037h13.98c0.6095 0 1.1037 0.49417 1.1037 1.1037v0.73577c0 0.60951-0.49417 1.1037-1.1037 1.1037zm-19.13-8.8293h-13.98c-0.6095 0-1.1037-0.49416-1.1037-1.1037v-0.73577c0-0.6095 0.49416-1.1037 1.1037-1.1037h13.98c0.6095 0 1.1037 0.49416 1.1037 1.1037v0.73577c0 0.6095-0.49416 1.1037-1.1037 1.1037zm19.13 0h-13.98c-0.6095 0-1.1037-0.49416-1.1037-1.1037v-0.73577c0-0.6095 0.49416-1.1037 1.1037-1.1037h13.98c0.6095 0 1.1037 0.49416 1.1037 1.1037v0.73577c0 0.6095-0.49417 1.1037-1.1037 1.1037zm0-8.8293h-33.11c-0.6095 0-1.1037-0.49417-1.1037-1.1037v-3.6789c0-0.6095 0.49416-1.1037 1.1037-1.1037h33.11c0.6095 0 1.1037 0.49417 1.1037 1.1037v3.6789c0 0.6095-0.49417 1.1037-1.1037 1.1037z" fill-opacity=".19608" stroke-width=".26458"/></g></svg>