Resize images on caching

app/base/BaseModel.php

@@ -3,6 +3,8 @@
  * Base for base models
  */
 
+use abeautifulsite\SimpleImage;
+
 /**
  * Common base for all Models
  */
@@ -34,10 +36,12 @@ class BaseModel {
 	 */
 	public function get_cached_image($api_path, $series_slug, $type="anime")
 	{
+		$api_path = str_replace("jjpg", "jpg", $api_path);
 		$path_parts = explode('?', basename($api_path));
 		$path = current($path_parts);
 		$ext_parts = explode('.', $path);
 		$ext = end($ext_parts);
+		/*$ext = $ext = strtolower(pathinfo($api_path, PATHINFO_EXTENSION));*/
 
 		// Workaround for some broken extensions
 		if ($ext == "jjpg") $ext = "jpg";
@@ -71,9 +75,30 @@ class BaseModel {
 			{
 				throw new Exception("Couldn't cache images because they couldn't be downloaded.");
 			}
+
+			// Resize the image
+			if ($type == 'anime')
+			{
+				$resize_width = 220;
+				$resize_height = 319;
+				$this->_resize($cached_path, $resize_width, $resize_height);
+			}
 		}
 
 		return "/public/images/{$type}/{$cached_image}";
 	}
+
+	/**
+	 * Resize an image
+	 *
+	 * @param string $path
+	 * @param string $width
+	 * @param string $height
+	 */
+	private function _resize($path, $width, $height)
+	{
+		$img = new SimpleImage($path);
+		$img->resize($width,$height)->save();
+	}
 }
 // End of BaseModel.php

composer.json

@@ -4,6 +4,7 @@
 		"filp/whoops": "1.1.*",
 		"aura/router": "2.2.*",
 		"aviat4ion/query": "2.0.*",
-		"robmorgan/phinx": "*"
+		"robmorgan/phinx": "*",
+		"abeautifulsite/simpleimage": "*"
 	}
 }

public/css/base.css

