Skip to content

Commit 22a1a83

Browse files
johnhughes1984johnhughes1984
authored
Merge pull request #1 from fisheyehq/build
Lazyload module build
2 parents 179f28b + e8e4ee4 commit 22a1a83

14 files changed

+223
-20
lines changed

‎CHANGELOG.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Changelog
2+
All notable changes to this project will be documented in this file.
3+
4+
The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
5+
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
6+
7+
## [Unreleased]
8+
9+
## [1.0.0] - 2018-02-15
10+
### Added
11+
* Add lazysizes script to support image lazy loading
12+
* Add automatic lazy loading support for product images
13+
* Add control over enabling/disabling lazy loading of product images from the Magento admin panel
14+
* Add 1px x 1px transparent png as placeholder for product images

‎Preference/OverrideProductImageTemplates.php

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<?php
2+
/**
3+
* Copyright © Fisheye Media Ltd. All rights reserved.
4+
* See LICENCE.txt for licence details.
5+
*/
6+
namespace Fisheye\Lazyload\Preference;
7+
8+
use Fisheye\Lazyload\Scope\Config;
9+
use Magento\Catalog\Block\Product\Image;
10+
use Magento\Framework\View\Element\Template\Context;
11+
12+
class OverrideProductImageTemplates extends Image
13+
{
14+
/**
15+
* @var Config
16+
*/
17+
private $config;
18+
19+
/**
20+
* Replace hardcoded Magento_Catalog product image templates
21+
*
22+
* @param Context $context
23+
* @param Config $config
24+
* @param array $data
25+
*/
26+
public function __construct(
27+
Context $context,
28+
Config $config,
29+
array $data = []
30+
) {
31+
$this->config = $config;
32+
33+
if (isset($data['template']) && $config->isProductImageLazyloadingEnabled()) {
34+
35+
$template = str_replace('Magento_Catalog', 'Fisheye_Lazyload', $data['template']);
36+
$this->setTemplate($template);
37+
unset($data['template']);
38+
}
39+
parent::__construct($context, $data);
40+
}
41+
}

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ A Magento 2 module that adds support for lazy loading of images.
1818
* Support can be added to any further images by adding the following to `<img>` elements:
1919
* Add `lazyload` class
2020
* Change the `src` attribute to `data-src`
21+
* Optional: add a dummy `src` with transparent 1px x 1px image to avoid broken image links prior to lazy load (see product image templates as example)
2122

2223
## Compatibility
2324

‎Scope/Config.php

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<?php
2+
/**
3+
* Copyright © Fisheye Media Ltd. All rights reserved.
4+
* See LICENCE.txt for licence details.
5+
*/
6+
namespace Fisheye\Lazyload\Scope;
7+
8+
use Magento\Framework\App\Config\ScopeConfigInterface;
9+
10+
class Config
11+
{
12+
const XML_PATH_CATALOG_PRODUCT_IMAGE_LAZYLOAD_ENABLED = 'catalog/product_image_lazyload/enabled';
13+
14+
/**
15+
* @var ScopeConfigInterface
16+
*/
17+
private $scopeConfig;
18+
19+
/**
20+
* Config constructor.
21+
*
22+
* @param ScopeConfigInterface $scopeConfig
23+
*/
24+
public function __construct(ScopeConfigInterface $scopeConfig)
25+
{
26+
$this->scopeConfig = $scopeConfig;
27+
}
28+
29+
/**
30+
* @return bool
31+
*/
32+
public function isProductImageLazyloadingEnabled()
33+
{
34+
return $this->scopeConfig->isSetFlag(self::XML_PATH_CATALOG_PRODUCT_IMAGE_LAZYLOAD_ENABLED);
35+
}
36+
}

‎composer.json

