commonmark image media queries

Consultas de mídia de imagem comum

Essa extensão comum permite adicionar consultas de mídia às imagens em sua marcação de marca comum.

Instalação

Você pode instalar esta extensão via compositor:

composer require sven/commonmark-image-media-queries

Uso

Para ativar essa extensão, primeiro verifique se a extensão Attributes que os navios com a Commonmark estão ativados. Em seguida, adicione -o ao ambiente comum:

 use Sven  CommonMark  ImageMediaQueries  ImageMediaQueriesExtension ;

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

Agora você pode adicionar o atributo media às suas imagens:

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

Isso renderizará o seguinte 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 > 

Importante

A última imagem logo após pelo menos uma outra imagem com um atributo media será sempre usada como "padrão" e, portanto, será renderizada como a tag <img /> no elemento <picture> . Se essa última imagem tiver um atributo media , esse atributo não será usado e será retirado.

Taquigrafia

Essa extensão também é enviada e permite que você escreva suas próprias, abrevidas para consultas de mídia frequentemente usadas. Você pode ativar uma taquigrafia ao registrar a extensão na Commonmark:

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

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

$ environment -> addExtension ( $ extension );

Esquema de cores

O SvenCommonMarkImageMediaQueriesShorthandsColorScheme shorthand permite que você use {scheme=dark} em uma imagem e se expande (prefers-color-scheme: dark) :

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

Isso renderizará o seguinte 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 > 

Largura

O SvenCommonMarkImageMediaQueriesShorthandsWidth Shorthand fornece os atributos minw e maxw para adicionar a uma imagem. O exemplo de cima pode então ser reduzido para o seguinte:

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

É claro que isso também funciona da mesma forma com {maxw=[value]} .

Escrevendo o seu próprio

Para escrever sua própria abreviação, implemente a interface SvenCommonMarkImageMediaQueriesShorthandsShorthand e retorne uma matriz de consultas digitadas por sua abreviação do método mediaQueries . Quaisquer instâncias de {} na consulta serão substituídas pelo valor do atributo 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: {}) ' ,
        ];
    }
}

Se você adicionar a abreviação à extensão, poderá usar atributos como {min-aspect=8/5} e {max-aspect=3/2} nas imagens em sua marcação.

Observação

Você pode implementar a interface SvenCommonMarkImageMediaQueriesShorthandsConfigurationAwareShorthand em vez da interface Shorthand regular, se desejar acesso ao objeto de configuração Commonmark.

Configuração

Por padrão, essa extensão adiciona a classe de media-query-picture ao elemento <picture> que ela renderiza. Você pode alterar esta classe na configuração:

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

NOTA: Lembre -se de que o elemento <picture> não pode ser estilizado, porque na verdade não é renderizado no navegador. Você deve estilizar o elemento <img> . Consulte a página do MDN para obter mais informações.

Contribuindo

Todas as contribuições (solicitações de puxar, questões e solicitações de recursos) são bem -vindas. Certifique -se de ler o contribuindo.md primeiro, no entanto. Veja a página dos colaboradores para todos os colaboradores.

Licença

sven/commonmark-image-media-queries é licenciado sob a licença do MIT (MIT). Consulte o arquivo de licença para obter mais informações.