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

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.

Tests

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.