تنزيل commonmark image media queries - commonmark image media queries .

commonmark image media queries

فئات أخرى

Version 1.0.1

تنزيل

استفسارات وسائط الصور المشتركة

يتيح لك هذا الامتداد المشترك إضافة استفسارات الوسائط إلى الصور في تخفيض العلامة التجارية التي تم تقديمها.

تثبيت

يمكنك تثبيت هذا الامتداد عبر الملحن:

composer require sven/commonmark-image-media-queries

الاستخدام

لتمكين هذا الامتداد ، تأكد أولاً من امتداد Attributes التي يتم تمكينها مع Sombormark. ثم أضفها إلى بيئة المميزات المشتركة:

 use Sven  CommonMark  ImageMediaQueries  ImageMediaQueriesExtension ;

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

يمكنك الآن إضافة سمة media إلى صورك:

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

هذا سيجعل 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 >

مهم

سيتم دائمًا استخدام الصورة الأخيرة مباشرة بعد استخدام صورة أخرى واحدة على الأقل مع سمة media كـ "افتراضي" ، وبالتالي سيتم تقديمها كعلامة <img /> في عنصر <picture> . إذا كانت هذه الصورة الأخيرة تحتوي على سمة media نفسها ، فلن يتم استخدام هذه السمة وتجريدها.

الاختزال

يشحن هذا الامتداد أيضًا ، ويسمح لك بكتابة اختصاصاتك الخاصة للاستعلامات على الوسائط المستخدمة في كثير من الأحيان. يمكنك تمكين الاختزال أثناء تسجيل التمديد باستخدام Sombormark:

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

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

$ environment -> addExtension ( $ extension );

نظام الألوان

يتيح لك SvenCommonMarkImageMediaQueriesShorthandsColorScheme استخدام {scheme=dark} على صورة ، ويتوسع إلى (prefers-color-scheme: dark) :

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

هذا سيجعل 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 >

عرض

يمنحك اختصار العرض SvenCommonMarkImageMediaQueriesShorthandsWidth سمات minw و maxw لإضافتها إلى صورة. يمكن بعد ذلك تقصير المثال من الأعلى إلى ما يلي:

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

هذا بالطبع يعمل أيضًا مع {maxw=[value]} .

كتابة بنفسك

لكتابة اختصارك الخاص ، قم بتنفيذ واجهة SvenCommonMarkImageMediaQueriesShorthandsShorthand interface وإعادة مجموعة من الاستعلامات التي تتوصل إليها اختصارها من طريقة mediaQueries . سيتم استبدال أي حالات {} في الاستعلام بقيمة سمة 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: {}) ' ,
        ];
    }
}

إذا قمت بعد ذلك بإضافة اختصار إلى الامتداد ، فيمكنك استخدام سمات مثل {min-aspect=8/5} و {max-aspect=3/2} على الصور في عملية التنسيق الخاصة بك.

ملحوظة

يمكنك تنفيذ واجهة SvenCommonMarkImageMediaQueriesShorthandsConfigurationAwareShorthand بدلاً من الواجهة Shorthand العادية إذا كنت ترغب في الوصول إلى كائن التكوين المشترك.

إعدادات

بشكل افتراضي ، يضيف هذا الامتداد فئة media-query-picture إلى العنصر <picture> الذي يقدمه. يمكنك تغيير هذه الفئة في التكوين:

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

ملاحظة: تذكر أنه لا يمكن تصميم عنصر <picture> ، لأنه لم يتم تقديمه بالفعل في المتصفح. يجب عليك تصميم عنصر <img> بدلاً من ذلك. انظر صفحة MDN لمزيد من المعلومات.