commonmark image media queries

Consultas de medios de imagen de CommonMark

Esta extensión de CommonMark le permite agregar consultas de medios a las imágenes en su Markdown renderizado de CommonMark.

Instalación

Puede instalar esta extensión a través del compositor:

composer require sven/commonmark-image-media-queries

Uso

Para habilitar esta extensión, primero asegúrese de que la extensión Attributes que envíe con Commonmark esté habilitado. Luego, agrégalo al entorno CommonMark:

 use Sven  CommonMark  ImageMediaQueries  ImageMediaQueriesExtension ;

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

Ahora puede agregar el atributo media a sus imágenes:

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

Esto hará el siguiente 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

La última imagen directamente después de al menos otra imagen con un atributo media siempre se usará como "predeterminado" y, por lo tanto, se representará como la etiqueta <img /> en el elemento <picture> . Si esta última imagen tiene un atributo media en sí, ese atributo no será utilizado y será despojado.

Taquigrafía

Esta extensión también se envía y le permite escribir sus propias, abreviadas para consultas de medios a menudo utilizadas. Puede habilitar una taquigrafía al registrar la extensión con Commonmark:

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

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

$ environment -> addExtension ( $ extension );

Esquema de color

El SvenCommonMarkImageMediaQueriesShorthandsColorScheme Shorthand le permite usar {scheme=dark} en una imagen y se expande en (prefers-color-scheme: dark) ::

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

Esto hará el siguiente 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 > 

Ancho

El SvenCommonMarkImageMediaQueriesShorthandsWidth Shorthand te da los atributos minw y maxw para agregar a una imagen. El ejemplo de arriba se puede acortar a lo siguiente:

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

Por supuesto, esto también funciona igual con {maxw=[value]} .

Escribiendo el tuyo

Para escribir su propia taquigrafía, implementa la interfaz SvenCommonMarkImageMediaQueriesShorthandsShorthand y devuelva una serie de consultas repletas por su abreviatura del método mediaQueries . Cualquier instancia de {} en la consulta será reemplazado por el valor del 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: {}) ' ,
        ];
    }
}

Si luego agrega la taquigrafía a la extensión, puede usar atributos como {min-aspect=8/5} y {max-aspect=3/2} en las imágenes en su reducción.

Nota

Puede implementar la interfaz SvenCommonMarkImageMediaQueriesShorthandsConfigurationAwareShorthand en lugar de la interfaz de Shorthand regular si desea acceder al objeto de configuración CommonMark.

Configuración

Por defecto, esta extensión agrega la clase media-query-picture al elemento <picture> que hace. Puede cambiar esta clase en la configuración:

 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: Recuerde que el elemento <picture> no se puede diseñar, porque en realidad no se presenta en el navegador. Deberías diseñar el elemento <img> en su lugar. Consulte la página MDN para obtener más información.

Que contribuye

Todas las contribuciones (solicitudes de extracción, problemas y solicitudes de funciones) son bienvenidas. Sin embargo, asegúrese de leer primero. Consulte la página de contribuyentes para todos los contribuyentes.

Licencia

sven/commonmark-image-media-queries tiene licencia bajo la licencia MIT (MIT). Consulte el archivo de licencia para obtener más información.