Skip to content
Permalink
Browse files

feat: lazyloading

Signed-off-by: Florian ALEXANDRE <f.alexandre@novactive.com>
  • Loading branch information...
florianalexandre committed Feb 15, 2019
1 parent c35d7da commit 3b6e2264eef063c773421910e1564913e646567d
@@ -47,9 +47,16 @@ public function registerBundles()
```

```twig
<script src="{{ asset("bundles/ezenhancedimageasset/js/focuspoint.js") }}"></script>
<script src="{{ asset("bundles/ezenhancedimageasset/js/enhancedimage.js") }}"></script>
```

#### LazyLoading
Lazy loading is controlled globaly by the following settings (default to true) and can be overriden at field level.

```yaml
parameters:
ez_enhanced_image_asset.default.enable_lazy_load: true
```

### 2. Image variations configuration

If needed, update your configuration and add the following filter to generate thumbnail based on the contributed focus point
@@ -73,6 +80,7 @@ You can now specify the `alternativeAlias` parameter to define alternative image
media: '(max-width: 320px)'
}
]
lazyLoad: true|false // optionnal
}
}) }}
```
@@ -5,13 +5,15 @@
"repository": "https://github.com/Novactive/NovaeZEnhancedImageAssetBundle.git",
"author": "Florian ALEXANDRE <f.alexandre@novactive.com>",
"license": "MIT",
"dependencies": {},
"dependencies": {
"image-focus": "^1.0.3",
"lazysizes": "^4.1.5"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-env": "7.1.0",
"babel-loader": "^8.0.5",
"babel-preset-env": "^1.7.0",
"image-focus": "^1.0.3",
"ts-loader": "^5.3.3",
"typescript": "^3.3.3",
"uglifyjs-webpack-plugin": "^2.1.1",
@@ -34,6 +34,7 @@ public function load(array $configs, ContainerBuilder $container)
{
$loader = new Loader\YamlFileLoader($container, new FileLocator(__DIR__.'/../Resources/config'));
$loader->load('services.yml');
$loader->load('default_settings.yml');
$loader->load('fieldtypes.yml');
$loader->load('field_value_converters.yml');
$loader->load('migration.yml');
@@ -57,8 +58,10 @@ public function prepend(ContainerBuilder $container)
);
$configs = [
'field_templates.yml' => 'ezpublish',
'admin_ui_forms.yml' => 'ezpublish',
'field_templates.yml' => 'ezpublish',
'admin_ui_forms.yml' => 'ezpublish',
'image_variations.yml' => 'ezpublish',
'twig.yml' => 'twig',
];
$activatedBundles = array_keys($container->getParameter('kernel.bundles'));
@@ -0,0 +1,3 @@
parameters:
ez_enhanced_image_asset.default.image_default_post_processors: ~
ez_enhanced_image_asset.default.enable_lazy_load: true
@@ -9,9 +9,10 @@ system:
field_templates:
-
template: "@ezdesign/enhanced_image_asset/content_fields.html.twig"
priority: 1000

admin_group:
field_templates:
-
template: "@ezdesign/enhanced_image_asset/admin_content_fields.html.twig"
priority: 10
priority: 1000
@@ -0,0 +1,11 @@
system:
default:
image_variations:
original_optimized:
reference: null
post_processors:
jpegoptim: { strip_all: true, max: 70, progressive: true }
placeholder:
reference: original_optimized
filters:
- { name: placeholder, params: {size: [42, null]} }
@@ -6,6 +6,7 @@ services:

bind:
$imageVariationService: '@ezpublish.fieldType.ezimage.variation_service'
$filterConfiguration: '@liip_imagine.filter.configuration'

Novactive\EzEnhancedImageAsset\Twig\:
resource: '../../../lib/Twig/*'
@@ -21,9 +22,20 @@ services:
tags:
- {name: 'liip_imagine.filter.loader', loader: 'focusedThumbnail'}

Novactive\EzEnhancedImageAsset\Imagine\Filter\Loader\PlaceholderFilterLoader:
tags:
- { name: "liip_imagine.filter.loader", loader: 'placeholder' }

Novactive\EzEnhancedImageAsset\Imagine\ImageAliasGenerator:
decorates: ezpublish.image_alias.imagine.alias_generator
arguments:
$dataLoader: "@ezpublish.image_alias.imagine.binary_loader"
$ioResolver: "@ezpublish.image_alias.imagine.cache_resolver"
$logger: "@?logger"
$logger:

Novactive\EzEnhancedImageAsset\Imagine\Filter\FilterConfiguration:
decorates: 'liip_imagine.filter.configuration'
arguments:
$filterConfiguration: '@Novactive\EzEnhancedImageAsset\Imagine\Filter\FilterConfiguration.inner'
calls:
- [setDefaultPostProcessors, ['$image_default_post_processors;ez_enhanced_image_asset$']]
@@ -0,0 +1,2 @@
globals:
lazy_load_images: $enable_lazy_load;ez_enhanced_image_asset$
@@ -13,5 +13,20 @@ picture.enhancedimage--wrapper {
position: relative;
overflow: hidden;
}
picture.enhancedimage--wrapper .enhancedimage--img {
position: absolute;
min-height: 100%;
min-width: 100%;
}
picture.enhancedimage--wrapper .enhancedimage--img.blur-up {
-webkit-filter: blur(0);
filter: blur(0);
transition: filter 400ms, -webkit-filter 400ms;
}
picture.enhancedimage--wrapper .enhancedimage--img.blur-up:not(.lazyloaded) {
-webkit-filter: blur(25px);
filter: blur(25px);
transform: scale(1.1);
}

/*# sourceMappingURL=enhancedimage.css.map */
@@ -13,4 +13,19 @@ picture.enhancedimage--wrapper {
display: block;
position: relative;
overflow: hidden;
.enhancedimage--img{
position: absolute;
min-height: 100%;
min-width: 100%;
&.blur-up {
-webkit-filter: blur(0);
filter: blur(0);
transition: filter 400ms, -webkit-filter 400ms;
&:not(.lazyloaded){
-webkit-filter: blur(25px);
filter: blur(25px);
transform: scale(1.1);
}
}
}
}

Large diffs are not rendered by default.

Oops, something went wrong.

This file was deleted.

Oops, something went wrong.
@@ -65,8 +65,8 @@
let imageComponent = image._image;
if (imageComponent) {
imageComponent.addSource(image.getAttribute('srcset'), {
x: image.getAttribute('data-focus-x'),
y: image.getAttribute('data-focus-y'),
x: parseFloat(image.getAttribute('data-focus-x')),
y: parseFloat(image.getAttribute('data-focus-y')),
});
imageComponent.updateFocusPoint(true);
}
@@ -131,12 +131,9 @@

[...this.fieldContainer.querySelectorAll(SELECTOR_FRAME)].forEach((frame) => {
const image = frame.querySelector('img');
image.setAttribute('data-focus-x', focusX.toFixed(2));
image.setAttribute('data-focus-y', focusY.toFixed(2));

let imageComponent = image._image;
if (imageComponent) {
imageComponent.updateFocusPoint(true);
imageComponent.setFocus({ x: parseFloat(focusX.toFixed(2)), y: parseFloat(focusY.toFixed(2)) });
}
image.dispatchEvent(new CustomEvent('focusChange', { focusX: focusX, focusY: focusY }));
});
@@ -5,13 +5,15 @@
{% spaceless %}
{% if not ez_is_field_empty( content, field ) %}
{% set imageAlias = ez_image_alias( field, versionInfo, parameters.alias|default( 'original' ) ) %}
{% set placeholderAlias = ez_image_alias( field, versionInfo, "placeholder" ) %}
{% set focusPoint = field.value.focusPoint %}
{% set src = imageAlias ? asset( imageAlias.uri ) : "//:0" %}
{% set attr = attr|merge({'class': (attr.class|default('') ~ ' ez-field-preview ez-field-preview--ezimage')|trim}) %}
<div {{ block( 'field_attributes' ) }}>
<div class="ez-image__wrapper ">
<picture class="enhancedimage--wrapper">
<img srcset="{{ src }}" class="enhancedimage--img"
<img srcset="{{ placeholderAlias ? asset( placeholderAlias.uri ) : "//:0" }}"
data-srcset="{{ imageAlias ? asset( imageAlias.uri ) : "//:0" }}"
class="enhancedimage--img enhancedimage--img--lazyload blur-up"
data-focus-x="{{ (focusPoint ? focusPoint.posX : '')}}"
data-focus-y="{{ (focusPoint ? focusPoint.posY : '')}}">
</picture>
@@ -51,7 +53,7 @@
{% set reticleX = ((focusPoint.posX + 1) / 2) * 100 %}
{% set reticleY = ((-focusPoint.posY + 1) / 2) * 100 %}
<img class="focuspoint-helper--reticle" src="{{ asset('bundles/ezenhancedimageasset/img/focuspoint-target.png') }}" style="top: {{ reticleY|round(2) }}%; left: {{ reticleX|round(2) }}%;">
<img class="focuspoint-helper--img" src="{{ src }}">
<img class="focuspoint-helper--img" src="{{ imageAlias ? asset( imageAlias.uri ) : "//:0" }}">
</div>
</div>
</td>
Oops, something went wrong.

0 comments on commit 3b6e226

Please sign in to comment.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.