Blazy

Nb téléchargements : 74618

Front Performance Front JS Image Content Display Fields JavaScript Utilities Media Mobile Performance and Scalability Theme Enhancements Third-party Integration Utility Site Structure Integrations Developer Tools

Release

Description

Provides integration with bLazy and or Intersection Observer API (IO), or 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.
A friend of mobile devices. Do not let images, especially iframes, kill mobile device traffics.

Requirements

• 3.x: PHP8+, core Media, and core Layout discovery for Blazy layout sub-module.
• 8.x-2.x: core Media.
• 8.x-1.x: core Image.
• 7.x: PHP 7.4+ since 1.4, core Image, libraries and one of autoloader modules, read more
• bLazy library library (>= v1.6.0):
  • Download bLazy from https://github.com/dinbror/blazy
  • Extract it as is, rename blazy-master to blazy, so the assets are at:
    /libraries/blazy/blazy.min.js
    /libraries/blazy/blazy.js
    Ensures both files are present due to branch changes.

  Since 8.x-2.6, it is no longer required. Instead included as a forked fallback to play nice between Native lazy, IO and old approaches, read more.

Versions

• 3.x: D9.4 - D11+.
• 8.x-2.x+: D8.8 - D10, archived. A transition from ME/ VEF to core Media.
• 8.x-1.x, dead as per VEF deprecation notice.
• 7.x requires a proper installation, see Installation. It supports optional contrib Media and Views. Has Intersection Observer API.

Installation

Manual:

Install the module as usual:

• Blazy 7.x installation with autoloader.
  Drupal 7
• Drupal 8

Composer:

Check out here.

Features

• Works absurdly fine at IE9 for Blazy 2.6+.
• Works without JavaScript within/without JavaScript browsers aka decoupled lazyload scripts since 2.6.
• Works at AMP pages. Or static/ archived sites ala Tome, HTTrack, etc.
• Supports modern Native lazyload since incubation before Firefox or core had it, or old data-[src|srcset] since eons.
• Core Media with oEmbed, Image, Responsive image. Works with <img> and <picture> elements.
• CSS background lazyloading.
• (Responsive|picture|plain) image, (remote|local) video within lightboxes (2.3+): builtin Flybox aka non-disruptive lightbox aka picture in picture window (2.17+), Magnific Popup, Colorbox, PhotoSwipe, Splidebox, etc. Be sure to read more.
• A simple effortless CSS loading indicator.
• Simple builtin shortcodes for inline galleries, hardcoded or entity-embed like, read more at /filter/tips.
• It doesn't take over all images, so it can be enabled as needed via Blazy formatters, or its supporting modules.

Additional features

• Blazy dynamic layout sub-module for Layout Builder since 3.0.1.
• Supports SVG since 2.17.
• Supports inline images and iframes with lightboxes via Blazy Filter. (8.x-2.x and 7.x only)
• CSS3 masonry, Grid Foundation, Flexbox, Native Grid for Views, fields, texts, Blazy Filter (8.x-2.5+). Also available as configurable layouts for Layout Builder since 3.0.1.

Usages

Enable Blazy UI which can be uninstalled at production later. Go to /admin/config/media/blazy to manage few global options.

Blazy as field formatters

• Go to Manage display page, e.g.:
  /admin/structure/types/manage/page/display
• Find Blazy formatter under Manage display.

Blazy Filter as HTML filter (8.x-2.x and 7.x only)

• Visit /admin/config/content/formats/full_html, etc.
• Enable Blazy Filter.

Blazy Grid as Views style

• Visit /admin/structure/views.
• Add a new Blazy Grid under Format.

Blazy Layout for Layout Builder

• Enable the included Blazy Layout sub-module at /admin/modules.
• Visit any Layout Builder pages, normally at content entities like Content type Manage display pages for defaults, or /node/123/layout for its derivatives.
• Add a Blazy dynamic layout when adding a section. Configure the amount of regions, a layout engine, and a few more options.

Programmatically:
Check out blazy.api.php for details.

Enhancements

Blazy works with fields, and Views, and supports a few enhancements.

How much can Blazy help performance?

This may vary, just a quick illustration on Blazy performance. On private benchmarks, Blazy saves a page with lots of images from 14MB to 3MB (A few jumbo slideshow images + tons of thumbnail previews), 200 http requests to 20, loading time 30s to 3s. Elevating performance grade from F/E to A/B via gtmetrix. Overall ~5-10x better. Combining Blazy with other performance tools such as AdvAgg, etc. will obviously make optimum results with less efforts.

Recommended modules

For better admin help page with markdown, either way will do:

• composer require league/commonmark
• Markdown

Troubleshootings

• Check out troubleshooting.

Quick FAQS

• Q: Is Blazy deprecated by core lazy loading attribute?
  A: As of this writing, native lazyloading only supports image and iframe, not DIV nor local video, etc. Depreciation might happen if core superseded or covered 90% features (CSS background, aspect ratio, lightboxes, carousel, masonry grid, fullscreen video, graceful degradation for oldies, media player etc.). All cosmetics, and the little details that Blazy has to offer with contrib integrations, colorbox, carousel, svg, animate.css, etc. are less likely entering core. Even if media players, lightboxes and carousels were in core, there are still some added values that Blazy can offer and do with contribs. A DRY buster ala CTools, in the least. Shortly, nope. Check out #3172307: Compatible or being replaced with lazy load initiative?
• Q: What is the correlation between lazy loading and Blazy Grid for texts and Views fields/ contents? Texts don't lazy load.
  A: The focus is lazy loading as noted in the Features. Around lazy loading, we have requirements to make image/ media fields displayed in a grid such as lightbox galleries. Grid for Texts and Views are just bonuses thanks to re-usability. Grid is also the recommended alternative to carousels based on some A/B testings.
• Q: I don't use Media, why required?
  A: When you add a new plain old image says at /admin/structure/types/manage/page/fields/add-field, Drupal speaks authoritatively:
  Use Media reference fields for most files, images, audio, videos, and remote media. Use File or Image reference fields when creating your own media types, or for legacy files and images created before enabling the Media module. For more information, see the Media help page.
• Q: Why are many modules dependent on Blazy?
  A: Read more 5-year-old noble intentions here. Shortly, DRY.

Known issues/ limitations

• Blazy formatter embedded/ rewritten within Views UI Rewrite results has issues, check this and that out.
• Blazy 7.x installation with autoloader.

Submitting issues or patches

Please check this out before submitting issues, or patches.

Toutes les informations proviennent du site drupal.org