zz
/
v1
forked from a64f7bb4-7358-4778-9fbe-3b882c34cc1d/v1
2
0
Fork 0
Code Pull Requests Activity
v1/web/modules/contrib/blazy/docs
History
Gdilove 927f32325b 初始化 2023-11-13 20:36:13 +08:00
..
ASPECT_RATIO.md 初始化 2023-11-13 20:36:13 +08:00
CHANGES.md 初始化 2023-11-13 20:36:13 +08:00
COMPOSER.md 初始化 2023-11-13 20:36:13 +08:00
CONTRIBUTION.md 初始化 2023-11-13 20:36:13 +08:00
FAQ.md 初始化 2023-11-13 20:36:13 +08:00
ISSUE_TEMPLATE.md 初始化 2023-11-13 20:36:13 +08:00
README.md 初始化 2023-11-13 20:36:13 +08:00
ROADMAP.md 初始化 2023-11-13 20:36:13 +08:00
TROUBLESHOOTING.md 初始化 2023-11-13 20:36:13 +08:00
UPDATING.md 初始化 2023-11-13 20:36:13 +08:00

README.md

CONTENTS OF THIS FILE

INTRODUCTION

Provides integration with bLazy and or Intersection Observer API, or browser native lazy loading to lazy load and multi-serve images to save bandwidth and server requests. The user will have faster load times and save data usage if they don't browse the whole page.

Check out project home for most updated info.

REQUIREMENTS

Core modules:

  1. Media
  2. Filter

Applicable for Blazy module <= 2.5:

The bLazy library is forked at Blazy 2.6, and no longer required from now on, see #3257511. Any references to bLazy library is no longer relevant for forked version at 2.6.

  • Download bLazy

  • Extract it as is, rename blazy-master to blazy, so the assets are:

    • /libraries/blazy/blazy.js
    • /libraries/blazy/blazy.min.js

RECOMMENDED MODULES

For better admin help page, either way will do:

  • Markdown
  • composer require league/commonmark

To make reading this README a breeze at Blazy help

MODULES THAT INTEGRATE WITH OR REQUIRE BLAZY

Most duplication efforts from the above modules will be merged into \Drupal\blazy\Dejavu, or anywhere else namespace.

What dups?

The most obvious is the removal of formatters from Intense, Zooming, Slick Lightbox, Blazy PhotoSwipe, and other (quasi-)lightboxes. Any lightbox supported by Blazy can use Blazy, or Slick formatters if applicable instead. We do not have separate formatters when its prime functionality is embedding a lightbox, or superceded by Blazy.

Blazy provides a versatile and reusable formatter for a few known lightboxes with extra advantages:

lazyloading, grid, multi-serving images, Responsive image, CSS background, captioning, etc.

Including making those lightboxes available for free at Views Field for File entity, Media and Blazy Filter for inline images.

If you are developing lightboxes and using Blazy, I would humbly invite you to give Blazy a try, and consider joining forces with Blazy, and help improve it for the above-mentioned advantages. We are also continuously improving and solidifying the API to make advanced usages a lot easier, and DX friendly. Currently, of course, not perfect, but have been proven to play nice with at least 7 lightboxes, and likely more.

SIMILAR MODULES

Lazyloader

INSTALLATION

  1. MANUAL:

    Install the module as usual, more info can be found on:

    Installing Drupal 8 Modules

  2. COMPOSER:

    See Composer section below for details.

CONFIGURATION

Visit the following to configure and make use of Blazy:

  1. /admin/config/media/blazy

    Enable Blazy UI sub-module first, otherwise regular Access denied. Contains few global options, including enabling support to bring core Responsive image into blazy-related formatters. Blazy UI can be uninstalled at production later without problems.

  2. Visit any entity types:

  • /admin/structure/types
  • /admin/structure/block/block-content/types
  • /admin/structure/paragraphs_type
  • etc.

Use Blazy as a formatter under Manage display for the supported fields: Image, Media, Entity reference, or even Text.

  1. /admin/structure/views

    Use Blazy Grid as standalone blocks, or pages.

USAGES: BLAZY FOR MULTIMEDIA GALLERY VIA VIEWS UI

Using Blazy Grid

  1. Add a Views style Blazy Grid for entities containing Media or Image.
  2. Add a Blazy formatter for the Media or Image field.
  3. Add any lightbox under Media switcher option.
  4. Limit the values to 1 under Multiple field settings > Display.

