README

Pimcore 10.x 插件，用于自动化网页内图片的压缩。

自动生成所有需要的缩略图，并根据周围 html 元素的宽度加载它们。默认将加载最小的图片。默认图片大小为 [320, 480, 768, 1024, 1280, 1920]。

安装和启用

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

依赖

此库需要 Bootstrap 和 jQuery 才能运行。

去除 Bootstrap

作为一个简单的解决方案，你可以添加以下 CSS 定义到你的自定义样式，这样你就不需要包含 Bootstrap

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

使用

在布局中加载 js 文件。

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

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

现在有一个不带 jQuery 依赖的版本，位于 /bundles/imageloader/js/imageloader-vanilla.js。

示例

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

强制 imageloader 重新计算

imageloader 会监听窗口大小调整事件，并自动加载最佳图片，但有时图片会出现并需要手动重新计算最佳图片大小，例如当手风琴打开时。结合 Bootstrap 事件，可以这样操作

$('.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');
});

缓存破坏者

默认情况下，CacheBuster 已对所有图片启用。它根据图像资产的修改日期来刷新缓存（如果需要）。可以通过 twig 函数中的选项来禁用 CacheBuster。要全局禁用 CacheBuster，可以使用以下 yml 配置。

image_loader:
  cache_buster:
    disabled: true

可用选项

以下选项可用

高级使用

imageCssClass 选项可用于从背景图片切换到 img 标签，将 isBackgroundImage 设置为 true 并定义 imageCssClass => 'd-block d-md-none'。如果是这样，img 标签将显示在小尺寸上，而背景从 md 分断点以上。

使用媒体查询与缩略图

如果设置了 thumbnail 选项并且配置中有媒体查询，则使用这些查询来加载图片。媒体查询仅使用其 px 值。因此，无论你是否设置了 min-width 或 max-width，它总是使用 px 作为 max-width。此选项可以与 isBackgroundImage、imageCssClass、sizeSelector 和 altText 一起使用。