Image sizes
Design and Skin Customization
I'm not sure, whatever woulld be most useful to the target market I guess.
cd/square, book, portrait, banner, tv, facebook, twitter and google?
updated by @ultrajam: 04/23/14 03:52:31PM
Forum Activity for @ultrajam
Design and Skin Customization
I'm not sure, whatever woulld be most useful to the target market I guess.
cd/square, book, portrait, banner, tv, facebook, twitter and google?
updated by @ultrajam: 04/23/14 03:52:31PM
Image sizes
Design and Skin Customization
brian:It's easy to say how it should work, but I've been doing this for over 10 years and have yet to find a perfect solution that works 100% of the time for 100% of images.
I know man, I'm talking it rather than coding it, and I know I'm out classed: Everything I know about php is via you and your excellent code (and now the Jamroom Team), so it's kind of weird even attempting to explain what I mean (especially as we've been in a similar thread before jr5, and most people seem totally unconcerned by squishing or squareness), but you did say you were all ears, and I do love to shoot the breeze.
So my apologies for the wordiness in this thread. I'm going to attribute that to perfect weather here at the moment.
Important to note, I'm perfectly happy working with square images, and they do work flawlessly.
updated by @ultrajam: 04/23/14 01:35:18PM
Image sizes
Design and Skin Customization
http://stackoverflow.com/questions/999250/php-gd-cropping-and-resizing-images
This page has a self contained example which does more of the maths. Change the aspect ratio and size on the last line.
imagetest.php:
<?php
function Image($image, $crop = null, $size = null) {
$image = ImageCreateFromString(file_get_contents($image));
if (is_resource($image) === true) {
$x = 0;
$y = 0;
$width = imagesx($image);
$height = imagesy($image);
/*
CROP (Aspect Ratio) Section
*/
if (is_null($crop) === true) {
$crop = array($width, $height);
} else {
$crop = array_filter(explode(':', $crop));
if (empty($crop) === true) {
$crop = array($width, $height);
} else {
if ((empty($crop[0]) === true) || (is_numeric($crop[0]) === false)) {
$crop[0] = $crop[1];
} else if ((empty($crop[1]) === true) || (is_numeric($crop[1]) === false)) {
$crop[1] = $crop[0];
}
}
$ratio = array(0 => $width / $height, 1 => $crop[0] / $crop[1]);
if ($ratio[0] > $ratio[1]) {
$width = $height * $ratio[1];
$x = (imagesx($image) - $width) / 2;
}
else if ($ratio[0] < $ratio[1]) {
$height = $width / $ratio[1];
$y = (imagesy($image) - $height) / 2;
}
}
/*
Resize Section
*/
if (is_null($size) === true) {
$size = array($width, $height);
}
else {
$size = array_filter(explode('x', $size));
if (empty($size) === true) {
$size = array(imagesx($image), imagesy($image));
} else {
if ((empty($size[0]) === true) || (is_numeric($size[0]) === false)) {
$size[0] = round($size[1] * $width / $height);
} else if ((empty($size[1]) === true) || (is_numeric($size[1]) === false)) {
$size[1] = round($size[0] * $height / $width);
}
}
}
$result = ImageCreateTrueColor($size[0], $size[1]);
if (is_resource($result) === true) {
ImageSaveAlpha($result, true);
ImageAlphaBlending($result, true);
ImageFill($result, 0, 0, ImageColorAllocate($result, 255, 255, 255));
ImageCopyResampled($result, $image, 0, 0, $x, $y, $size[0], $size[1], $width, $height);
ImageInterlace($result, true);
ImageJPEG($result, null, 90);
}
}
return false;
}
header('Content-Type: image/jpeg');
Image('http://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png', '16:9', '320x');
?>
Image sizes
Design and Skin Customization
Nothing will work perfectly for 100% of all images until image saliency (facial recognition, horizon, etc) is taken into account which is years away, but surely different aspect ratios (16:9, 4:3) work in the same way that crop to square (1:1) works?
I could be wrong, definitely being foolish in trying to explain it , but looking at imagecopyresampled, wouldn't it work like this?:
imagecopyresampled($image['handle'], $image['source'], $hnd_x_offset, $hnd_y_offset, $src_x_offset, $src_y_offset, $new_width, $new_height, $src_width, $src_height)
Instead of $new_width : $new_height and $src_width : $src_height both being 1 : 1, they can both be 4 : 3, or 16 : 9
As long as $new_width : $new_height and $src_width : $src_height are the same aspect ratios there will be no distortion, regardless of the aspect ratio of the uploaded image - $src_width and $src_height are not the width and height of the src image, they are the width and height that you are copying out of the src image.
You still need to work out the offsets - $src_x_offset = 0 unless the height hits the boundary, $src_y_offset = 0 unless the width hits the boundary.
Say we have a 1600 x 1200 image and we want a 16:9 crop (160x90) from the center.
$src_width = $actual_source_image_width;
$src_height = ($actual_source_image_width / 16) * 9;
$src_y_offset = ($actual_source_image_height - $src_height) / 2;
$new_width = 160;
$new_height = 90;
$image['handle'] is 160 x 90
$image['source'] is 1600 x 1200
imagecopyresampled($image['handle'], $image['source'], 0, 0, 0, 150, 160, 90, 1600, 900)
A 1200 x 1600 source:
imagecopyresampled($image['handle'], $image['source'], 0, 0, 0, 462, 160, 90, 1200, 675)
A 1200 x 1200 source:
imagecopyresampled($image['handle'], $image['source'], 0, 0, 0, 262, 160, 90, 1200, 675)
A 100 x 100 source:
imagecopyresampled($image['handle'], $image['source'], 0, 0, 0, 22, 160, 90, 100, 56)
I know I'm oversimplifying it, but wouldn't that give a set of 160x90 thumbnail images with no distortion?
A 9:16 portrait from a 100x100 could be similar:
imagecopyresampled($image['handle'], $image['source'], 0, 0, 22, 0, 90, 160, 56, 100)
Image sizes
Design and Skin Customization
Apart from abstract backgrounds maybe, you should never see a distorted image displayed anywhere (not sure if that's the job of the skin or the core) - noticeable distortion always looks bad, whilst a close crop sometimes looks good. But it's just my opinion, people dont seem to mind a bit of squishing.
Its just that this looks more PhotoPro to me:
updated by @ultrajam: 04/22/14 02:38:28PM
Image sizes
Design and Skin Customization
Thanks Douglas, that does make sense.
Size and shape are rarely a problem for a site owner uploading content, they will be preparing their images, and photo pros will be batch processing their galleries anyway. If only users would do the same.
Sooo many people don't even seem to notice squishing. For several years after getting their first widescreen tv my parents were quite happy watching a short, fat version of their video tapes. I showed them where the button to change it was, but I guess they were perfectly happy watching shorter, fatter people. My Dad was a keen soccer fan though, and I still don't get how he could be happy watching a game with an OVAL BALL!!!
Maybe I'm just overly sensitive to squishing. Hopefully we'll see thousands of PhotoPro skinned sites managing aspect ratios for themselves without difficulty.
Image sizes
Design and Skin Customization
{jrCore_include template="header.tpl"}
{*http://www.bootply.com/129266*}
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-4"><img src="//placehold.it/650x370" class="img-responsive"></div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">1</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">2</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">3</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">4</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">5</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">6</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">7</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">8</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">9</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">10</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">11</div>
</div>
</div>
<style type="text/css">
.col-xs-6 {
min-height:125px;
background-color:#55ddff;
}
</style>
{jrCore_include template="footer.tpl"}
If you need clearing at different breakpoints you can add a clearfix and leave it hidden except at a specific breakpoint:
http://getbootstrap.com/examples/grid/
<div class="row">
<div class="col-xs-6 col-sm-3">
.col-xs-6 .col-sm-3
<br>
Resize your viewport or check it out on your phone for an example.
</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>Image sizes
Design and Skin Customization
Don't get me wrong, I love the square images, they are perfect for music sites but don't entirely fit the bill for a skin like PhotoPro when users are uploading the content.
Have you tried that bootstrap 3 grid without closing each row? - having all grid items in one row allows you to have different numbers of items show in the row at different breakpoints:
class="col-6-xs col-4-sm col-3-md col-2-lg"
Its awesome with square images.
Royalty Free images
Resources
I can see a "best background" module for jamroom.net.
Upload your best (giveaway) backgrounds on a free license, jr givesaway a superpack license to the first to reach a 500 votes above 4stars or similar.
jamroom.net service backgrounds. cdn.
