Blazy

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
* Splide.
* Splidebox.

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
* 3.x: D9 - D11.
* 8.x-2.x+: D8.8 - D10 at most, depends on core Media, with oEmbed. Has Intersection Observer API and Native lazy loading. This branch is a transition from VEF/ VEM to Media and may contain deprecated codes for BC purposes.
* 8.x-1.x has optional deprecated integration with VEF/ VEM.
* 7.x requires a proper installation, see Installation. It supports optional contrib Media and Views. Has Intersection Observer API.

Blazy 8.x-1.x no longer receives features, nor developed. Only critical or security issues will receive attentions. It is dead branch as per VEF deprecation notice.

Please use 2+ branch for new features, and D10 compat, and 3+ for D11+.

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. (8.x-2.x+ only)
* (Responsive|picture|plain) image, (remote|local) video within lightboxes (2.3+): Magnific Popup, Colorbox, PhotoSwipe, Splidebox, etc. Be sure to read more.
* Lazyloading core Image.
* Lazyloading core Responsive image. Works with <img> and <picture> elements.
* CSS background lazyloading as seen at Mason, GridStack, Outlayer, and Splide slider or Slick carousel.
* Delay loading for below-fold images until 100px (configurable) before they are visible at viewport.
* 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. Check "Support Responsive image" or "Picture" option as needed.

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.

Integration
* Ajaxin
* Intersection Observer
* GridStack
* Outlayer
* Mason
* Intense
* Blazy PhotoSwipe
* Slick
* Slick Lightbox
* Splide
* Splidebox
* Slick Browser
* Slick Views
* Jumper (Jump Anywhere)
* Zooming
* ElevateZoom Plus
* Blazy Video Embed Field

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.

Recommended modules For better admin help page, either way will do:


* Markdown
* composer require league/commonmark

Troubleshootings
* Check out troubleshooting.

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:


* Core Drupal
* Core Media (auto-installed, yet install it beforehand for safety)
* Media entity (ME)
* Video Embed Field (VEF)
* 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
* Blazy formatter embedded/ rewritten within Views UI Rewrite results has issues, check this and that out.
* Blazy 7.x installation with autoloader.

Read update SOP whenever updating Blazy and its related modules. Submitting issues or patches Please check this out before submitting issues, or patches.

Apologies! Releases 2.6 - 2.9+ were buggy due to this WIP: #3257511: Optimization pre Blazy 3. Please stick to 2.5 (with 2 non-major bugs) till further fixes and dev storms subsided.

If you are insistently using the latest, which is cautiously fine so we can have more testers and move forward faster, please make sure Blazy sub-modules are updated to their latest as well to avoid disruptions or errors due to potential oversights. Blazy has been moving forward very fast since 2.6 to have an initial 3.x for D11+ onward compatibility, it might forget to look back.

You have been warned very friendly and apologetically, in fact since 1.x here about the importance of matching branch, version or closest date releases.