Contact Contact Show All Awards & Recognition
Contact
Show All Awards & Recognition

nambu-ch/pimcore-image-loader

not-reviewed

General Tools

Author:

Nambu
Nambu

Version

v1.4.5

Last updated

Compatible Pimcore Version

5.x / 6.x

Contact

info@nambu.ch

Issues

https://github.com/nambu-ch/pimcore-image-loader

No  Reviewer

nambu-ch/pimcore-image-loader

General Tools

Project Summary

Pimcore 5.x/6.x Load images depending on box size


Readme

Pimcore ImageLoaderBundle

Pimcore 5.x/6.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

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')) %}

Example

$imageBlock = $view->image("image");
if ($editmode) {
    echo $imageBlock;
} else {
    echo $view->template("ImageLoaderBundle:ImageLoader:ImageView.html.php", [
        "image" => $imageBlock,
    ]);
}
// or
$image = Asset::getById(2);
echo $view->template("ImageLoaderBundle:ImageLoader:ImageView.html.php", [
    "image" => $image,
]);
{% 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');
});

Available options

Following options are available:

Name Type Description
isBackgroundImage boolean Set to true to load image as css background, instead of img-tag.
imageCssClass string A CSS class to apply to the image.
thumbnailNames array List of size => thumbnail-names to generate the different sizes. e.g. [ 320 => 'thumb-small', 1024 => 'thumb-big' ]
sizeSelector string jQuery CSS selector to a html element which will be used for determining the size. e.g. '.some-element'
widths array List of thumbnail widths to override default sizes e.g. [ 480, 1024, 1920 ]
sizesOptions array List of options e.g. [ 480 => [ 'size' => 480, 'imageTag' => $view->image('image-480') ] ]
altText string Alt-Text of the image.
thumbnail string Thumbnail-Name from Pimcore configuration.

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.

Review status

not-reviewed

?>

Author:

Nambu
Nambu

Version

v1.4.5

Last updated

Compatible Pimcore Version

5.x / 6.x

Contact

info@nambu.ch

Issues

https://github.com/nambu-ch/pimcore-image-loader

No  Reviewer