timw4mail/HummingBirdAnimeClient
1
1
Fork 1
Code Issues 5 Pull Requests Projects 1 Releases Wiki Activity

Resize images on caching

Browse Source
This commit is contained in:
Timothy Warren 2015-06-18 10:30:28 -04:00
parent b0b044b282
commit b7323b93e6
4 changed files with 323 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/base/BaseModel.php
View File

@ -3,6 +3,8 @@
* Base for base models * Base for base models
*/ */
use abeautifulsite\SimpleImage;
/** /**
* Common base for all Models * Common base for all Models
*/ */
@ -34,10 +36,12 @@ class BaseModel {
*/ */
public function get_cached_image($api_path, $series_slug, $type="anime") 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_parts = explode('?', basename($api_path));
$path = current($path_parts); $path = current($path_parts);
$ext_parts = explode('.', $path); $ext_parts = explode('.', $path);
$ext = end($ext_parts); $ext = end($ext_parts);
/*$ext = $ext = strtolower(pathinfo($api_path, PATHINFO_EXTENSION));*/
// Workaround for some broken extensions // Workaround for some broken extensions
if ($ext == "jjpg") $ext = "jpg"; if ($ext == "jjpg") $ext = "jpg";
@ -71,9 +75,30 @@ class BaseModel {
{ {
throw new Exception("Couldn't cache images because they couldn't be downloaded."); 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}"; 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 // End of BaseModel.php

3
composer.json
View File

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

216
public/css/base.css
View File

@ -1,112 +1,125 @@
body { body {
margin: 0.5em; margin: 0.5em;
} }
table { table {
width:85%; width: 85%;
margin: 0 auto; margin: 0 auto;
} }
tbody > tr:nth-child(odd) { tbody > tr:nth-child(odd) {
background: #ddd; background: #ddd;
} }
.align_left { .align_left {
text-align:left; text-align: left;
} }
.align_right { .align_right {
text-align:right; text-align: right;
} }
.round_all { .round_all {
border-radius:0.5em; border-radius: 0.5em;
} }
.round_top { .round_top {
border-radius: 0; border-radius: 0;
border-top-right-radius:0.5em; border-top-right-radius: 0.5em;
border-top-left-radius:0.5em; border-top-left-radius: 0.5em;
} }
.round_bottom { .round_bottom {
border-radius: 0; border-radius: 0;
border-bottom-right-radius:0.5em; border-bottom-right-radius: 0.5em;
border-bottom-left-radius:0.5em; border-bottom-left-radius: 0.5em;
} }
.media-wrap { .media-wrap {
display:flex; display: -webkit-flex;
justify-content: center; display: -ms-flexbox;
align-content: space-around; display: flex;
align-items: center; -webkit-justify-content: center;
flex-wrap: wrap; -ms-flex-pack: center;
text-align:center; justify-content: center;
margin:0 auto; -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;
} }
.media { .media {
position:relative; position: relative;
vertical-align:top; vertical-align: top;
display:inline-block; display: inline-block;
text-align:center; text-align: center;
width:220px; width: 220px;
height:319px; height: 319px;
margin:0.25em; margin: 0.25em;
} }
.name, .media_type, .airing_status, .user_rating, .completion, .age_rating { .name,
text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85); .media_metadata > div,
background: rgba(0, 0, 0, 0.45); .medium_metadata > div,
color: #fff; .row {
padding:0.25em; text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85);
text-align:right; background: rgba(0, 0, 0, 0.45);
} color: #ffffff;
padding: 0.25em;
text-align: right;
}
.media_type, .age_rating { .media_type,
text-align:left; .age_rating {
} text-align: left;
}
.media > .media_metadata { .media > .media_metadata {
position:absolute; position: absolute;
bottom:0; bottom: 0;
right:0; right: 0;
} }
.media > .medium_metadata { .media > .medium_metadata {
position:absolute; position: absolute;
bottom: 0; bottom: 0;
left:0; left: 0;
} }
.media > .name { .media > .name {
position:absolute; position: absolute;
top: 0; top: 0;
} }
.media:hover > .name, .media:hover > .name,
.media:hover > .media_metadata > div, .media:hover > .media_metadata > div,
.media:hover > .medium_metadata > div, .media:hover > .medium_metadata > div,
.media:hover > .table .row .media:hover > .table .row {
{ background: rgba(0,0,0,0.75);
background:rgba(0,0,0,0.75); }
}
.media > .name > a {
text-align:justify;
background:none;
color:#fff;
text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85);
}
.media > .name > a {
text-align: justify;
background: none;
color: #fff;
text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85);
}
/* ----------------------------------------------------------------------------- /* -----------------------------------------------------------------------------
Anime-list-specific styles Anime-list-specific styles
------------------------------------------------------------------------------*/ ------------------------------------------------------------------------------*/
.anime .name { .anime .name {
text-align:center; text-align: center;
width:100%; width: 100%;
padding:0.5em 0.6em;; padding: 0.5em 0.6em;
} }
.anime .media_type, .anime .media_type,
@ -114,35 +127,42 @@ tbody > tr:nth-child(odd) {
.anime .user_rating, .anime .user_rating,
.anime .completion, .anime .completion,
.anime .age_rating { .anime .age_rating {
background: none; background: none;
text-align:center; text-align: center;
} }
.anime .table { .anime .table {
position:absolute; position: absolute;
bottom:0; bottom: 0;
left:0; left: 0;
width:100%; width: 100%;
} }
.anime .row { .anime .row {
width:100%; width: 100%;
background: rgba(0, 0, 0, 0.45); background: rgba(0, 0, 0, 0.45);
display:table; display: table;
display:flex; display: -webkit-flex;
align-content:center; display: -ms-flexbox;
justify-content: space-around; display: flex;
text-align:center; -webkit-align-content: center;
padding:0 inherit; -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;
} }
.anime .row > div { .anime .row > div {
font-size:0.8em; font-size: 0.8em;
display:flex-item; display: flex-item;
align-self:center; -webkit-align-self: center;
text-align:center; -ms-flex-item-align: center;
vertical-align:middle; align-self: center;
text-align: center;
vertical-align: middle;
} }
/* ----------------------------------------------------------------------------- /* -----------------------------------------------------------------------------
@ -150,22 +170,18 @@ tbody > tr:nth-child(odd) {
------------------------------------------------------------------------------*/ ------------------------------------------------------------------------------*/
.manga .media > .name { .manga .media > .name {
padding:0.5em; padding: 0.5em;
margin:1em; margin: 1em;
} }
.manga .media { .manga .media {
border:1px solid #ddd; border: 1px solid #ddd;
width:200px; width: 200px;
height:290px; height: 290px;
margin:0.25em; margin: 0.25em;
}
.manga .completion::before {
content: "";
} }
.manga .media_metadata { .manga .media_metadata {
padding: 0.25em; padding: 0.25em;
margin: 0.75em; margin: 0.75em;
} }

177
public/css/base.myth.css Normal file
View File

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