Resize images on caching

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

View File

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

View File

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

View File

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

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