Skip to content

Commit 22161e5

Browse files
vvuksanvvuksan
authored
Merge pull request #161 from Inchoo/feature/adaptive-pixel-ratio-enhancements
Feature/adaptive pixel ratio enhancements
2 parents 89f1235 + 07a5bc5 commit 22161e5

File tree

7 files changed

+191
-7
lines changed

7 files changed

+191
-7
lines changed

Diff for: ‎Block/System/Config/Form/Field/Checkbox.php

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<?php
2+
3+
namespace Fastly\Cdn\Block\System\Config\Form\Field;
4+
5+
use Magento\Config\Block\System\Config\Form\Field;
6+
use Magento\Framework\Data\Form\Element\AbstractElement;
7+
use Magento\Backend\Block\Template\Context;
8+
use Fastly\Cdn\Model\Config;
9+
use Fastly\Cdn\Model\Config\Backend\PixelRatios;
10+
11+
/**
12+
* Class Checkbox
13+
*
14+
* @package Fastly\Cdn\Block\System\Config\Form\Field
15+
*/
16+
class Checkbox extends Field
17+
{
18+
public $values = null;
19+
public $pixelRatios;
20+
public $config;
21+
22+
public function __construct(
23+
Context $context,
24+
PixelRatios $pixelRatios,
25+
Config $config
26+
) {
27+
$this->pixelRatios = $pixelRatios;
28+
$this->config = $config;
29+
parent::__construct($context);
30+
}
31+
32+
public function _construct()
33+
{
34+
$this->_template = 'Fastly_Cdn::system/config/form/field/checkbox.phtml';
35+
36+
parent::_construct();
37+
}
38+
39+
/**
40+
* Retrieve element HTML markup.
41+
*
42+
* @param \Magento\Framework\Data\Form\Element\AbstractElement $element
43+
*
44+
* @return string
45+
*/
46+
public function _getElementHtml(AbstractElement $element)
47+
{
48+
$this->setNamePrefix($element->getName())
49+
->setHtmlId($element->getHtmlId());
50+
51+
return $this->_toHtml();
52+
}
53+
54+
/**
55+
* @return array
56+
*/
57+
public function getValues()
58+
{
59+
$values = [];
60+
$ratios = $this->pixelRatios->toOptionArray();
61+
foreach ($ratios as $value) {
62+
$values[$value['value']] = $value['label'];
63+
}
64+
return $values;
65+
}
66+
/**
67+
*
68+
* @param $name
69+
* @return boolean
70+
*/
71+
public function getIsChecked($name)
72+
{
73+
return in_array($name, $this->getCheckedValues());
74+
}
75+
76+
/**
77+
* @return array|null
78+
*/
79+
public function getCheckedValues()
80+
{
81+
if ($this->values === null) {
82+
$data = $this->config->getImageOptimizationRatios();
83+
if (!isset($data)) {
84+
$data = '';
85+
}
86+
$this->values = explode(',', $data);
87+
}
88+
return $this->values;
89+
}
90+
}

Diff for: ‎Model/Config.php

+16
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,12 @@ class Config extends \Magento\PageCache\Model\Config
175175
const XML_FASTLY_IMAGE_OPTIMIZATIONS_PIXEL_RATIO
176176
= 'system/full_page_cache/fastly/fastly_image_optimization_configuration/image_optimizations_pixel_ratio';
177177

178+
/**
179+
* XML path to image optimizations pixel ratios
180+
*/
181+
const XML_FASTLY_IMAGE_OPTIMIZATIONS_RATIOS
182+
= 'system/full_page_cache/fastly/fastly_image_optimization_configuration/image_optimizations_ratios';
183+
178184
/**
179185
* XML path to Google analytics CID
180186
*/
@@ -482,6 +488,16 @@ public function isImageOptimizationPixelRatioEnabled()
482488
return $this->_scopeConfig->isSetFlag(self::XML_FASTLY_IMAGE_OPTIMIZATIONS_PIXEL_RATIO);
483489
}
484490

491+
/**
492+
* Return image optimization pixel ratios
493+
*
494+
* @return mixed
495+
*/
496+
public function getImageOptimizationRatios()
497+
{
498+
return $this->_scopeConfig->getvalue(self::XML_FASTLY_IMAGE_OPTIMIZATIONS_RATIOS);
499+
}
500+
485501
/**
486502
* Return blocked countries
487503
*

Diff for: ‎Model/Config/Backend/PixelRatios.php

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<?php
2+
3+
namespace Fastly\Cdn\Model\Config\Backend;
4+
5+
use Magento\Framework\App\Config\Value;
6+
use Magento\Framework\Exception\LocalizedException;
7+
8+
/**
9+
* Class PixelRatios
10+
*
11+
* @package Fastly\Cdn\Model\Config\Backend
12+
*/
13+
class PixelRatios extends Value
14+
{
15+
/**
16+
* Options getter
17+
*
18+
* @return array
19+
*/
20+
public function toOptionArray()
21+
{
22+
return [
23+
['value' => '1.5', 'label'=>__('1.5x')],
24+
['value' => '2', 'label'=>__('2x')],
25+
['value' => '3', 'label'=>__('3x')],
26+
['value' => '3.5', 'label'=>__('3.5x')],
27+
['value' => '4', 'label'=>__('4x')]
28+
];
29+
}
30+
31+
/**
32+
* @return $this|string
33+
* @throws LocalizedException
34+
*/
35+
public function beforeSave()
36+
{
37+
$value = $this->getValue();
38+
39+
if ($value === null || empty($value)) {
40+
throw new LocalizedException(
41+
__('At least one device pixel ratio must be selected.', $this->getFieldConfig('label'))
42+
);
43+
}
44+
45+
return $value;
46+
}
47+
}

