commonmark image media queries

Commonmark Image Media Queries

Ekstensi Commonmark ini memungkinkan Anda untuk menambahkan kueri media ke gambar dalam penurunan harga yang diseret oleh Commonmark.

Instalasi

Anda dapat menginstal ekstensi ini melalui komposer:

composer require sven/commonmark-image-media-queries

Penggunaan

Untuk mengaktifkan ekstensi ini, pertama -tama pastikan ekstensi Attributes yang dikirimkan dengan Commonmark diaktifkan. Kemudian, tambahkan ke lingkungan Commonmark:

 use Sven  CommonMark  ImageMediaQueries  ImageMediaQueriesExtension ;

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

Anda sekarang dapat menambahkan atribut media ke gambar Anda:

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

Ini akan membuat HTML berikut:

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

Penting

Gambar terakhir secara langsung setelah setidaknya satu gambar lain dengan atribut media akan selalu digunakan sebagai "default", dan dengan demikian akan diterjemahkan sebagai tag <img /> dalam elemen <picture> . Jika gambar terakhir ini memiliki atribut media itu sendiri, atribut itu tidak akan digunakan dan dilucuti.

Steno

Perpanjangan ini juga dikirimkan dengan, dan memungkinkan Anda untuk menulis sendiri, steno untuk pertanyaan media yang sering digunakan. Anda dapat mengaktifkan steno saat mendaftarkan ekstensi dengan Commonmark:

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

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

$ environment -> addExtension ( $ extension );

Skema warna

SvenCommonMarkImageMediaQueriesShorthandsColorScheme shorthand memungkinkan Anda menggunakan {scheme=dark} pada gambar, dan mengembang menjadi (prefers-color-scheme: dark) :

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

Ini akan membuat HTML berikut:

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

Lebar

The SvenCommonMarkImageMediaQueriesShorthandsWidth Shorthand memberi Anda atribut minw dan maxw untuk ditambahkan ke gambar. Contoh dari atas kemudian dapat dipersingkat menjadi berikut:

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

Ini tentu saja juga berfungsi sama dengan {maxw=[value]} .

Menulis sendiri

Untuk menulis steno Anda sendiri, terapkan SvenCommonMarkImageMediaQueriesShorthandsShorthand antarmuka dan mengembalikan serangkaian pertanyaan yang dikunci oleh steno mereka dari metode mediaQueries . Setiap contoh {} dalam kueri akan digantikan oleh nilai atribut 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: {}) ' ,
        ];
    }
}

Jika Anda kemudian menambahkan singkatan ke ekstensi, Anda dapat menggunakan atribut seperti {min-aspect=8/5} dan {max-aspect=3/2} pada gambar dalam penurunan harga Anda.

Catatan

Anda dapat mengimplementasikan SvenCommonMarkImageMediaQueriesShorthandsConfigurationAwareShorthand antarmuka alih -alih antarmuka Shorthand biasa jika Anda ingin akses ke objek konfigurasi Commonmark.

Konfigurasi

Secara default, ekstensi ini menambahkan kelas media-query-picture ke elemen <picture> yang diterjemahkannya. Anda dapat mengubah kelas ini dalam konfigurasi:

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

Catatan: Ingatlah bahwa elemen <picture> tidak dapat ditata, karena sebenarnya tidak diterjemahkan di browser. Anda harus menata elemen <img> sebagai gantinya. Lihat halaman MDN untuk informasi lebih lanjut.

Berkontribusi

Semua kontribusi (permintaan tarik, masalah, dan permintaan fitur) dipersilakan. Pastikan untuk membaca Contributing.md First. Lihat halaman kontributor untuk semua kontributor.

Lisensi

sven/commonmark-image-media-queries dilisensikan di bawah Lisensi MIT (MIT). Silakan lihat file lisensi untuk informasi lebih lanjut.