commonmark image media queriesダウンロード - commonmark image media queriesクエリソースコードダウンロード

commonmark image media queries

その他のカテゴリー

Version 1.0.1

ダウンロード

Commonmark Image Mediaクエリ

このCommonmark拡張機能を使用すると、Commonmarkレンダリングされたマークダウンの画像にメディアクエリを追加できます。

インストール

Composerを介してこの拡張機能をインストールできます。

composer require sven/commonmark-image-media-queries

使用法

この拡張機能を有効にするには、まず、Commonmarkに搭載されているAttributes拡張機能が有効になっていることを確認します。次に、Commonmark環境に追加します。

 use Sven  CommonMark  ImageMediaQueries  ImageMediaQueriesExtension ;

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

これで、 media属性を画像に追加できます。

 ![ 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 )

これにより、次のHTMLが表示されます。

 < picture class =" media-query-picture " >
    < source srcset =" /assets/800.jpg " media =" (min-width: 800px) " />
    < source srcset =" /assets/1200.jpg " media =" (min-width: 1200px) " />
    < img src =" /assets/default.jpg " alt =" An image " />
</ picture >

重要

media属性を持つ少なくとも1つの他の画像の直後の最後の画像は、常に「デフォルト」として使用されるため、 <picture>要素の<img />タグとしてレンダリングされます。この最後の画像にmedia属性自体がある場合、その属性は使用されず、剥奪されます。

速記

また、この拡張機能は、頻繁に使用されるメディアクエリのために、独自の速記を書くことができます。 CommonMarkに拡張機能を登録しながら、速記を有効にすることができます。

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

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

$ environment -> addExtension ( $ extension );

配色

SvenCommonMarkImageMediaQueriesShorthandsColorScheme shorthandを使用すると、画像で{scheme=dark}を使用し、 (prefers-color-scheme: dark)に拡張できます。

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

これにより、次のHTMLが表示されます。

 < picture class =" media-query-picture " >
    < source srcset =" /assets/dark-settings.jpg " media =" (prefers-color-scheme: dark) " />
    < img src =" /assets/settings.jpg " alt =" An image " />
</ picture >

幅

SvenCommonMarkImageMediaQueriesShorthandsWidth shorthandは、画像に追加するminwとmaxw属性を提供します。上記の例を次のように短縮できます。

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

もちろん、これは{maxw=[value]}でも同じように機能します。

あなた自身を書く

独自の速記を書くには、 SvenCommonMarkImageMediaQueriesShorthandsShorthand interfaceを実装し、 mediaQueries Methodの速記によってキー付きの一連のクエリを返します。クエリ内の{}のインスタンスは、HTML属性の値に置き換えられます。

 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: {}) ' ,
        ];
    }
}

その後、速記を拡張機能に追加すると、マークダウンの画像に{min-aspect=8/5}や{max-aspect=3/2}などの属性を使用できます。

注記

Commonmark構成オブジェクトにアクセスしたい場合は、通常のShorthand Interfaceの代わりにSvenCommonMarkImageMediaQueriesShorthandsConfigurationAwareShorthandインターフェイスを実装できます。

構成

デフォルトでは、この拡張機能はmedia-query-pictureクラスをレンダリングする<picture>要素に追加します。このクラスを構成で変更できます。

 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 ());