Blazy

Module Drupal Illustration Voir sur Drupal.org
Nb téléchargements : 67145

Components

  • Blazy Filter
  • Code
  • Documentation
  • Enhancement
  • JavaScript
  • Lightbox Integration
  • Miscellaneous
  • Regression
  • User interface

Images


Licence

http://www.gnu.org/licenses/old-licenses/gpl-2.0.html

permet de faire du Lazy Loading via la lib bLazy

Release

Status : Published
Projects : Modules
Maintenance status : Minimally maintained
Development status : Under active development
Supported Branches : 3.0., 8.x-2.
shield Stable releases for this project are covered by the security advisory policy.



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.

Introducing newborns

Requirements

  • 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

Installation

Manual:

Install the module as usual:

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

  • 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+)

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.

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

Enhancements

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

Optional Features

  • Views fields:
    File ER and Media integration, see Slick Browser. Suitable for huge galleries with lightboxes, or multimedia switcher.
  • Views style plugin Blazy Grid:
    CSS3 Masonry and Block Grid Foundation, Native Grid.
  • Deprecated at 2.x for core Media:
    Blazy Video, Blazy Image with VEM via Video Embed Media.

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.

For better admin help page, either way will do:

  • Markdown
  • composer require league/commonmark

Troubleshootings

Upgrading from 1.x to 2.x or 3+

Upgrading from 1.x is not supported, yet.

Should you need to upgrade, to minimize issues, do it one at a time, sequential, not parallel:

  1. Core Drupal
  2. Core Media (auto-installed, yet install it beforehand for safety)
  3. Media entity (ME)
  4. Video Embed Field (VEF)
  5. Blazy and sub-modules (must be parallel here and match branch numbers _if available: 2.x for 2.x, etc.)

Be sure you succeed on upgrading them before proceeding to Blazy!
Most reported issues are if you have ME and VEF. Both are optional integrations, the main reason for sequential upgrade, not Blazy's requirements.

If you don't have them, a matter of matching sub-module branches.

Sequential number is expected:
1.x -> 2.x (contains deprecated stuffs to avoid WSOD) -> 3+ (when available).
Jumping from 1.x to 3.x, bypassing 2.x, may likely cause WSOD due to added/ removed services, formatters, database updates, etc. which must be checked and performed in 2.x.

Preparations:

  • Prepare for the worst! Backup aka restore point.
  • Inspirations: happy or sad
  • Change records: Twig, CSS and custom Breakpoints for core Responsive image. Deprecated stuffs, including formatters, are intact at 2.x to avoid WSOD till you have time to change them-- gone at 3.x, though.

Execution:

  • drush updb and drush cr for each sequence. Or see update SOP. _If CLI drush updb failed, as a few reported, try Drupal UI. At best, drush cr, hardly failed.
  • Only if any issues, re-visit Blazy, Field or Views UI for new options, and re-save them as needed.
  • Common error causes:
    Mostly due to added/ removed services not being recognized.
    • Failing to clear cache.
    • Parallel upgrade. On the contrary, Blazy and sub-modules require parallel one.
    • Mismatched Blazy sub-module branches.
  • It should (hopefully) be as easy as upgrading Drupal. Best wishes!

Upgrading from 2.x or 3+

Only if you were still using VEF and stuck for a reason. Steps:

  • Replace Blazy Video (deprecated) formatter with BVEF at Field or Views UI before upgrading to 3.x.
  • Proceed with upgrade steps as outlined above, excluding Media (Entity) and VEF.

Failing to clear cache and mismatched branches are the most potential errors here on.
Potential oversight for manual FTP upgrade. For Composer, it is smart and helpful with suggestions before proceeding to not trespass/ mismatch branches.

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

Update SOP

Read update SOP whenever updating Blazy and its related modules.

Submitting issues or patches

Please check this out before submitting issues, or patches.



Toutes les informations proviennent du site drupal.org