PHPackages                             sven/commonmark-image-media-queries - 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. [Parsing & Serialization](/categories/parsing)
4. /
5. sven/commonmark-image-media-queries

ActiveLibrary[Parsing & Serialization](/categories/parsing)

sven/commonmark-image-media-queries
===================================

v1.0.1(2y ago)86291MITPHPPHP ^8.1CI passing

Since Jul 31Pushed 1mo ago1 watchersCompare

[ Source](https://github.com/svenluijten/commonmark-image-media-queries)[ Packagist](https://packagist.org/packages/sven/commonmark-image-media-queries)[ RSS](/packages/sven-commonmark-image-media-queries/feed)WikiDiscussions 1.x Synced 1mo ago

READMEChangelog (2)Dependencies (6)Versions (5)Used By (1)

CommonMark Image Media Queries
==============================

[](#commonmark-image-media-queries)

[![Latest Version on Packagist](https://camo.githubusercontent.com/0c7c3912993857f61e84aad0bd9a0ffa1b8ce820493762dfbcd1cf703b413e00/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f7376656e2f636f6d6d6f6e6d61726b2d696d6167652d6d656469612d717565726965732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/sven/commonmark-image-media-queries)[![Total Downloads](https://camo.githubusercontent.com/5dfcad5e723aabd028ba9417f473c6a17f7d5c23040c61a4f5f97f676d9701a8/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f7376656e2f636f6d6d6f6e6d61726b2d696d6167652d6d656469612d717565726965732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/sven/commonmark-image-media-queries/stats)[![Software License](https://camo.githubusercontent.com/6c711032aff1ca0eb6b211aa6cb3649ce7fd64a7714e1181d4bb457f9680e7cf/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d677265656e2e7376673f7374796c653d666c61742d737175617265)](LICENSE.md)[![Build Status](https://camo.githubusercontent.com/f70a4451ab1ffe58da1b8cb87aa9f96c5be63861e2d6035a6a4544881ae21d98/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f7376656e6c75696a74656e2f636f6d6d6f6e6d61726b2d696d6167652d6d656469612d717565726965732f72756e2d74657374732e796d6c3f6272616e63683d6d61696e267374796c653d666c61742d737175617265)](https://github.com/svenluijten/commonmark-image-media-queries/actions/workflows/run-tests.yml)[![StyleCI](https://camo.githubusercontent.com/34aa652647bf4a375ee8b299649fe25f6aa04262004c3c67745f159e1834b39a/68747470733a2f2f7374796c6563692e696f2f7265706f732f3637323237393235332f736869656c64)](https://styleci.io/repos/672279253)[![PhpStan](https://camo.githubusercontent.com/b6026159c3b8dd3b35b995a5748bf76ec7f748fcc0820245202177733b5a9a30/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7068707374616e2d656e61626c65642d626c75652e7376673f7374796c653d666c61742d737175617265)](https://github.com/phpstan/phpstan)

This [CommonMark](https://commonmark.thephpleague.com) extension allows you to add media queries to images in your CommonMark-rendered Markdown.

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

[](#installation)

You can install this extension [via Composer](http://getcomposer.org):

```
composer require sven/commonmark-image-media-queries
```

Usage
-----

[](#usage)

To enable this extension, first make sure [the `Attributes` extension](https://commonmark.thephpleague.com/2.4/extensions/attributes/)that ships with CommonMark is enabled. Then, add it to the CommonMark environment:

```
use Sven\CommonMark\ImageMediaQueries\ImageMediaQueriesExtension;

$environment->addExtension(new ImageMediaQueriesExtension());
```

You can now add the `media` attribute to your images:

```
![from 800px wide](/assets/800.jpg){media="(min-width: 800px)"}
![from 1200px wide](/assets/1200.jpg){media="(min-width: 1200px)"}
![An image](/assets/default.jpg)
```

This will render the following HTML:

```

```

Important

The *last* image directly after at least one other image with a `media` attribute will always be used as the "default", and will thus be rendered as the `` tag in the `` element. If this last image has a `media`attribute itself, that attribute will not be used and be stripped away.

### Shorthands

[](#shorthands)

This extension also ships with, and allows you to write your own, shorthands for often-used media queries. You can enable a shorthand while registering the extension with CommonMark:

```
use Sven\CommonMark\ImageMediaQueries\ImageMediaQueriesExtension;
use Sven\CommonMark\ImageMediaQueries\Shorthands\ColorScheme;

$extension = new ImageMediaQueriesExtension();
$extension->addShorthand(new ColorScheme());

$environment->addExtension($extension);
```

#### Color Scheme

[](#color-scheme)

The `\Sven\CommonMark\ImageMediaQueries\Shorthands\ColorScheme` shorthand allows you to use `{scheme=dark}` on an image, and expands into `(prefers-color-scheme: dark)`:

```
![dark](/assets/dark-settings.jpg){scheme=dark}
![A settings dialog](/assets/settings.jpg)
```

This will render the following HTML:

```

```

#### Width

[](#width)

The `\Sven\CommonMark\ImageMediaQueries\Shorthands\Width` shorthand gives you the `minw` and `maxw` attributes to add to an image. The example from above can then be shortened to the following:

```
![from 800px wide](/assets/800.jpg){minw=800px}
![from 1200px wide](/assets/1200.jpg){minw=1200px}
![An image](/assets/default.jpg)
```

This of course also works the same with `{maxw=[value]}`.

#### Writing your own

[](#writing-your-own)

To write your own shorthand, implement the `\Sven\CommonMark\ImageMediaQueries\Shorthands\Shorthand` interface and return an array of queries keyed by their shorthand from the `mediaQueries` method. Any instances of `{}` in the query will be replaced by the value of the HTML attribute.

```
use Sven\CommonMark\ImageMediaQueries\Shorthands\Shorthand;

final class AspectRatio implements Shorthand
{
    public function mediaQueries(): iterable
    {
        return [
            'min-aspect' => '(min-aspect-ratio: {})',
            'max-aspect' => '(max-aspect-ratio: {})',
        ];
    }
}
```

If you then add the shorthand to the extension, you can use attributes like `{min-aspect=8/5}` and `{max-aspect=3/2}` on images in your Markdown.

Note

You can implement the `\Sven\CommonMark\ImageMediaQueries\Shorthands\ConfigurationAwareShorthand` interface *instead*of the regular `Shorthand` interface if you would like access to the CommonMark configuration object.

Configuration
-------------

[](#configuration)

By default, this extension adds the `media-query-picture` class to the `` element it renders. You can change this class in the configuration:

```
use League\CommonMark\Environment\Environment;
use Sven\CommonMark\ImageMediaQueries\ImageMediaQueriesExtension;

$environment = new Environment([
    'image_media_queries' => [
        'picture_class' => 'your-class', // Default: 'media-query-picture'.
    ],
]);

$environment->addExtension(new ImageMediaQueriesExtension());
```

> **Note:** Remember that the `` element cannot be styled, because it is not actually rendered in the browser. You should style the `` element instead. See [the MDN page](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture)for more information.

Contributing
------------

[](#contributing)

All contributions (pull requests, issues and feature requests) are welcome. Make sure to read through the [CONTRIBUTING.md](CONTRIBUTING.md) first, though. See the [contributors page](../../graphs/contributors) for all contributors.

License
-------

[](#license)

`sven/commonmark-image-media-queries` is licensed under the MIT License (MIT). Please see [the license file](LICENSE.md)for more information.

###  Health Score

39

—

LowBetter than 86% of packages

Maintenance60

Regular maintenance activity

Popularity19

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity55

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 54.2% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~486 days

Total

3

Last Release

42d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/6682e025b83b7a93b4d43c5c9b0b2245d790d72352758c47b81ba14858f45a8a?d=identicon)[svenluijten](/maintainers/svenluijten)

---

Top Contributors

[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (13 commits)")[![svenluijten](https://avatars.githubusercontent.com/u/11269635?v=4)](https://github.com/svenluijten "svenluijten (11 commits)")

---

Tags

commonmarkcommonmark-extensionmarkdownphpphp-library

###  Code Quality

TestsPHPUnit

Static AnalysisPHPStan

Type Coverage Yes

### Embed Badge

![Health badge](/badges/sven-commonmark-image-media-queries/health.svg)

```
[![Health](https://phpackages.com/badges/sven-commonmark-image-media-queries/health.svg)](https://phpackages.com/packages/sven-commonmark-image-media-queries)
```

###  Alternatives

[league/commonmark

Highly-extensible PHP Markdown parser which fully supports the CommonMark spec and GitHub-Flavored Markdown (GFM)

2.9k404.0M702](/packages/league-commonmark)[spatie/laravel-markdown

A highly configurable markdown renderer and Blade component for Laravel

4053.4M35](/packages/spatie-laravel-markdown)[mnapoli/front-yaml

2895.6M45](/packages/mnapoli-front-yaml)[laravel-lang/publisher

Localization publisher for your Laravel application

2167.7M24](/packages/laravel-lang-publisher)[daux/daux.io

Documentation generator that uses a simple folder structure and Markdown files to create custom documentation on the fly

825191.0k1](/packages/daux-dauxio)[tempest/framework

The PHP framework that gets out of your way.

2.1k23.1k9](/packages/tempest-framework)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)