Download the PHP package nambu-ch/pimcore-image-loader without Composer
On this page you can find all versions of the php package nambu-ch/pimcore-image-loader. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download nambu-ch/pimcore-image-loader
More information about nambu-ch/pimcore-image-loader
Files in nambu-ch/pimcore-image-loader
Package pimcore-image-loader
Short Description Pimcore 10.x Load images depending on box size
License GPL-3.0+
Homepage https://github.com/nambu-ch/pimcore-image-loader
Informations about the package pimcore-image-loader
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 .
Install and Enable
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:
Usage
Load js file inside your layout.
There is now a version without the dependency of jquery at /bundles/imageloader/js/imageloader-vanilla.js
.
Example
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:
Configuration
Name | Type | Description |
---|---|---|
cache_buster.disabled |
boolean | It takes the modification date of the image asset to refresh cache if needed. (enabled by default) |
lazyloading |
boolean | lazyloading adds the loading="lazy" to the image tag. |
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. |
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. |
sizesOptions |
array | List of options e.g. ] |
altText |
string | Alt-Text of the image. |
setImageSize |
boolean | Set width and height attributes on img element. |
thumbnail |
string | Thumbnail-Name from Pimcore configuration. |
emptyImageThumbnail |
string or Asset\Image | Path to an Image or a Pimcore Asset\Image which is shown at start before imageloader determines the fitting thumbnail |
lazyLoad |
boolean | Enable lazy loading via IntersectionObserver (deprecated) |
disableCacheBuster |
boolean | Disable Cache Buster |
Advanced usage
Option can be used to switch from background image to img-tag, set to true and define . 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
.