From 88a89436ae157c974d3651db09bd1fa1fdb62ce3 Mon Sep 17 00:00:00 2001 From: onli Date: Sun, 16 Apr 2017 01:15:27 +0200 Subject: [PATCH] responsive: Use default thumbnail in srcset (#474) Also, use width to detect if the user only selected a thumbnail, and accordingly reduce the srcset selection --- .../serendipity_event_responsiveimages.php | 66 +++++++++++++++---- 1 file changed, 53 insertions(+), 13 deletions(-) diff --git a/plugins/serendipity_event_responsiveimages/serendipity_event_responsiveimages.php b/plugins/serendipity_event_responsiveimages/serendipity_event_responsiveimages.php index cdfe7d43..dce89bce 100644 --- a/plugins/serendipity_event_responsiveimages/serendipity_event_responsiveimages.php +++ b/plugins/serendipity_event_responsiveimages/serendipity_event_responsiveimages.php @@ -18,7 +18,7 @@ class serendipity_event_responsiveimages extends serendipity_event $propbag->add('description', PLUGIN_EVENT_RESPONSIVE_DESC); $propbag->add('stackable', false); $propbag->add('author', 'Serendipity Team'); - $propbag->add('version', '0.1'); + $propbag->add('version', '0.2'); $propbag->add('requirements', array( '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 can use $addData, containing the path to the full size file, to get the starting width $origSize = serendipity_getimagesize($addData); - print_r( $origSize); $eventData[] = array( 'thumbSize' => ['width' => $origSize[0] * 3 / 4, 'height' => $origSize[1] * 3 / 4], 'thumb' => '3X.' . $serendipity['thumbSuffix'] @@ -117,7 +116,19 @@ class serendipity_event_responsiveimages extends serendipity_event 'thumbSize' => ['width' => $origSize[0] / 4, 'height' => $origSize[1] / 4], '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; default: 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 * 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) { - preg_match_all('@@', $text, $matches); + preg_match_all('@@', $text, $matches); foreach ($matches['id'] as $imgId) { - $srcset = $this->createSrcset($imgId); + preg_match('@]+width=["\'](\d+)["\']@', $text, $matches); + if ($matches[1]) { + $srcset = $this->createSrcset($imgId, $matches[1]); + } else { + $srcset = $this->createSrcset($imgId); + } $text = preg_replace("@(.*)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. - * 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; $imgBase = $serendipity['serendipityHTTPPath'] . $serendipity['uploadHTTPPath']; @@ -159,16 +175,40 @@ class serendipity_event_responsiveimages extends serendipity_event $path4X = $imgBase . $origImage['realname']; $width3X = $width4X * 3 / 4; - // TODO: Use a core function to create thumbnail name - $path3X = $imgBase . preg_replace("@.$extension\z@", '', $origImage['realname']) . ".3X.serendipityThumb.$extension"; + $path3X = $imgBase . preg_replace("@.$extension\z@", '', $origImage['realname']) . ".3X.{$serendipity['thumbSuffix']}.$extension"; $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; - $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; } }