Skip to content

Commit 030b0d2

Browse files
kpitnkpitn
committed
feat: Add WebP and backup with classic images
1 parent 8266e08 commit 030b0d2

File tree

2 files changed

+97
-24
lines changed

2 files changed

+97
-24
lines changed

‎Model/Display.php‎

Lines changed: 58 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,10 @@ class Display
5050
* @var WebpConvertor $webpConvertor
5151
*/
5252
protected $webpConvertor;
53+
/**
54+
* @var bool $retina
55+
*/
56+
protected bool $retina = false;
5357

5458
/**
5559
* Display constructor.
@@ -100,8 +104,7 @@ public function getImage(string $imagePath, int $width, int $height, array $para
100104
{
101105
/** @var bool $retina */
102106
$resize = $params['resize'] ?? [];
103-
/** @var bool $retina */
104-
$retina = $params['retina'] ?? false;
107+
$this->setRetina($params['retina'] ?? false);
105108
/** @var string $title */
106109
$title = $params['title'] ?? '';
107110
/** @var string $placeholderType */
@@ -123,12 +126,12 @@ public function getImage(string $imagePath, int $width, int $height, array $para
123126
/** @var string $mainImageUrl */
124127
$mainImageUrl = $this->resize->resizeAndGetUrl($imagePath, $width, $height, $resize);
125128
if ($mainImageUrl === '') {
126-
$imagePath = $placeholderImagePath;
129+
$imagePath = $placeholderImagePath;
127130
$mainImageUrl = $placeholderImageUrl;
128131
}
129132

130133
if ($this->isSvgImage($imagePath)) {
131-
return '<picture><img alt="' . $alt . '" title="' . $title . '" class="' . $class . '" ' . ($placeholder ? ' src="' . $placeholderImageUrl . '"' : '') . ' data-src="' . $mainImageUrl . '"/></picture>';
134+
return '<picture><img loading="lazy" alt="' . $alt . '" title="' . $title . '" class="' . $class . '" ' . ($placeholder ? ' src="' . $placeholderImageUrl . '"' : '') . ' width="' . $width . '" height="' . $height . '" data-src="' . $mainImageUrl . '"/></picture>';
132135
}
133136

134137
/** @var string $html */
@@ -137,25 +140,26 @@ public function getImage(string $imagePath, int $width, int $height, array $para
137140
/** @var int $bpWidth */
138141
/** @var int $bpHeight */
139142
foreach ($breakpoints as $breakpoint => [$bpWidth, $bpHeight]) {
140-
$html .= '<source media="(min-width: ' . $breakpoint . 'px)" data-srcset="';
141-
$imageUrl = $this->resize->resizeAndGetUrl($imagePath, $bpWidth, $bpHeight, $resize);
142-
$html .= $imageUrl;
143-
if ($retina) {
144-
$imageUrl = $this->resize->resizeAndGetUrl($imagePath, $bpWidth * 2, $bpHeight * 2, $resize);
145-
$html .= ' 1x, ' . $imageUrl . ' 2x';
143+
$html .= '<source media="(min-width: ' . $breakpoint . 'px)" data-srcset="';
144+
if ($this->config->isWebpEnabled()) {
145+
$html .= $this->getBreakPointImages($imagePath, $bpWidth, $bpHeight, $resize, 'webp');
146146
}
147+
$html .= $this->getBreakPointImages($imagePath, $bpWidth, $bpHeight, $resize);
148+
147149
$html .= '" />';
148150
}
149151
}
150152

151153
/** @var string $mainSrcset */
152154
$mainSrcset = '';
153-
if ($retina) {
154-
$imageUrl = $this->resize->resizeAndGetUrl($imagePath, $width * 2, $height * 2, $resize);
155-
$mainSrcset = $mainImageUrl . ' 1x, ' . $imageUrl . ' 2x';
155+
if ($this->isRetina()) {
156+
if ($this->config->isWebpEnabled()) {
157+
$mainSrcset .= $this->getBreakPointImages($imagePath, $width * 2, $height *2, $resize, 'webp');
158+
}
159+
$mainSrcset .= $this->getBreakPointImages($imagePath, $width *2, $height *2, $resize);
156160
}
157161

158-
$html .= '<img alt="' . $alt . '" title="' . $title . '" class="' . $class . '" ' . ($placeholder ? ' src="' . $placeholderImageUrl . '"' : '') . ' data-src="' . $mainImageUrl . '" data-srcset="' . $mainSrcset . '"/>';
162+
$html .= '<img loading="lazy" alt="' . $alt . '" title="' . $title . '" class="' . $class . '" ' . ($placeholder ? ' src="' . $placeholderImageUrl . '"' : '') . ' data-src="' . $mainImageUrl . '" data-srcset="' . $mainSrcset . '"/>';
159163
$html .= '</picture>';
160164

161165
return $html;
@@ -170,11 +174,32 @@ public function getImage(string $imagePath, int $width, int $height, array $para
170174
*/
171175
protected function isSvgImage(string $imagePath): bool
172176
{
173-
/** @var string $imageParts */
177+
/** @var string $imageParts */
174178
$imageParts = pathinfo($imagePath);
179+
175180
return isset($imageParts['extension']) && $imageParts['extension'] === 'svg';
176181
}
177182

183+
/**
184+
* @param $imagePath
185+
* @param $bpWidth
186+
* @param $bpHeight
187+
* @param $resize
188+
*
189+
* @return string
190+
*/
191+
protected function getBreakPointImages($imagePath, $bpWidth, $bpHeight, $resize, $format = null)
192+
{
193+
$imageUrl = $this->resize->resizeAndGetUrl($imagePath, $bpWidth, $bpHeight, $resize, $format);
194+
$html = $imageUrl;
195+
if ($this->isRetina()) {
196+
$imageUrl = $this->resize->resizeAndGetUrl($imagePath, $bpWidth * 2, $bpHeight * 2, $resize, $format);
197+
$html .= ' 1x, ' . $imageUrl . ' 2x, ';
198+
}
199+
200+
return $html;
201+
}
202+
178203
/**
179204
* Get webp image if enabled
180205
*
@@ -193,4 +218,22 @@ protected function getWebpImage($image): string
193218

194219
return $image;
195220
}
221+
222+
/**
223+
* @return bool
224+
*/
225+
protected function isRetina(): bool
226+
{
227+
return $this->retina;
228+
}
229+
230+
/**
231+
* @param bool $retina
232+
*
233+
* @return void
234+
*/
235+
protected function setRetina(bool $retina): void
236+
{
237+
$this->retina = $retina;
238+
}
196239
}

‎Model/Resize.php‎

Lines changed: 39 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,12 @@
2727
*/
2828
class Resize
2929
{
30+
/**
31+
* constant FORMAT_WEBP
32+
*
33+
* @var string FORMAT_WEBP
34+
*/
35+
public const FORMAT_WEBP = 'webp';
3036
/**
3137
* constant CACHE_TAG_IDENTIFIER
3238
*
@@ -153,6 +159,10 @@ class Resize
153159
* @var WebpConvertor $webpConvertor
154160
*/
155161
protected $webpConvertor;
162+
/**
163+
* @var string|null $format
164+
*/
165+
protected ?string $format = null;
156166

157167
/**
158168
* Resize constructor.
@@ -194,16 +204,19 @@ public function __construct(
194204
* @param null|int $width
195205
* @param null|int $height
196206
* @param array $resizeSettings
207+
* @param string $format
197208
*
198209
* @return string
199210
*/
200-
public function resizeAndGetUrl(string $imagePath, $width, $height, array $resizeSettings = []): string
211+
public function resizeAndGetUrl(string $imagePath, $width, $height, array $resizeSettings = [], string $format = null): string
201212
{
202-
/** @var string $cacheKey */
203213
$cacheKey = md5($imagePath . '-' . $width . '-' . $height . '-' . json_encode($resizeSettings));
204-
if ($resultUrl = $this->cache->load($cacheKey)) {
205-
return $resultUrl;
206-
}
214+
// if ($resultUrl = $this->cache->load($cacheKey)) {
215+
// return $resultUrl;
216+
// }
217+
218+
$this->setFormat($format);
219+
207220

208221
/** @var string $resultUrl */
209222
$resultUrl = '';
@@ -240,7 +253,7 @@ public function resizeAndGetUrl(string $imagePath, $width, $height, array $resiz
240253
$this->logger->error("Web200_ImageResize: could not find image: \n" . $e->getMessage());
241254
}
242255
try {
243-
if ($this->config->convertPngImage()) {
256+
if ($this->config->convertPngImage() && $this->getFormat() !== self::FORMAT_WEBP) {
244257
$this->absolutePathoriginal = $this->getAbsolutePathOriginal();
245258
if (preg_match('/\.png$/', $this->absolutePathoriginal)) {
246259
$this->relativeFilename = preg_replace('/(\.png$)/', '.jpg', $this->relativeFilename);
@@ -389,12 +402,11 @@ protected function getAbsolutePathResized(): string
389402
protected function getResizedImageUrl(): string
390403
{
391404
$relativePath = $this->getRelativePathResizedImage();
392-
if ($this->config->isWebpEnabled()) {
405+
if ($this->getFormat() === self::FORMAT_WEBP) {
393406
$relativePath = $this->webpConvertor->getWebPImage($relativePath);
394407
} else {
395408
$relativePath = $this->getRelativePathResizedImage();
396409
}
397-
398410
if ($this->mediaDirectoryRead->isFile($relativePath)) {
399411
return $this->storeManager->getStore()->getBaseUrl(UrlInterface::URL_TYPE_MEDIA) . $relativePath;
400412
}
@@ -478,7 +490,7 @@ protected function resizeAndSaveImage(): bool
478490
$imageAdapter->resize($this->width, $this->height);
479491
$imageAdapter->save($this->getAbsolutePathResized());
480492

481-
if ($this->config->isWebpEnabled()) {
493+
if ($this->getFormat() === self::FORMAT_WEBP) {
482494
$this->webpConvertor->convert($this->getAbsolutePathResized());
483495
}
484496

@@ -528,4 +540,22 @@ protected function isAnimatedGif($file): bool
528540

529541
return $frames > 1;
530542
}
543+
544+
/**
545+
* @return void
546+
*/
547+
protected function getFormat(): ?string
548+
{
549+
return $this->format;
550+
}
551+
552+
/**
553+
* @param null|string $format
554+
*
555+
* @return void
556+
*/
557+
protected function setFormat(?string $format): void
558+
{
559+
$this->format = $format;
560+
}
531561
}

0 commit comments

Comments
 (0)