{"id":15355066,"url":"https://github.com/adhocore/twig-yall","last_synced_at":"2025-04-15T06:17:43.813Z","repository":{"id":56940839,"uuid":"172214338","full_name":"adhocore/twig-yall","owner":"adhocore","description":"Resource lazy loader extension for twig using malchata/yall.js","archived":false,"fork":false,"pushed_at":"2022-09-26T15:44:40.000Z","size":49,"stargazers_count":12,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-15T06:17:36.439Z","etag":null,"topics":["adhocore","defer-loading","image-lazy-load","image-lazyload","lazy-load","lazy-loading","lazy-video","lazyload-images","lazyloading","twig-extension","twig-lazy-load","twig-lazy-loader"],"latest_commit_sha":null,"homepage":"https://github.com/adhocore/twig-yall","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adhocore.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"adhocore","custom":["https://paypal.me/ji10"]}},"created_at":"2019-02-23T12:55:09.000Z","updated_at":"2023-11-01T13:56:37.000Z","dependencies_parsed_at":"2022-08-21T02:10:18.986Z","dependency_job_id":null,"html_url":"https://github.com/adhocore/twig-yall","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adhocore%2Ftwig-yall","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adhocore%2Ftwig-yall/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adhocore%2Ftwig-yall/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adhocore%2Ftwig-yall/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adhocore","download_url":"https://codeload.github.com/adhocore/twig-yall/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249016647,"owners_count":21198833,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["adhocore","defer-loading","image-lazy-load","image-lazyload","lazy-load","lazy-loading","lazy-video","lazyload-images","lazyloading","twig-extension","twig-lazy-load","twig-lazy-loader"],"created_at":"2024-10-01T12:22:22.547Z","updated_at":"2025-04-15T06:17:43.797Z","avatar_url":"https://github.com/adhocore.png","language":"PHP","funding_links":["https://github.com/sponsors/adhocore","https://paypal.me/ji10"],"categories":[],"sub_categories":[],"readme":"## adhocore/twig-yall\n\nIt is a twig extension around [`malchata/yall.js`](https://github.com/malchata/yall.js)\nfor lazy loading `img`, `picture`, `video`, `iframe` etc.\n\n(Also supports `source` tag and `srcset` attribute).\n\n[![Latest Version](https://img.shields.io/github/release/adhocore/twig-yall.svg?style=flat-square)](https://github.com/adhocore/twig-yall/releases)\n[![Travis Build](https://img.shields.io/travis/com/adhocore/twig-yall.svg?branch=master\u0026style=flat-square)](https://travis-ci.com/adhocore/twig-yall?branch=master)\n[![Scrutinizer CI](https://img.shields.io/scrutinizer/g/adhocore/twig-yall.svg?style=flat-square)](https://scrutinizer-ci.com/g/adhocore/twig-yall/?branch=master)\n[![Codecov branch](https://img.shields.io/codecov/c/github/adhocore/twig-yall/master.svg?style=flat-square)](https://codecov.io/gh/adhocore/twig-yall)\n[![StyleCI](https://styleci.io/repos/172214338/shield)](https://styleci.io/repos/172214338)\n[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](./LICENSE)\n\nEager loading of images and videos not only makes webpage slow and clumsy but also consumes a lot of bandwidth.\n\nIf you use twig templating system for your view layer, this extension defers loading of resources so they are loaded only when required in viewport.\n\n## Installation\n```bash\ncomposer require adhocore/twig-yall\n```\n\n## Usage\n\nFirst setup twig to register this extension:\n```php\n// Use your loader of choice\n$twig = new Twig\\Environment(new Twig\\Loader\\ArrayLoader);\n\n// Register Yall with defaults\n$twig-\u003eaddExtension(new Ahc\\TwigYall\\Yall);\n\n// Configuring Yall instance:\n$twig-\u003eaddExtension(new Ahc\\TwigYall\\Yall(\n    'polyfillJs'  =\u003e '\u003ccustom url to polyfill\u003e',\n    'yallJs'      =\u003e '\u003ccustom url to yall.js\u003e',\n    'lazyClass'   =\u003e '\u003cdefault lazy class\u003e',\n    'placeholder' =\u003e '\u003cdefault placeholder image url\u003e',\n));\n```\n\nVoila, then in twig templates you would either use `{% lazyload %}` block to lazyload whole block at once\nOR individually lazyload each resources with `{{ lazify() }}`.\n\nIn both cases, you must call `{{ yallify() }}` somewhere at the footer.\n\n### lazyload\n\nWith `placeholder` config set to `'default.png'`, below template\n```twig\n\u003cimg src=\"apple.jpg\" /\u003e                   {# not lazyloaded #}\n{% lazyload %}\n\u003cimg src=\"ball.jpg\" /\u003e                    {# lazyloaded #}\n\u003cimg src=\"cat.jpg\" class=\"no-lazy\" /\u003e     {# not lazyloaded #}\n\u003cimg src=\"cat.jpg\" data-src=\"...\" /\u003e      {# not lazyloaded #}\n\u003cvideo poster=\"vid.jpg\"\u003e                  {# lazyloaded #}\n  \u003csource src=\"vid1.mp4\"\u003e                 {# lazyloaded #}\n  \u003csource src=\"vid2.mp4\"\u003e                 {# lazyloaded #}\n\u003c/video\u003e\n\u003cvideo class='no-lazy' src=\"...\"\u003e\u003c/video\u003e {# not lazyloaded #}\n\u003cpicture\u003e\u003csource src=\"pic.jpg\"\u003e\u003c/picture\u003e {# lazyloaded #}\n{% endlazyload %}\n\u003cimg src=\"...\"\u003e                           {# not lazyloaded #}\n```\nwill be rendered as:\n```html\n\u003cimg src=\"apple.jpg\" /\u003e\n\u003cimg class=\"lazy yall\" src=\"default.png\" data-src=\"ball.jpg\" /\u003e\n\u003cimg src=\"cat.jpg\" class=\"no-lazy\" /\u003e\n\u003cimg src=\"cat.jpg\" data-src=\"...\" /\u003e\n\u003cvideo class=\"lazy yall\" poster=\"default.png\" data-poster=\"vid.jpg\"\u003e\n  \u003csource class=\"lazy yall\" data-src=\"vid1.mp4\"\u003e\n  \u003csource class=\"lazy yall\" data-src=\"vid2.mp4\"\u003e\n\u003c/video\u003e\n\u003cvideo class='no-lazy' src=\"...\"\u003e\u003c/video\u003e\n\u003cpicture\u003e\u003csource class=\"lazy yall\" data-src=\"pic.jpg\"\u003e\u003c/picture\u003e\n\u003cimg src=\"...\"\u003e\n```\n\n### lazify\n\n#### only src\n```twig\n\u003cimg {{ lazify(\"/my/img.jpg\") }} /\u003e\n```\nwill be rendered as:\n```html\n\u003cimg class=\"lazy yall\" src=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAI=\" data-src=\"/my/img.jpg\" /\u003e\n```\n\nSee [stackoverflow](https://stackoverflow.com/a/15960901) for the usage of `data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAI=`.\n\n#### with class\n```twig\n\u003cimg {{ lazify(\"logo.png\", \"cls1 cls2\") }} /\u003e\n```\nwill be rendered as:\n```html\n\u003cimg class=\"cls1 cls2 lazy yall\" src=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAI=\" data-src=\"logo.png\" /\u003e\n```\n\n#### custom placeholder\n```twig\n\u003cimg {{ lazify(\"logo.png\", \"cls1 cls2\", \"/img/placeholder.png\") }} /\u003e\n```\nwill be rendered as:\n```html\n\u003cimg class=\"cls1 cls2 lazy yall\" src=\"/img/placeholder.png\" data-src=\"logo.png\" /\u003e\n```\n\n#### video poster\n```twig\n\u003cvideo {{ lazify({poster: \"video/poster.jpg\"}, \"video\", \"dummyposter.jpg\") }}\u003e\n```\nwill be rendered as:\n```html\n\u003cvideo class=\"video lazy yall\" poster=\"dummyposter.jpg\" data-poster=\"video/poster.jpg\"\u003e\n```\n\n#### source tag\n```twig\n\u003csource {{ lazify({srcset: \"img2x.jpg 2x, img1x.jpg 1x\"}) }}\u003e\n```\nwill be rendered as:\n```html\n\u003csource class=\"lazy yall\" data-srcset=\"img2x.jpg 2x, img1x.jpg 1x\"\u003e\n```\n\n#### src+srcset\n```twig\n\u003cimg {{ lazify([\"src.jpg\", \"src2x.jpg 2x\", \"src1x.jpg 1x\"], \"\", \"dummy.jpg\") }} /\u003e\n```\nwill be rendered as:\n```html\n\u003cimg class=\"lazy yall\" src=\"dummy.jpg\" data-src=\"src.jpg\" data-srcset=\"src2x.jpg 2x, src1x.jpg 1x\" /\u003e\n```\n\n### yallify\n\n**Important:** Do not forget to put the yall loader somewhere in the footer twig template:\n\n```twig\n{{ yallify() }}\n```\n\nWhich by default loads yall 3.1.7 with polyfills. You can set yall.js version, and turn off polyfill like so:\n```twig\n{{ yallify(\"3.1.6\", \"\") }} {# load yall v3.1.6 but not polyfill #}\n```\n\nYou can pass yall options in third param. For event callbacks wrap it in `\u003craw\u003e\u003c/raw\u003e`:\n```twig\n{{ yallify(null, null, {observeChanges: true, events: {load: \"\u003craw\u003efunction(){}\u003c/raw\u003e\"}}) }}\n```\nwill be rendered as:\n```html\n\u003cscript src=\"https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver\" async\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/yall-js@3.1.7/dist/yall.min.js\" async\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n  window.setTimeout(function () {\n    yall({\n      \"observeChanges\": true,\n      \"events\": {\n        \"load\": function(){}\n      },\n      \"lazyClass\": \"lazy\"\n    });\n  }, 99);\n});\n\u003c/script\u003e\n```\n\n**PS:**\nThe inputs sent to `lazify()` or `yallify()` are not validated by this library.\n\nFrom `malchata/yall.js`:\n\u003e Use appropriate width and height attributes, styles, and lightweight placeholders for your images.\n\n## Contributing\n\nPlease check [the guide](./CONTRIBUTING.md)\n\n## LICENSE\n\n\u003e \u0026copy; [MIT](./LICENSE) | 2019, Jitendra Adhikari\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadhocore%2Ftwig-yall","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadhocore%2Ftwig-yall","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadhocore%2Ftwig-yall/lists"}