mbirth/LuckyCoinkydink
1
0
Fork 0
Code Issues Pull Requests Activity

responsive: Use default thumbnail in srcset (#474)

Browse Source 
Also, use width to detect if the user only selected a thumbnail, and accordingly reduce the srcset selection
This commit is contained in:
onli 2017-04-16 01:15:27 +02:00
parent c585f73f8c
commit 88a89436ae
1 changed files with 53 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
plugins/serendipity_event_responsiveimages/serendipity_event_responsiveimages.php
View File

@ -18,7 +18,7 @@ class serendipity_event_responsiveimages extends serendipity_event
$propbag->add('description', PLUGIN_EVENT_RESPONSIVE_DESC); $propbag->add('description', PLUGIN_EVENT_RESPONSIVE_DESC);
$propbag->add('stackable', false); $propbag->add('stackable', false);
$propbag->add('author', 'Serendipity Team'); $propbag->add('author', 'Serendipity Team');
$propbag->add('version', '0.1'); $propbag->add('version', '0.2');
$propbag->add('requirements', array( $propbag->add('requirements', array(
'serendipity' => '2.2', 'serendipity' => '2.2',
)); ));
@ -102,7 +102,6 @@ class serendipity_event_responsiveimages extends serendipity_event
// We now just need to add the additional array elements, with the new sizes and suffix. // We now just need to add the additional array elements, with the new sizes and suffix.
// We can use $addData, containing the path to the full size file, to get the starting width // We can use $addData, containing the path to the full size file, to get the starting width
$origSize = serendipity_getimagesize($addData); $origSize = serendipity_getimagesize($addData);
print_r( $origSize);
$eventData[] = array( $eventData[] = array(
'thumbSize' => ['width' => $origSize[0] * 3 / 4, 'height' => $origSize[1] * 3 / 4], 'thumbSize' => ['width' => $origSize[0] * 3 / 4, 'height' => $origSize[1] * 3 / 4],
'thumb' => '3X.' . $serendipity['thumbSuffix'] 'thumb' => '3X.' . $serendipity['thumbSuffix']
@ -117,7 +116,19 @@ class serendipity_event_responsiveimages extends serendipity_event
'thumbSize' => ['width' => $origSize[0] / 4, 'height' => $origSize[1] / 4], 'thumbSize' => ['width' => $origSize[0] / 4, 'height' => $origSize[1] / 4],
'thumb' => '1X.' . $serendipity['thumbSuffix'] 'thumb' => '1X.' . $serendipity['thumbSuffix']
); );
print_r($eventData); if ($serendipity['thumbConstraint'] == 'width' || ($serendipity['thumbConstraint'] == 'largest' && $origSize[0] > $origSize[1]) ) {
$ratio = $serendipity['thumbSize'] / $origSize[0];
$thumbnailWidth = $serendipity['thumbSize'];
} else {
// the thumbnail will be scaled based on its height
$ratio = $serendipity['thumbSize'] / $origSize[1];
$thumbnailWidth = $origSize[0] * $ratio;
}
$eventData[] = array(
'thumbSize' => ['width' => $thumbnailWidth / 2, 'height' => ($origSize[1] * $ratio) / 2],
'thumb' => 'halfThumbnail.' . $serendipity['thumbSuffix']
);
break; break;
default: default:
return false; return false;
@ -131,14 +142,19 @@ class serendipity_event_responsiveimages extends serendipity_event
/* Given an entry text, replace each image linked to the ML with an img element containing /* Given an entry text, replace each image linked to the ML with an img element containing
* an srcset. TODO: Which sizes to create depends on the theme settings, if none are set * an srcset. TODO: Which sizes to create depends on the theme settings, if none are set
* use a sound default (original=4x, 3x, 2x, 1x) * use a sound default (original=4x, 3x, 2x, 1x, default thumbnail, half thumbnail)
* */ * */
function _responsive_markup($text) function _responsive_markup($text)
{ {
preg_match_all('@<!-- s9ymdb:(?<id>.*) -->@', $text, $matches); preg_match_all('@<!-- s9ymdb:(?<id>\d+) -->@', $text, $matches);
foreach ($matches['id'] as $imgId) { foreach ($matches['id'] as $imgId) {
$srcset = $this->createSrcset($imgId); preg_match('@<!-- s9ymdb:\d+ --><img[^>]+width=["\'](\d+)["\']@', $text, $matches);
if ($matches[1]) {
$srcset = $this->createSrcset($imgId, $matches[1]);
} else {
$srcset = $this->createSrcset($imgId);
}
$text = preg_replace("@(<!-- s9ymdb:$imgId -->.*)src=@", "$1 $srcset src=", $text); $text = preg_replace("@(<!-- s9ymdb:$imgId -->.*)src=@", "$1 $srcset src=", $text);
} }
@ -146,9 +162,9 @@ class serendipity_event_responsiveimages extends serendipity_event
} }
/* Given an id for a image in the ML, create an srcset using smaller thumbnail images and their width. /* Given an id for a image in the ML, create an srcset using smaller thumbnail images and their width.
* Don't worry over thumbnail creation here, do that on image upload and thumbnail creation (TODO). * Don't worry over thumbnail creation here, that's done on image upload and thumbnail creation.
* */ * */
function createSrcset($id) { function createSrcset($id, $maxWidth = 20000) {
global $serendipity; global $serendipity;
$imgBase = $serendipity['serendipityHTTPPath'] . $serendipity['uploadHTTPPath']; $imgBase = $serendipity['serendipityHTTPPath'] . $serendipity['uploadHTTPPath'];
@ -159,16 +175,40 @@ class serendipity_event_responsiveimages extends serendipity_event
$path4X = $imgBase . $origImage['realname']; $path4X = $imgBase . $origImage['realname'];
$width3X = $width4X * 3 / 4; $width3X = $width4X * 3 / 4;
// TODO: Use a core function to create thumbnail name $path3X = $imgBase . preg_replace("@.$extension\z@", '', $origImage['realname']) . ".3X.{$serendipity['thumbSuffix']}.$extension";
$path3X = $imgBase . preg_replace("@.$extension\z@", '', $origImage['realname']) . ".3X.serendipityThumb.$extension";
$width2X = $width4X / 2; $width2X = $width4X / 2;
$path2X = $imgBase . preg_replace("@.$extension\z@", '', $origImage['realname']) . ".2X.serendipityThumb.$extension"; $path2X = $imgBase . preg_replace("@.$extension\z@", '', $origImage['realname']) . ".2X.{$serendipity['thumbSuffix']}.$extension";
$width1X = $width4X / 4; $width1X = $width4X / 4;
$path1X = $imgBase . preg_replace("@.$extension\z@", '', $origImage['realname']) . ".1X.serendipityThumb.$extension"; $path1X = $imgBase . preg_replace("@.$extension\z@", '', $origImage['realname']) . ".1X.{$serendipity['thumbSuffix']}.$extension";
return "srcset='$path4X {$width4X}w, $path3X {$width3X}w, $path2X {$width2X}w, $path1X {$width1X}w' sizes='(min-width: 1600px) 100vw, (min-width: 900px) 66vw, (min-width: 600px) 33vw, 200px'"; $thumbnailPath = $serendipity['serendipityPath'] . $serendipity['uploadPath'] . preg_replace("@.$extension\z@", '', $origImage['realname']) . ".{$serendipity['thumbSuffix']}.$extension";
$widthThumbnail = serendipity_getimagesize($thumbnailPath)[0];
$thumbnail = $imgBase . preg_replace("@.$extension\z@", '', $origImage['realname']) . ".{$serendipity['thumbSuffix']}.$extension";
$widthHalfThumbnail = $widthThumbnail / 2;
$halfThumbnail = $imgBase . preg_replace("@.$extension\z@", '', $origImage['realname']) . ".halfThumbnail.{$serendipity['thumbSuffix']}.$extension";
$srcset = "srcset='";
if ($width4X <= $maxWidth) {
$srcset .= "$path4X {$width4X}w,";
}
if ($width3X <= $maxWidth) {
$srcset .= "$path3X {$width3X}w,";
}
if ($width2X <= $maxWidth) {
$srcset .= "$path2X {$width2X}w,";
}
if ($width1X <= $maxWidth) {
$srcset .= "$path1X {$width1X}w,";
}
$srcset .= "$thumbnail {$widthThumbnail}w, $halfThumbnail {$widthHalfThumbnail}w'";
return $srcset;
} }
} }