Skip to content

added @2x retina-image support #95

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
michelkaeser wants to merge 2 commits into
base: master
Choose a base branch
from
Open

added @2x retina-image support #95

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2f7034a
added @2x retina-image support
Jan 3, 2013
1188d2f
changable high-res image suffix
Jan 6, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 18 additions & 5 deletions adaptive-images.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
$sharpen = TRUE; // Shrinking images can blur details, perform a sharpen on re-scaled images?
$watch_cache = TRUE; // check that the adapted image isn't stale (ensures updated source images are re-cached)
$browser_cache = 60*60*24*7; // How long the BROWSER cache should last (seconds, minutes, hours, days. 7days by default)
$retina_suffix = "@2x"; // string to append to high-resolution images (e.g. image.png -> image@2x.png)

/* END CONFIG ----------------------------------------------------------------------------------------------------------
------------------------ Don't edit anything after this line unless you know what you're doing -------------------------
Expand All @@ -29,8 +30,9 @@
$requested_file = basename($requested_uri);
$source_file = $document_root.$requested_uri;
$resolution = FALSE;
$retina = FALSE;
Copy link
Copy Markdown
Author

@michelkaeser michelkaeser Jan 3, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought I need this variable at the beginning, but it doesn't seem to be the case anymore. However, I thought it may be smart to keep it as it allows to check for retina inside the generateImage method.


/* Mobile detection
/* Mobile detection
NOTE: only used in the event a cookie isn't available. */
function is_mobile() {
$userAgent = strtolower($_SERVER['HTTP_USER_AGENT']);
Expand Down Expand Up @@ -130,7 +132,7 @@ function refreshCache($source_file, $cache_file, $resolution) {
}

/* generates the given cache file for the given source file with the given resolution */
function generateImage($source_file, $cache_file, $resolution) {
function generateImage($source_file, $cache_file, $resolution, $retina) {
global $sharpen, $jpg_quality;

$extension = strtolower(pathinfo($source_file, PATHINFO_EXTENSION));
Expand Down Expand Up @@ -170,7 +172,7 @@ function generateImage($source_file, $cache_file, $resolution) {
$transparent = imagecolorallocatealpha($dst, 255, 255, 255, 127);
imagefilledrectangle($dst, 0, 0, $new_width, $new_height, $transparent);
}

ImageCopyResampled($dst, $src, 0, 0, 0, 0, $new_width, $new_height, $width, $height); // do the resize in memory
ImageDestroy($src);

Expand All @@ -189,7 +191,7 @@ function generateImage($source_file, $cache_file, $resolution) {
$cache_dir = dirname($cache_file);

// does the directory exist already?
if (!is_dir($cache_dir)) {
if (!is_dir($cache_dir)) {
if (!mkdir($cache_dir, 0755, true)) {
// check again if it really doesn't exist to protect against race conditions
if (!is_dir($cache_dir)) {
Expand Down Expand Up @@ -264,6 +266,17 @@ function generateImage($source_file, $cache_file, $resolution) {
if($pixel_density != 1) {
$total_width = $client_width * $pixel_density; // required physical pixel width of the image

// @2x retina-image replacement
$extension = strtolower(pathinfo($source_file, PATHINFO_EXTENSION));
$retina_file = str_replace(".$extension", "$retina_suffix.$extension", $source_file);

// check if the file exists at all
if (file_exists($retina_file)) {
$requested_uri = str_replace(".$extension", "$retina_suffix.$extension", $requested_uri);
$source_file = $retina_file;
$retina = TRUE;
}

// the required image width is bigger than any existing value in $resolutions
if($total_width > $resolutions[0]){
// firstly, fit the CSS size into a break point ignoring the multiplier
Expand Down Expand Up @@ -318,5 +331,5 @@ function generateImage($source_file, $cache_file, $resolution) {
}

/* It exists as a source file, and it doesn't exist cached - lets make one: */
$file = generateImage($source_file, $cache_file, $resolution);
$file = generateImage($source_file, $cache_file, $resolution, $retina);
sendImage($file, $browser_cache);