Diff for: ‎Plugin/AdaptivePixelRationPlugin.php

+8-5
Original file line numberDiff line numberDiff line change
@@ -34,15 +34,18 @@ public function beforeToHtml(\Magento\Catalog\Block\Product\Image $subject)
3434
return;
3535
}
3636

37+
$srcSet = [];
3738
$imageUrl = $subject->getData('image_url');
39+
$pixelRatios = $this->config->getImageOptimizationRatios();
40+
$pixelRatiosArray = explode(',', $pixelRatios);
3841
$glue = (strpos($imageUrl, '?') !== false) ? '&' : '?';
42+
3943
# Pixel ratios defaults are based on the table from https://mydevice.io/devices/
4044
# Bulk of devices are 2x however many new devices like Samsung S8, iPhone X etc are 3x and 4x
41-
$srcSet = [
42-
$imageUrl . $glue . 'dpr=2 2x',
43-
$imageUrl . $glue . 'dpr=3 3x',
44-
$imageUrl . $glue . 'dpr=4 4x'
45-
];
45+
foreach ($pixelRatiosArray as $pr) {
46+
$ratio = 'dpr=' . $pr . ' ' . $pr . 'x';
47+
$srcSet[] = $imageUrl . $glue . $ratio;
48+
}
4649

4750
$subject->setData('custom_attributes', 'srcset="' . implode(',', $srcSet) . '"');
4851
}

Diff for: ‎etc/adminhtml/system.xml

+11-1
Original file line numberDiff line numberDiff line change
@@ -213,12 +213,22 @@
213213
</field>
214214
<field id="image_optimizations_pixel_ratio" translate="label comment" type="select" sortOrder="95" showInDefault="1" showInWebsite="1" showInStore="1">
215215
<label>Enable adaptive device pixel ratios</label>
216-
<comment><![CDATA[Magento will use <a href="https://docs.fastly.com/guides/imageopto-setup-use/serving-responsive-images#adaptive-device-pixel-ratios" target="_blank">Adaptive device pixel rations</a> through Fastly service.]]></comment>
216+
<comment><![CDATA[Magento will use <a href="https://docs.fastly.com/guides/imageopto-setup-use/serving-responsive-images#adaptive-device-pixel-ratios" target="_blank">Adaptive device pixel ratios</a> through Fastly service.]]></comment>
217217
<depends>
218218
<field id="image_optimizations">1</field>
219219
</depends>
220220
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
221221
</field>
222+
<field id="image_optimizations_ratios" translate="label" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="0">
223+
<label>Device Pixel Ratios</label>
224+
<comment><![CDATA[Using a higher <a href="https://www.html5rocks.com/en/mobile/high-dpi/" target="_blank">Device Pixel Ratio</a> means serving larger images.]]></comment>
225+
<depends>
226+
<field id="image_optimizations">1</field>
227+
<field id="image_optimizations_pixel_ratio">1</field>
228+
</depends>
229+
<frontend_model>Fastly\Cdn\Block\System\Config\Form\Field\Checkbox</frontend_model>
230+
<backend_model>Fastly\Cdn\Model\Config\Backend\PixelRatios</backend_model>
231+
</field>
222232
</group>
223233
<group id="fastly_blocking" sortOrder="245" translate="label comment" showInDefault="1" showInWebsite="1" showInStore="1">
224234
<label>Blocking</label>

Diff for: ‎etc/config.xml

+4-1
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,11 @@
3838
<purge_catalog_product>1</purge_catalog_product>
3939
<purge_cms_page>0</purge_cms_page>
4040
<enable_geoip>0</enable_geoip>
41-
<image_optimizations>0</image_optimizations>
4241
</fastly_advanced_configuration>
42+
<fastly_image_optimization_configuration>
43+
<image_optimizations>0</image_optimizations>
44+
<image_optimizations_ratios>2,3</image_optimizations_ratios>
45+
</fastly_image_optimization_configuration>
4346
<fastly_web_hooks>
4447
<enable_webhooks>0</enable_webhooks>
4548
<publish_key_url_purge_events>1</publish_key_url_purge_events>

Diff for: ‎view/adminhtml/templates/system/config/form/field/checkbox.phtml

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<input type="hidden" name="<?php /* @noEscape */ echo $block->getNamePrefix() ?>" value="" />
2+
<ul class="checkboxes">
3+
<?php foreach ($block->getValues() as $name => $label) : ?>
4+
<li>
5+
<input type="checkbox" value="<?php /* @noEscape */ echo $name?>"
6+
data-validate="{required:true}"
7+
name="<?php /* @noEscape */ echo $block->getNamePrefix() ?>[]"
8+
id="<?php /* @noEscape */ echo $block->getHtmlId() . '_' . $name ?>"
9+
<?php /* @noEscape */ echo ($block->getIsChecked($name) ? ' checked="checked"' : '') ?>/>
10+
<label for="<?php /* @noEscape */ echo $block->getHtmlId() . '_' . $name ?>">
11+
<?php /* @noEscape */ echo $label ?>
12+
</label>
13+
</li>
14+
<?php endforeach;?>
15+
</ul>

0 commit comments

Comments
 (0)