rankletter / commonmark-ext-seo-image
Adds support for explicit width and height as well as lazy loading to the league/commonmark markdown parser package
Installs: 8
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Watchers: 2
Forks: 0
Open Issues: 0
Type:commonmark-extension
Requires
- php: ^7.3 || ^8.0
- league/commonmark: ^1.0
Requires (Dev)
- phpunit/phpunit: ^9.0
This package is auto-updated.
Last update: 2024-10-26 20:21:15 UTC
README
🚧️ This extension is work in progress. Until 1.0 is release breaking changes might happen. Use with caution.
This image extension for league/commonmark adds:
- the lazy loading attribute as well as
- explicit
height
andwidth
attributes to keep the layout shifts to a minimum. This works for both absolute URLs and local images.
The package is largely based on simonvomeyser/commonmark-ext-lazy-image! It is licensed under the same MIT license.
Install
composer require rankletter/commonmark-ext-seo-image
Example
Assuming /path/to/image.jpg
points to an image with a size of 1024x512 pixels, the following example
use League\CommonMark\Environment; use RankLetter\CommonMarkImageExtension\SEOImageExtension; $this->environment = Environment::createCommonMarkEnvironment(); $this->environment->addExtension(new SEOImageExtension); $converter = new CommonMarkConverter([], $this->environment); $html = $converter->convertToHtml('![alt text](/path/to/image.jpg)');
This creates the following HTML
<img src="/path/to/image.jpg" alt="alt text" loading="lazy" width="1024" height="512" />
Further Options
Further options to replicate the lazy loading using JavaScript packages are supported. For more details please check the original package. This functionality will remain for now.