commonmark image media queries

Requêtes de médias d'image CommonMark

Cette extension Commonmark vous permet d'ajouter des requêtes multimédias aux images dans votre marque de marque commune.

Installation

Vous pouvez installer cette extension via le compositeur:

composer require sven/commonmark-image-media-queries

Usage

Pour activer cette extension, assurez-vous d'abord que l'extension Attributes qui expédie avec Commonmark est activée. Ensuite, ajoutez-le à l'environnement commun:

 use Sven  CommonMark  ImageMediaQueries  ImageMediaQueriesExtension ;

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

Vous pouvez maintenant ajouter l'attribut media à vos images:

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

Cela rendra le HTML suivant:

 < 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 > 

Important

La dernière image directement après au moins une autre image avec un attribut media sera toujours utilisée comme "par défaut", et sera donc rendue comme la balise <img /> dans l'élément <picture> . Si cette dernière image a un attribut media lui-même, cet attribut ne sera pas utilisé et sera supprimé.

Sténographie

Cette extension est également expédiée et vous permet d'écrire votre propre sténographie pour des requêtes médiatiques souvent utilisées. Vous pouvez activer un sténographie lors de l'enregistrement de l'extension avec Commonmark:

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

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

$ environment -> addExtension ( $ extension );

Schéma de couleurs

Le SvenCommonMarkImageMediaQueriesShorthandsColorScheme Shorthand vous permet d'utiliser {scheme=dark} sur une image, et se développe dans (prefers-color-scheme: dark) :

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

Cela rendra le HTML suivant:

 < 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 > 

Largeur

Le raccourci SvenCommonMarkImageMediaQueriesShorthandsWidth vous donne les attributs minw et maxw à ajouter à une image. L'exemple d'en haut peut ensuite être raccourci à ce qui suit:

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

Bien sûr, cela fonctionne également de même avec {maxw=[value]} .

Écrire le vôtre

Pour écrire votre propre sténographie, implémentez l'interface SvenCommonMarkImageMediaQueriesShorthandsShorthand et renvoyez un tableau de requêtes classée par leur raccourci de la méthode mediaQueries . Toute instance de {} dans la requête sera remplacée par la valeur de l'attribut 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 vous ajoutez ensuite le raccourci à l'extension, vous pouvez utiliser des attributs comme {min-aspect=8/5} et {max-aspect=3/2} sur les images de votre marque.

Note

Vous pouvez implémenter la SvenCommonMarkImageMediaQueriesShorthandsConfigurationAwareShorthand Interface au lieu de l'interface Shorthand régulière si vous souhaitez accéder à l'objet de configuration Commonmark.

Configuration

Par défaut, cette extension ajoute la classe media-query-picture à l'élément <picture> qu'il rend. Vous pouvez modifier cette classe dans la configuration:

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

Remarque: N'oubliez pas que l'élément <picture> ne peut pas être stylé, car il n'est pas réellement rendu dans le navigateur. Vous devez plutôt styliser l'élément <img> . Voir la page MDN pour plus d'informations.

Contributif

Toutes les contributions (demandes de traction, problèmes et demandes de fonctionnalités) sont les bienvenues. Assurez-vous de lire d'abord le contribution.md. Voir la page des contributeurs pour tous les contributeurs.

Licence

sven/commonmark-image-media-queries est autorisé en vertu de la licence MIT (MIT). Veuillez consulter le fichier de licence pour plus d'informations.