PHPackages wearebase/web-images - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Image & Media](/categories/media) 4. / 5. wearebase/web-images AbandonedArchivedLibrary[Image & Media](/categories/media) wearebase/web-images ==================== Lazy and Retina Images in Twig/Timber projects 3.0(9y ago)2703MITHTML Since Nov 24Pushed 9y ago3 watchersCompare [ Source](https://github.com/wearebase/web-images)[ Packagist](https://packagist.org/packages/wearebase/web-images)[ RSS](/packages/wearebase-web-images/feed)WikiDiscussions master Synced 3w ago READMEChangelog (1)Dependencies (1)Versions (17)Used By (0) Requirements ============ [](#requirements) - [Timber for Wordpress](https://github.com/jarednova/timber) or other Twig project - Sass (SCSS) Install ======= [](#install) `composer require wearebase/web-images` Configure where you want the package to go ========================================== [](#configure-where-you-want-the-package-to-go) If you want to install somewhere other than `vendor`, in your `composer.json` add the following: ``` "extra": { "installer-paths": { "wp-content/themes/timber/packages/{$name}": ["wearebase/web-images"] } } ``` What's included =============== [](#whats-included) - [blazy](http://dinbror.dk/blog/blazy/), created by Bjørn Klinggaard with an MIT License. - [Docs here](http://dinbror.dk/blog/blazy/). - (These files are held in this repo for simplicity as bLazy is not available on Composer and pulling it from npm or Bower is an added dependency.) - I have also included a copy of the documentation as it is held on a private website which may be unavailable. - lazyLoad markup and scss to allow for full size backgrounds, images, and TimberImages - background-size.min.htc to allow for backwards compatibility of `background-size: cover;` Usage ===== [](#usage) Enabling Views -------------- [](#enabling-views) First of all, you must add the views folder to your Twig template load path. If you're not using Timber, then simply use `lazyImages.twig` as a universal Twig file. ### Timber [](#timber) [Add the loadpath to your `functions.php`](https://github.com/jarednova/timber/wiki/Configure-template-locations#changing-the-default-folder-for-twig-files). You must re-add the default Theme view folder in here too as it may override the Timber view folder. If you're using Timber, then use `timberImages.twig`. ### Enabling Macros [](#enabling-macros) In your layout file, or in individual macros or components: `{% import 'lazyImages.twig' as base_image %}` or if you're using Timber, `{% import 'timberImages.twig' as base_image %}` Enabling Sass ------------- [](#enabling-sass) - Add the Sass to your build path. If you're using Compass, add this to your config.rb: ``` add_import_path "vendor/wearebase/web-images/scss" ``` - `@import "autoload"`. to get everything you need. - In your project variables, you can optionally add the following to override default values: - `$base-lazy-transition-speed` (500ms) Enabling JS ----------- [](#enabling-js) - Add the JS file(s) to your page. Enabling background-size. ------------------------- [](#enabling-background-size) Background-size is now disabled by default. To use this, drop the `background-size.min.htc` file to your webroot. You'll also need to add CSS rules to your background images in your own code to use it. A reference to a htc file *must* be absolute. LazyLoading ----------- [](#lazyloading) - Activate bLazy with `var bLazy = new Blazy();` on your page. Trigger it inside `$(window).load()` for the best results. - Revalidate bLazy (on a resize, for example) with `bLazy.revalidate();`. - Use `b-lazy` as a class on any div or img with a `data-src` to lazyLoad it. Preferably use the macros included in this package to enable the following: - Lazy images, with optional support for retina - Lazy TimberImages, with optional support for retina - Lazy background, with optional support for retina - All of the included functions supply a `` version for non-JS users. ### Macros [](#macros) #### {{ base\_image.lazy(images, alt, classes, width, height) }} [](#-base_imagelazyimages-alt-classes-width-height-) Bog standard lazy img. Give it the following vars: - Array of 1x and 2x image URLs, OR a string of 1x image - Alt: String to be used as the alt tag, optional (if empty, uses an empty alt tag, which [forces Screen Readers to not read the image at all](http://osric.com/chris/accidental-developer/2012/01/when-should-alt-text-be-blank/)) - Classes: Any additional classes as a string to add to the image, optional - Width: Int, optional - Height: Int, optional *There is also a standard 'img' macro if you need to switch a lazy image to a normal image tag.* #### {{ base\_image.TimberImages(ids, alt, classes, sizes) }} [](#-base_imagetimberimagesids-alt-classes-sizes-) This is a preferable function if you know the ID of an image. This is great for most scenarios, but a specific scenario might be that you have a 'banner' image size set up for your Wordpress images. You can then request the Featured Image of a post in the size 'banner'. Or if you're feeling fancy, add a 'banner-2x' and request \['banner', 'banner-2x'\] to get a retina size of that banner. Pass this the following vars: - id of image (recommended) OR an array of ids for when you want to use a different 2x image (not recommended) - Alt: String to be used as the alt tag. Optional (if empty, uses the 'caption' of an image set in Wordpress) - Classes: Any additional classes to add to the image as a string. Optional - Sizes: string or array of string sizes. If empty, uses 'full'. Optional #### {{ base\_image.background(images, classes) }} [](#-base_imagebackgroundimages-classes-) - Use the included background macro to easily create a full size lazyloaded background. By default these will fade in, but you can disable that by adding `b-no-fade` class to backgrounds when triggering the macro. - A parent of a full size background **must be position:relative**, or use the `bg-parent` class. Pass this the following vars: - URL String of image to use as a background - Any additional classes you want to use, as a string ### Health Score 32 — LowBetter than 69% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity16 Limited adoption so far Community8 Small or concentrated contributor base Maturity71 Established project with proven stability Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~30 days Recently: every ~89 days Total 16 Last Release 3423d ago Major Versions 0.1.3 → 1.02015-12-04 1.2.1 → 2.02017-01-25 2.0 → 3.02017-02-13 ### Community Maintainers ![](https://www.gravatar.com/avatar/a450103bae0408522e011a167ba85c6f67ae325fe7ffcca894e86ab2487daccc?d=identicon)[wearebase](/maintainers/wearebase) --- Top Contributors [![jonginn](https://avatars.githubusercontent.com/u/1779310?v=4)](https://github.com/jonginn "jonginn (8 commits)") ### Embed Badge ![Health badge](/badges/wearebase-web-images/health.svg) ``` [![Health](https://phpackages.com/badges/wearebase-web-images/health.svg)](https://phpackages.com/packages/wearebase-web-images) ``` ### Alternatives [helsingborg-stad/municipio A bootstrap theme for creating municipality sites. 4028.3k10](/packages/helsingborg-stad-municipio)[mindkomm/timmy Advanced image manipulation for Timber. 17737.1k](/packages/mindkomm-timmy)[bueltge/multisite-global-media Multisite Global Media is a WordPress plugin which shares media across the Multisite network. 23131.8k](/packages/bueltge-multisite-global-media)[wp-media/imagify-plugin Image optimization plugin for WordPress by WP Media. 8065.3k](/packages/wp-media-imagify-plugin)[pressbooks/pressbooks-book This theme is named after Canadian media theorist Marshall McLuhan, who coined the phrase “the medium is the message.” It is designed for academic writing and is also suitable for fiction. Headings are set in Cormorant Garamond, and body type is set in Lora. 206.7k](/packages/pressbooks-pressbooks-book)[asgardcms/media-module Media module for AsgardCMS. Handles the media library. 1130.6k2](/packages/asgardcms-media-module) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)