@@ -36,10 +36,20 @@ tbody > tr:nth-child(odd) {
 }
 
 .media-wrap {
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
   justify-content: center;
+  -webkit-align-content: space-around;
+  -ms-flex-line-pack: distribute;
   align-content: space-around;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
   align-items: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   text-align: center;
   margin: 0 auto;
@@ -55,15 +65,19 @@ tbody > tr:nth-child(odd) {
   margin: 0.25em;
 }
 
-	.name, .media_type, .airing_status, .user_rating, .completion, .age_rating {
+.name,
+.media_metadata > div,
+.medium_metadata > div,
+.row {
   text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85);
   background: rgba(0, 0, 0, 0.45);
-		color: #fff;
+  color: #ffffff;
   padding: 0.25em;
   text-align: right;
 }
 
-	.media_type, .age_rating {
+.media_type,
+.age_rating {
   text-align: left;
 }
 
@@ -87,8 +101,7 @@ tbody > tr:nth-child(odd) {
 .media:hover > .name,
 .media:hover > .media_metadata > div,
 .media:hover > .medium_metadata > div,
-		.media:hover > .table .row
+.media:hover > .table .row {
-		{
   background: rgba(0,0,0,0.75);
 }
 
@@ -99,14 +112,14 @@ tbody > tr:nth-child(odd) {
   text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85);
 }
 
-
 /* -----------------------------------------------------------------------------
 	Anime-list-specific styles
 ------------------------------------------------------------------------------*/
+
 .anime .name {
   text-align: center;
   width: 100%;
-	padding:0.5em 0.6em;;
+  padding: 0.5em 0.6em;
 }
 
 .anime .media_type,
@@ -118,7 +131,6 @@ tbody > tr:nth-child(odd) {
   text-align: center;
 }
 
-
 .anime .table {
   position: absolute;
   bottom: 0;
@@ -130,8 +142,14 @@ tbody > tr:nth-child(odd) {
   width: 100%;
   background: rgba(0, 0, 0, 0.45);
   display: table;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
   align-content: center;
+  -webkit-justify-content: space-around;
+  -ms-flex-pack: distribute;
   justify-content: space-around;
   text-align: center;
   padding: 0 inherit;
@@ -140,6 +158,8 @@ tbody > tr:nth-child(odd) {
 .anime .row > div {
   font-size: 0.8em;
   display: flex-item;
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
   align-self: center;
   text-align: center;
   vertical-align: middle;
@@ -161,10 +181,6 @@ tbody > tr:nth-child(odd) {
   margin: 0.25em;
 }
 
-.manga .completion::before {
-	content: "";
-}
-
 .manga .media_metadata {
   padding: 0.25em;
   margin: 0.75em;

public/css/base.myth.css

@@ -0,0 +1,177 @@
+:root {
+	--shadow: 1px 2px 1px rgba(0, 0, 0, 0.85);
+	--title-overlay: rgba(0, 0, 0, 0.45);
+	--text-color: #ffffff;
+	--normal-padding: 0.25em;
+}
+
+body {
+	margin: 0.5em;
+}
+
+table {
+	width:85%;
+	margin: 0 auto;
+}
+
+tbody > tr:nth-child(odd) {
+	background: #ddd;
+}
+
+.align_left {
+	text-align:left;
+}
+
+.align_right {
+	text-align:right;
+}
+
+.round_all {
+	border-radius:0.5em;
+}
+
+.round_top {
+	border-radius: 0;
+	border-top-right-radius:0.5em;
+	border-top-left-radius:0.5em;
+}
+
+.round_bottom {
+	border-radius: 0;
+	border-bottom-right-radius:0.5em;
+	border-bottom-left-radius:0.5em;
+}
+
+.media-wrap {
+	display:flex;
+	justify-content: center;
+	align-content: space-around;
+	align-items: center;
+	flex-wrap: wrap;
+	text-align:center;
+	margin:0 auto;
+}
+
+.media {
+	position:relative;
+	vertical-align:top;
+	display:inline-block;
+	text-align:center;
+	width:220px;
+	height:319px;
+	margin: var(--normal-padding);
+}
+
+	.name,
+	.media_metadata > div,
+	.medium_metadata > div,
+	.row {
+		text-shadow: var(--shadow);
+		background: var(--title-overlay);
+		color: var(--text-color);
+		padding: var(--normal-padding);
+		text-align:right;
+	}
+
+	.media_type, .age_rating {
+		text-align:left;
+	}
+
+	.media > .media_metadata {
+		position:absolute;
+		bottom:0;
+		right:0;
+	}
+
+	.media > .medium_metadata {
+		position:absolute;
+		bottom: 0;
+		left:0;
+	}
+
+	.media > .name {
+		position:absolute;
+		top: 0;
+	}
+
+		.media:hover > .name,
+		.media:hover > .media_metadata > div,
+		.media:hover > .medium_metadata > div,
+		.media:hover > .table .row
+		{
+			background:rgba(0,0,0,0.75);
+		}
+
+		.media > .name > a {
+			text-align:justify;
+			background:none;
+			color:#fff;
+			text-shadow: var(--shadow);
+		}
+
+
+/* -----------------------------------------------------------------------------
+	Anime-list-specific styles
+------------------------------------------------------------------------------*/
+.anime .name {
+	text-align:center;
+	width:100%;
+	padding:0.5em 0.6em;;
+}
+
+.anime .media_type,
+.anime .airing_status,
+.anime .user_rating,
+.anime .completion,
+.anime .age_rating {
+	background: none;
+	text-align:center;
+}
+
+
+.anime .table {
+	position:absolute;
+	bottom:0;
+	left:0;
+	width:100%;
+}
+
+.anime .row {
+	width:100%;
+	background: var(--title-overlay);
+	display:table;
+	display: flex;
+	align-content:center;
+	justify-content: space-around;
+	text-align:center;
+	padding:0 inherit;
+}
+
+.anime .row > div {
+	font-size:0.8em;
+	display:flex-item;
+	align-self:center;
+	text-align:center;
+	vertical-align:middle;
+}
+
+/* -----------------------------------------------------------------------------
+	Manga-list-specific styles
+------------------------------------------------------------------------------*/
+
+.manga .media > .name {
+	padding:0.5em;
+	margin:1em;
+}
+
+.manga .media {
+	border:1px solid #ddd;
+	width:200px;
+	height:290px;
+	margin:0.25em;
+}
+
+.manga .media_metadata {
+	padding: var(--normal-padding);
+	margin: 0.75em;
+}