Download the PHP package sven/commonmark-image-media-queries without Composer
On this page you can find all versions of the php package sven/commonmark-image-media-queries. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package commonmark-image-media-queries
CommonMark Image Media Queries
This CommonMark extension allows you to add media queries to images in your CommonMark-rendered Markdown.
Installation
You can install this extension via Composer:
Usage
To enable this extension, first make sure the Attributes extension
that ships with CommonMark is enabled. Then, add it to the CommonMark environment:
You can now add the media attribute to your images:
This will render the following HTML:
[!IMPORTANT] The last image directly after at least one other image with a
mediaattribute will always be used as the "default", and will thus be rendered as the<img />tag in the<picture>element. If this last image has amediaattribute itself, that attribute will not be used and be stripped away.
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:
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):
This will render the following HTML:
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:
This of course also works the same with {maxw=[value]}.
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.
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\ConfigurationAwareShorthandinterface instead of the regularShorthandinterface if you would like access to the CommonMark configuration object.
Configuration
By default, this extension adds the media-query-picture class to the <picture> element it renders. You can change
this class in the configuration:
Note: Remember that the
<picture>element cannot be styled, because it is not actually rendered in the browser. You should style the<img>element instead. See the MDN page for more information.
Contributing
All contributions (pull requests, issues and feature requests) are welcome. Make sure to read through the contributors page for all contributors.
License
sven/commonmark-image-media-queries is licensed under the MIT License (MIT). Please see the license file
for more information.
All versions of commonmark-image-media-queries with dependencies
league/commonmark Version ^2.3
league/config Version ^1.2
nette/schema Version ^1.2