README

Pimcore 10.x bundle to automate the minification of images inside a webpage.

Automatically generates all needed thumbnails and loads them in relation to the width of the surrounding html-element. The smallest image will be loaded as the default. Default image sizes are [320, 480, 768, 1024, 1280, 1920].

Install and Enable

composer require nambu-ch/pimcore-image-loader
php bin/console pimcore:bundle:enable ImageLoaderBundle

Dependencies

This library needs Bootstrap and jQuery to work.

Get rid of bootstrap

As an easy fix you can add the following css definition to your own style, so you don't need to include bootstrap:

.img-fluid {
    max-width: 100%;
    height: auto;
}

Usage

Load js file inside your layout.

$view->headScript()->appendFile('/bundles/imageloader/js/imageloader.js');

{% do pimcore_head_script().appendFile(asset('/bundles/imageloader/js/imageloader.js')) %}

There is now a version without the dependency of jquery at /bundles/imageloader/js/imageloader-vanilla.js.

Example

{{ imageloader("image", { width: 300 }) }}
//or
{% if editmode %}
    {{ pimcore_image("image", { width: 300 }) }}
{% else %}
    {% if not pimcore_image("image").isEmpty() %}
        {{ imageloader(pimcore_image("image"), { options... })|raw }}
    {% endif %}
{% endif %}
// or
{% set asset = pimcore_asset(2) %}
{{ imageloader(asset, { options... })|raw }}

Force imageloader to recalculate

The imageloader listens to the window resize event and automaticaly loads the best image, but sometimes images appear and need an manual recalculation of the best image size, for example when an accordion opens. In combination with the bootstrap event, this is done like this:

$('.accordion-collapse').on('show.bs.collapse', function () {
    var images = $(this).find(".image-loader");
    setTimeout(function () {
        images.imageLoader('onResized');
    }, 1);
}).on('shown.bs.collapse', function () {
    $(this).find(".image-loader").imageLoader('onResized');
});

Configuration

image_loader:
  cache_buster:
    disabled: true
  lazyloading: false

Available options

Following options are available:

Advanced usage

imageCssClass Option can be used to switch from background image to img-tag, set isBackgroundImage to true and define imageCssClass => 'd-block d-md-none'. If so the img-tag is shown on small sizes and a background from md-breakpoint upwards.

Using thumbnails with media queries

If the option thumbnail is set and the configuration has media queries, those are used for loading the image. Media queries are only used with their px value. So it doesn't matter if you have set min-with or max-width. It will always use the px as max-width. This option can be used together with isBackgroundImage, imageCssClass, sizeSelector and altText.