harukin/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #454 from chriswinstead/master

Browse Source 
Detect high-resolution displays (like retina) and serve higher resolution photo thumbnails
This commit is contained in:
RedMatrix 2014-05-11 07:36:59 +10:00
commit 1ed210ef0a
4 changed files with 43 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
include/bbcode.php
View File

@ -630,24 +630,24 @@ function bbcode($Text,$preserve_nl = false, $tryoembed = true) {
// Images
// [img]pathtoimage[/img]
if (strpos($Text,'[/img]') !== false) {
$Text = preg_replace("/\[img\](.*?)\[\/img\]/ism", '<img src="$1" alt="' . t('Image/photo') . '" />', $Text);
$Text = preg_replace("/\[img\](.*?)\[\/img\]/ism", '<img style="max-width=100%;" src="$1" alt="' . t('Image/photo') . '" />', $Text);
}
if (strpos($Text,'[/zmg]') !== false) {
$Text = preg_replace("/\[zmg\](.*?)\[\/zmg\]/ism", '<img class="zrl" src="$1" alt="' . t('Image/photo') . '" />', $Text);
$Text = preg_replace("/\[zmg\](.*?)\[\/zmg\]/ism", '<img class="zrl" style="max-width=100%;" src="$1" alt="' . t('Image/photo') . '" />', $Text);
}
// [img float={left, right}]pathtoimage[/img]
if (strpos($Text,'[/img]') !== false) {
$Text = preg_replace("/\[img float=left\](.*?)\[\/img\]/ism", '<img src="$1" style="float: left;" alt="' . t('Image/photo') . '" />', $Text);
$Text = preg_replace("/\[img float=left\](.*?)\[\/img\]/ism", '<img style="max-width=100%;" src="$1" style="float: left;" alt="' . t('Image/photo') . '" />', $Text);
}
if (strpos($Text,'[/img]') !== false) {
$Text = preg_replace("/\[img float=right\](.*?)\[\/img\]/ism", '<img src="$1" style="float: right;" alt="' . t('Image/photo') . '" />', $Text);
$Text = preg_replace("/\[img float=right\](.*?)\[\/img\]/ism", '<img style="max-width=100%;" src="$1" style="float: right;" alt="' . t('Image/photo') . '" />', $Text);
}
if (strpos($Text,'[/zmg]') !== false) {
$Text = preg_replace("/\[zmg float=left\](.*?)\[\/zmg\]/ism", '<img class="zrl" src="$1" style="float: left;" alt="' . t('Image/photo') . '" />', $Text);
$Text = preg_replace("/\[zmg float=left\](.*?)\[\/zmg\]/ism", '<img style="max-width=100%;" class="zrl" src="$1" style="float: left;" alt="' . t('Image/photo') . '" />', $Text);
}
if (strpos($Text,'[/zmg]') !== false) {
$Text = preg_replace("/\[zmg float=right\](.*?)\[\/zmg\]/ism", '<img class="zrl" src="$1" style="float: right;" alt="' . t('Image/photo') . '" />', $Text);
$Text = preg_replace("/\[zmg float=right\](.*?)\[\/zmg\]/ism", '<img style="max-width=100%;" class="zrl" src="$1" style="float: right;" alt="' . t('Image/photo') . '" />', $Text);
}
// [img=widthxheight]pathtoimage[/img]

32
mod/photo.php
View File

@ -80,6 +80,22 @@ function photo_init(&$a) {
* Other photos
*/
/* Check for a cookie to indicate display pixel density, in order to detect high-resolution
displays. This procedure was derived from the "Retina Images" by Jeremey Worboys,
used in accordance with the Creative Commons Attribution 3.0 Unported License.
Project link: https://github.com/Retina-Images/Retina-Images
License link: http://creativecommons.org/licenses/by/3.0/
*/
$cookie_value = false;
if (isset($_COOKIE['devicePixelRatio'])) {
$cookie_value = intval($_COOKIE['devicePixelRatio']);
}
else {
// Force revalidation of cache on next request
$cache_directive = 'no-cache';
$status = 'no cookie';
}
$resolution = 0;
if(strpos($photo,'.') !== false)
@ -88,6 +104,22 @@ function photo_init(&$a) {
if(substr($photo,-2,1) == '-') {
$resolution = intval(substr($photo,-1,1));
$photo = substr($photo,0,-2);
// If viewing on a high-res screen, attempt to serve a higher resolution image:
if ($resolution == 2 && ($cookie_value > 1))
{
$resolution = 1;
}
}
// If using resolution 1, make sure it exists before proceeding:
if ($resolution == 1)
{
$r = q("SELECT uid FROM photo WHERE resource_id = '%s' AND scale = %d LIMIT 1",
dbesc($photo),
intval($resolution)
);
if (!($r))
$resolution = 2;
}
$r = q("SELECT uid FROM photo WHERE resource_id = '%s' AND scale = %d LIMIT 1",

3
view/tpl/head.tpl
View File

@ -7,6 +7,9 @@
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script>(function(w){var dpr=((w.devicePixelRatio===undefined)?1:w.devicePixelRatio);if(!!w.navigator.standalone){var r=new XMLHttpRequest();r.open('GET','/retinaimages.php?devicePixelRatio='+dpr,false);r.send()}else{document.cookie='devicePixelRatio='+dpr+'; path=/'}})(window)</script>
<noscript><style id="devicePixelRatio" media="only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)">html{background-image:url("/retinaimages.php?devicePixelRatio=2")}</style></noscript>
{{$head_css}}
{{$js_strings}}

2
view/tpl/photo_view.tpl
View File

@ -9,7 +9,7 @@
</div>
{{if $prevlink}}<div id="photo-prev-link"><a href="{{$prevlink.0}}"><i class="icon-backward photo-icons"></i></div>{{/if}}
<div id="photo-photo"><a href="{{$photo.href}}" title="{{$photo.title}}" onclick="$.colorbox({href: '{{$photo.href}}'}); return false;" ><img src="{{$photo.src}}" /></a></div>
<div id="photo-photo"><a href="{{$photo.href}}" title="{{$photo.title}}" onclick="$.colorbox({href: '{{$photo.href}}'}); return false;" ><img style="max-width: 100%;" src="{{$photo.src}}" /></a></div>
{{if $nextlink}}<div id="photo-next-link"><a href="{{$nextlink.0}}"><i class="icon-forward photo-icons"></i></a></div>{{/if}}
<div id="photo-photo-end"></div>
<div id="photo-caption">{{$desc}}</div>