rankletter/commonmark-ext-seo-image

Adds support for explicit width and height as well as lazy loading to the league/commonmark markdown parser package

0.1.0 2021-05-26 06:39 UTC

Requires

• php: ^7.3 || ^8.0
• league/commonmark: ^1.0

Requires (Dev)

• phpunit/phpunit: ^9.0

MIT

• Peter Thaleikis
• Simon vom Eyser

• image
• markdown
• extension
• lazy
• commonmark
• explicit width and height

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 and width 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.