Without Blazy Grid

If you can't use Blazy Grid for a reason, maybe having a table, HTML list, etc., try the following:

  1. Add a CSS class under Advanced > CSS class for any reasonable supported/ supportive lightbox in the format blazy--LIGHTBOX-gallery, e.g.:
  • blazy--colorbox-gallery
  • blazy--intense-gallery
  • blazy--mfp-gallery (Magnific Popup)
  • blazy--photobox-gallery
  • blazy--photoswipe-gallery
  • blazy--slick-lightbox-gallery
  • blazy--splidebox-gallery
  • blazy--zooming-gallery

Note the double dashes BEM modifier "--", just to make sure we are on the same page that you are intentionally creating a blazy LIGHTBOX gallery. The View container will then have the following attributes:

class="blazy blazy--LIGHTBOX-gallery ..." data-blazy data-LIGHTBOX-gallery

  1. Add a Blazy formatter for the Media or Image field.
  2. Add the relevant lightbox under Media switcher option based on the given CSS class at #1.

Important!

Be sure to leave Use field template under Style settings unchecked. If checked, the gallery is locked to a single entity, that is no Views gallery, but gallery per field. The same applies when using Blazy formatter with VIS pager, alike, or inside Slick Carousel, GridStack, etc. If confusing, just toggle this option, and you'll know which works. Only checked if Blazy formatter is a standalone output from Views so to use field template in this case.

Check out the relevant sub-module docs for details.

LIGHTBOXES

All lightbox integrations are optional. Meaning if the relevant modules and or libraries are not present, nothing will show up under Media switch option.

Clear cache if they do not appear as options due to being permanently cached.

Most lightboxes, not all, supports (responsive) image, (local|remote) video. Known lightboxes which has supports for Responsive image: Colorbox, Magnific popup, Slick Lightbox, Splidebox, Blazy PhotoSwipe. Magnific Popup/ Splidebox also supports picture. Splidebox also supports AJAX contents. Others might not.

Lightbox requirements

  • Colorbox, PhotoSwipe, etc. requires both modules and their libraries present.
  • Photobox, Magnific Popup, requires only libraries to be present:
    • /libraries/photobox/photobox/jquery.photobox.js
    • /libraries/magnific-popup/dist/jquery.magnific-popup.min.js
      The reason for no modules are being required because no special settings, nor re-usable options to bother provided by them. Aside from the fact, Blazy has its own loader aka initializer for advanced features like multimedia (remote |local video), or (responsive|picture) image, fieldable captions, etc. which are not (fully) shipped/ supported by these modules.

FEATURES

  • Works absurdly fine at IE9 for Blazy 2.6.
  • Works without JavaScript within/without JavaScript browsers.
  • Works with AMP, or static/ archived sites, e.g.: Tome, HTTrack, etc.
  • Supports modern Native lazyload since incubation before Firefox or core had it, or old data-[src|srcset] since eons. Must be noted very clearly due to some thought Blazy was retarded from core.
  • Supports Image, Responsive image, (local|remote|iframe) videos, DIV either inline, fields, views, or within lightboxes.
  • Lightboxes: Colorbox, Magnific Popup, Splidebox, PhotoSwipe, etc. with multimedia lightboxes.
  • Multi-serving lazyloaded images, including multi-breakpoint CSS backgrounds.
  • Field formatters: Blazy with Media integration.
  • Blazy Grid formatter for Image, Media and Text with multi-value: CSS3 Columns, Grid Foundation, Flexbox, Native Grid.
  • Supports inline galleries, and grid or CSS3 Masonry via Blazy Filter. Enable Blazy Filter at /admin/config/content/formats.
  • Simple shortcodes for inline galleries, check out /filter/tips.
  • Delay loading for below-fold images until 100px (configurable) before they are visible at viewport.
  • A simple effortless CSS loading indicator.
  • It doesn't take over all images, so it can be enabled as needed via Blazy formatter, or its supporting modules.

OPTIONAL FEATURES

  • Views fields for File Entity and Media integration, see Slick Browser.
  • Views style plugin Blazy Grid for CSS3 Columns, Grid Foundation, Flexbox, and Native Grid.

MAINTAINERS/CREDITS

READ MORE

See the project page on drupal.org:

See the bLazy docs at: