commonmark image media queries下載 - commonmark image media queries源代碼下載

commonmark image media queries

其他類別

Version 1.0.1

下載

COONMARK圖像媒體查詢

此通用標記擴展程序使您可以在CommonMark渲染的降價中將媒體查詢添加到圖像中。

安裝

您可以通過作曲家安裝此擴展名：

composer require sven/commonmark-image-media-queries

用法

要啟用此擴展名，請首先確保啟用使用CONCORMARK寄發的Attributes擴展名。然後，將其添加到共同標記環境中：

 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屬性的其他圖像之後的最後一個圖像將始終用作“默認值”，因此將呈現為<picture>元素中的<img />標籤。如果最後一個圖像具有media屬性本身，則不會使用該屬性並將其剝離。

速記

此擴展還可以隨身攜帶，並允許您為經常使用的媒體查詢編寫速記。您可以在註冊CONCORMARK的擴展名時啟用速記：

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

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

$ environment -> addExtension ( $ extension );

配色方案

SvenCommonMarkImageMediaQueriesShorthandsColorScheme速記允許您在圖像上使用{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界面，並返回由mediaQueries方法鍵入其速記的一系列查詢。查詢中{}的任何實例將被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}之類的屬性，在您的標記中的圖像上。

筆記

如果您希望訪問Commarkmark配置對象，則可以實現SvenCommonMarkImageMediaQueriesShorthandsConfigurationAwareShorthand接口，而不是常規的Shorthand接口。

配置

默認情況下，此擴展名將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 ());