+21-18
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,26 @@
11
{
2-
"name": "fisheye/module-lazyload",
3-
"description": "A Magento 2 module that adds support for lazy loading of images.",
4-
"type": "magento2-module",
5-
"authors": [
6-
{
7-
"name": "Fisheye Web Design",
8-
"homepage": "http://fisheye-webdesign.co.uk/"
2+
"name": "fisheye/module-lazyload",
3+
"description": "A Magento 2 module that adds support for lazy loading of images.",
4+
"type": "magento2-module",
5+
"require": {
6+
"magento/module-catalog": "^100.0|^101.0|^102.0"
97
},
10-
{
11-
"name": "John Hughes",
12-
"email": "johnh@fisheyehq.com"
13-
}
14-
],
15-
"autoload": {
16-
"files": [
17-
"registration.php"
8+
"authors": [
9+
{
10+
"name": "Fisheye Web Design",
11+
"homepage": "http://fisheye-webdesign.co.uk/"
12+
},
13+
{
14+
"name": "John Hughes",
15+
"email": "johnh@fisheyehq.com"
16+
}
1817
],
19-
"psr-4": {
20-
"Fisheye\\Lazyload\\": ""
18+
"autoload": {
19+
"files": [
20+
"registration.php"
21+
],
22+
"psr-4": {
23+
"Fisheye\\Lazyload\\": ""
24+
}
2125
}
22-
}
2326
}

‎etc/adminhtml/system.xml

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<?xml version="1.0"?>
2+
<!--
3+
/**
4+
* Copyright © Fisheye Media Ltd. All rights reserved.
5+
* See LICENCE.txt for licence details.
6+
*/
7+
-->
8+
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
9+
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
10+
<system>
11+
<section id="catalog">
12+
<group id="product_image_lazyload"
13+
translate="label"
14+
sortOrder="999"
15+
showInDefault="1"
16+
showInWebsite="1"
17+
showInStore="1">
18+
<label>Product Image Lazyload</label>
19+
<field id="enabled"
20+
translate="label comment"
21+
type="select"
22+
sortOrder="1"
23+
showInDefault="1"
24+
showInWebsite="1"
25+
showInStore="1"
26+
canRestore="1">
27+
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
28+
<label>Enable lazy loading of product images</label>
29+
</field>
30+
</group>
31+
</section>
32+
</system>
33+
</config>

‎etc/config.xml

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<?xml version="1.0"?>
2+
<!--
3+
/**
4+
* Copyright © Fisheye Media Ltd. All rights reserved.
5+
* See LICENCE.txt for licence details.
6+
*/
7+
-->
8+
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
9+
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
10+
<default>
11+
<catalog>
12+
<product_image_lazyload>
13+
<enabled>1</enabled>
14+
</product_image_lazyload>
15+
</catalog>
16+
</default>
17+
</config>

‎etc/frontend/di.xml

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<?xml version="1.0"?>
2+
<!--
3+
/**
4+
* Copyright © Fisheye Media Ltd. All rights reserved.
5+
* See LICENCE.txt for licence details.
6+
*/
7+
-->
8+
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
9+
xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
10+
<preference for="Magento\Catalog\Block\Product\Image"
11+
type="Fisheye\Lazyload\Preference\OverrideProductImageTemplates"/>
12+
</config>

‎etc/module.xml

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<!--
33
/**
44
* Copyright © Fisheye Media Ltd. All rights reserved.
5-
* See LICENCE.txt for license details.
5+
* See LICENCE.txt for licence details.
66
*/
77
-->
88
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

‎registration.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<?php
22
/**
33
* Copyright © Fisheye Media Ltd. All rights reserved.
4-
* See LICENCE.txt for license details.
4+
* See LICENCE.txt for licence details.
55
*/
66
\Magento\Framework\Component\ComponentRegistrar::register(
77
\Magento\Framework\Component\ComponentRegistrar::MODULE,

‎view/frontend/requirejs-config.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/**
2+
* Copyright © Fisheye Media Ltd. All rights reserved.
3+
* See LICENCE.txt for licence details.
4+
*/
5+
var config = {
6+
deps: [
7+
'Fisheye_Lazyload/js/lazysizes.min'
8+
]
9+
};

‎view/frontend/templates/product/image.phtml

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<?php
2+
/**
3+
* Copyright © Fisheye Media Ltd. All rights reserved.
4+
* See LICENCE.txt for licence details.
5+
*/
6+
?>
7+
<?php /** @var $block \Magento\Catalog\Block\Product\Image */ ?>
8+
9+
<img class="photo image lazyload"
10+
<?= /* @escapeNotVerified */ $block->getCustomAttributes() ?>
11+
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
12+
data-src="<?= /* @escapeNotVerified */ $block->getImageUrl() ?>"
13+
width="<?= /* @escapeNotVerified */ $block->getWidth() ?>"
14+
height="<?= /* @escapeNotVerified */ $block->getHeight() ?>"
15+
alt="<?= /* @escapeNotVerified */ $block->stripTags($block->getLabel(), null, true) ?>" />

‎view/frontend/templates/product/image_with_borders.phtml

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<?php
2+
/**
3+
* Copyright © Fisheye Media Ltd. All rights reserved.
4+
* See LICENCE.txt for licence details.
5+
*/
6+
?>
7+
<?php /** @var $block \Magento\Catalog\Block\Product\Image */ ?>
8+
9+
<span class="product-image-container"
10+
style="width:<?= /* @escapeNotVerified */ $block->getWidth() ?>px;">
11+
<span class="product-image-wrapper"
12+
style="padding-bottom: <?= /* @escapeNotVerified */ ($block->getRatio() * 100) ?>%;">
13+
<img class="product-image-photo lazyload"
14+
<?= /* @escapeNotVerified */ $block->getCustomAttributes() ?>
15+
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
16+
data-src="<?= /* @escapeNotVerified */ $block->getImageUrl() ?>"
17+
width="<?= /* @escapeNotVerified */ $block->getResizedImageWidth() ?>"
18+
height="<?= /* @escapeNotVerified */ $block->getResizedImageHeight() ?>"
19+
alt="<?= /* @escapeNotVerified */ $block->stripTags($block->getLabel(), null, true) ?>"/></span>
20+
</span>

‎view/frontend/web/js/lazysizes.min.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)