commonmark image media queries

Commonmark Image Media -Abfragen

Mit dieser Commonmark-Erweiterung können Sie in Ihrem Commonmark-gerenderten Markdown Medienabfragen zu Bildern hinzufügen.

Installation

Sie können diese Erweiterung über den Komponisten installieren:

composer require sven/commonmark-image-media-queries

Verwendung

Um diese Erweiterung zu aktivieren, stellen Sie zunächst sicher, dass die Versand Attributes mit Commonmark aktiviert ist. Fügen Sie es dann in die Commonmark -Umgebung hinzu:

 use Sven  CommonMark  ImageMediaQueries  ImageMediaQueriesExtension ;

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

Sie können jetzt das media zu Ihren Bildern hinzufügen:

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

Dadurch wird die folgende 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 > 

Wichtig

Das letzte Bild direkt nach mindestens einem anderen Bild mit einem media wird immer als "Standard" verwendet und somit als <img /> -Tag im <picture> -Element gerendert. Wenn dieses letzte Bild ein media selbst hat, wird dieses Attribut nicht verwendet und entfernt.

Kurzschrift

Diese Erweiterung versendet auch mit und ermöglicht es Ihnen, Ihre eigenen, Kürzungen für häufig verwendete Medienanfragen zu schreiben. Sie können eine Abkürzung aktivieren, während Sie die Erweiterung mit Commonmark registrieren:

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

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

$ environment -> addExtension ( $ extension );

Farbschema

Mit dem SvenCommonMarkImageMediaQueriesShorthandsColorScheme Shorthand können Sie {scheme=dark} auf einem Bild verwenden und erweitert sich in (prefers-color-scheme: dark) :

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

Dadurch wird die folgende 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 > 

Breite

Die SvenCommonMarkImageMediaQueriesShorthandsWidth ShortHand gibt Ihnen die minw und maxw -Attribute, die Sie einem Bild hinzufügen können. Das Beispiel von oben kann dann auf Folgendes verkürzt werden:

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

Dies funktioniert natürlich auch mit {maxw=[value]} .

Schreibe deine eigenen

Um Ihre eigene Kurzform zu schreiben, implementieren Sie die Schnittstelle SvenCommonMarkImageMediaQueriesShorthandsShorthand und geben Sie ein Array von Abfragen zurück, die von der Medienmethode aus der Methode mediaQueries gekennzeichnet sind. Alle Instanzen von {} in der Abfrage werden durch den Wert des HTML -Attributs ersetzt.

 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: {}) ' ,
        ];
    }
}

Wenn Sie dann die Kurzschrift zur Erweiterung hinzufügen, können Sie Attribute wie {min-aspect=8/5} und {max-aspect=3/2} für Bilder in Ihrem Markdown verwenden.

Notiz

Sie können die Schnittstelle SvenCommonMarkImageMediaQueriesShorthandsConfigurationAwareShorthand anstelle der regelmäßigen Shorthand implementieren, wenn Sie den Zugriff auf das Commonmark -Konfigurationsobjekt wünschen.

Konfiguration

Standardmäßig fügt diese Erweiterung das von ihr rendere <picture> -Element, das sie rendert, die Klasse media-query-picture hinzu. Sie können diese Klasse in der Konfiguration ändern:

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

HINWEIS: Denken Sie daran, dass das <picture> -Element nicht gestylt werden kann, da es im Browser nicht tatsächlich gerendert wird. Sie sollten stattdessen das <img> Element stylen. Weitere Informationen finden Sie auf der MDN -Seite.

Beitragen

Alle Beiträge (Pull -Anfragen, Probleme und Feature -Anfragen) sind willkommen. Lesen Sie jedoch zuerst die beitragen.md durch. Weitere Informationen finden Sie auf der Seite der Mitwirkenden für alle Mitwirkenden.

Lizenz

sven/commonmark-image-media-queries sind nach der MIT-Lizenz (MIT) lizenziert. Weitere Informationen finden Sie in der Lizenzdatei.