commonmark image media queries

Commonmark Image Media Запросы

Это расширение Commonmark позволяет добавлять медиа-запросы к изображениям в вашей общеобразованной уценке.

Установка

Вы можете установить это расширение через композитор:

composer require sven/commonmark-image-media-queries

Использование

Чтобы включить это расширение, сначала убедитесь, что расширение Attributes , которое поставляется с Commonmark, включено. Затем добавьте его в среду 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 всегда будет использоваться в качестве «по умолчанию» и, таким образом, будет отображаться как тег <img /> в элементе <picture> . Если у этого последнего изображения есть сам атрибут 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 и верните массив запросов, ключевых их сокращением из метода 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} на изображениях в вашей отметки.

Примечание

Вы можете реализовать интерфейс SvenCommonMarkImageMediaQueriesShorthandsConfigurationAwareShorthand вместо обычного интерфейса Shorthand , если вы хотите получить доступ к объекту Commonmark Configuration.

Конфигурация

По умолчанию это расширение добавляет класс 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 ());

Примечание. Помните, что элемент <picture> не может быть стилизован, потому что он на самом деле не отображается в браузере. Вместо этого вы должны стилизовать элемент <img> . Смотрите страницу MDN для получения дополнительной информации.

Внося

Все взносы (запросы на вытягивание, проблемы и запросы на функции) приветствуются. Обязательно прочитайте в первую очередь Appling.md. Смотрите страницу участников для всех участников.

Лицензия

sven/commonmark-image-media-queries лицензируется по лицензии MIT (MIT). Пожалуйста, смотрите файл лицензии для получения дополнительной информации.