PHPackages                             ammardev/commonmark-image-tools - 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. ammardev/commonmark-image-tools

ActiveLibrary[Image & Media](/categories/media)

ammardev/commonmark-image-tools
===============================

Enhancements for image markdown rendering with league/commonmark

v0.1.0-beta(3y ago)08MITPHPPHP ^7.4|^8.0

Since Oct 23Pushed 3y ago1 watchersCompare

[ Source](https://github.com/ammardev/commonmark-image-tools)[ Packagist](https://packagist.org/packages/ammardev/commonmark-image-tools)[ Docs](https://github.com/ammardev/commonmark-image-tools)[ RSS](/packages/ammardev-commonmark-image-tools/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (1)Dependencies (2)Versions (2)Used By (0)

CommonMark Image Tools
======================

[](#commonmark-image-tools)

> **Warning**
>
> \[WIP\] Public APIs of this package may have breaking changes.

An extension for [league/commonmark](https://commonmark.thephpleague.com) package which adds additional useful tools for displaying images.

Features
--------

[](#features)

- Modifying the `src` path easily.
- Add `width` and `height` attributes automatically to the `img` element to avoid layout shifts.

Installation
------------

[](#installation)

```
composer require ammardev/commonmark-image-tools
```

Usage
-----

[](#usage)

You can use the extension directly like this:

```
$environment = new Environment();

$environment->addExtension(new Ammardev\CommonMarkImageTools\ImageToolsExtension());
```

In this case. The extension will use the provided image link to get the width and height of the image and add them as attributes. No modification will be made to the `src` in this case.

You can modify the public path (The path to be used in the `src` attribute). And you can modify the storage path (The path we will use to get the image from the storage and get width and height info) by implementing `Ammardev\CommonMarkImageTools\ImagePathManagerContract` interface.

```