PHPackages                             nambu-ch/pimcore-image-loader - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Image & Media](/categories/media)
4. /
5. nambu-ch/pimcore-image-loader

ActivePimcore-bundle[Image & Media](/categories/media)

nambu-ch/pimcore-image-loader
=============================

Pimcore 10.x, 11.x Load images depending on box size

v2.5.1(1y ago)0497GPL-3.0+PHPCI failing

Since Oct 29Pushed 1y ago4 watchersCompare

[ Source](https://github.com/nambu-ch/pimcore-image-loader)[ Packagist](https://packagist.org/packages/nambu-ch/pimcore-image-loader)[ Docs](https://github.com/nambu-ch/pimcore-image-loader)[ RSS](/packages/nambu-ch-pimcore-image-loader/feed)WikiDiscussions master Synced 3w ago

READMEChangelog (10)Dependencies (1)Versions (39)Used By (0)

Pimcore ImageLoaderBundle
=========================

[](#pimcore-imageloaderbundle)

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
------------------

[](#install-and-enable)

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

Dependencies
------------

[](#dependencies)

This library needs Bootstrap and jQuery to work.

### Get rid of bootstrap

[](#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
-----

[](#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

[](#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

[](#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

[](#configuration)

NameTypeDescription`cache_buster.disabled`booleanIt takes the modification date of the image asset to refresh cache if needed. (enabled by default)`lazyloading`booleanlazyloading adds the loading="lazy" to the image tag.```
image_loader:
  cache_buster:
    disabled: true
  lazyloading: false

```

### Available options

[](#available-options)

Following options are available:

NameTypeDescription`isBackgroundImage`booleanSet to true to load image as css background, instead of img-tag.`imageCssClass`stringA CSS class to apply to the image.`thumbnailNames`arrayList of size => thumbnail-names to generate the different sizes. e.g. `[ 320 => 'thumb-small', 1024 => 'thumb-big' ]``sizeSelector`stringjQuery CSS selector to a html element which will be used for determining the size. e.g. '.some-element'`widths`arrayList of thumbnail widths to override default sizes e.g. `[ 480, 1024, 1920 ]``sizesOptions`arrayList of options e.g. `[ 480 => [ 'size' => 480, 'imageTag' => $view->image('image-480') ]` \]`altText`stringAlt-Text of the image.`setImageSize`booleanSet width and height attributes on img element.`thumbnail`stringThumbnail-Name from Pimcore configuration.`emptyImageThumbnail`string or Asset\\ImagePath to an Image or a Pimcore Asset\\Image which is shown at start before imageloader determines the fitting thumbnail`lazyLoad`booleanEnable lazy loading via IntersectionObserver (deprecated)`disableCacheBuster`booleanDisable Cache Buster### Advanced usage

[](#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

[](#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`.

###  Health Score

38

—

LowBetter than 83% of packages

Maintenance46

Moderate activity, may be stable

Popularity13

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity70

Established project with proven stability

 Bus Factor1

Top contributor holds 54% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~56 days

Recently: every ~195 days

Total

37

Last Release

414d ago

Major Versions

v1.5.2 → v2.0.12021-07-09

v1.6.0 → v2.3.52023-03-16

### Community

Maintainers

![](https://www.gravatar.com/avatar/efe54c39c218f1508a1201b0e1964df8ac95e6257c3dbb5a02fcbcae02bba3d1?d=identicon)[nambu-ch](/maintainers/nambu-ch)

---

Top Contributors

[![lukas-schnieper](https://avatars.githubusercontent.com/u/11159008?v=4)](https://github.com/lukas-schnieper "lukas-schnieper (27 commits)")[![dominikschnieper](https://avatars.githubusercontent.com/u/9943150?v=4)](https://github.com/dominikschnieper "dominikschnieper (23 commits)")

---

Tags

imagepimcore

### Embed Badge

![Health badge](/badges/nambu-ch-pimcore-image-loader/health.svg)

```
[![Health](https://phpackages.com/badges/nambu-ch-pimcore-image-loader/health.svg)](https://phpackages.com/packages/nambu-ch-pimcore-image-loader)
```

###  Alternatives

[intervention/image

PHP Image Processing

14.3k203.8M2.5k](/packages/intervention-image)[league/glide

Wonderfully easy on-demand image manipulation library with an HTTP based API.

2.6k52.6M137](/packages/league-glide)[liip/imagine-bundle

This bundle provides an image manipulation abstraction toolkit for Symfony-based projects.

1.7k39.4M238](/packages/liip-imagine-bundle)[spatie/image

Manipulate images with an expressive API

1.4k58.5M175](/packages/spatie-image)[intervention/image-laravel

Laravel Integration of Intervention Image

1558.1M159](/packages/intervention-image-laravel)[intervention/gif

PHP GIF Encoder/Decoder

6025.4M14](/packages/intervention-gif)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)