Apps/TodayStream
2
0
Fork 0
Code Issues 3 Pull Requests Releases Wiki Activity

Add generateGridCard(), add placeholder thumbnail

Browse Source
This commit is contained in:
Skylar Ittner 2019-02-09 17:40:30 -07:00
parent 882ed53aa3
commit a59a830f5e
2 changed files with 45 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
lib/NewsItem.lib.php
View File

@ -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;
}
}

2
static/img/news-placeholder.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB