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