چرخ فلک تصویر Modx در صفحه محصول. بزرگ و ترسناک

سلام جامعه!

در این یادداشت، یاد خواهید گرفت که Multiple Formtabs چیست و چگونه یک پیکربندی با یک مجموعه داده متفاوت ایجاد کنید. و البته با شما یک اسلایدر ایجاد خواهیم کرد که انواع مختلف اسلایدها را داشته باشد و در پایان شما یک اسلاید بسیار داستان جالبکه من برای مدت طولانی جرات نداشتم به کسی بگویم (مگر اینکه، البته، شما علاقه مند هستید، اما داستان جالب است - باور کنید). و به این ترتیب، نمونه هایی از اسلایدها:

• تصویر پس زمینه
• پس زمینه ویدیو
• پس زمینه تک رنگ

توجه! این بار کودکان و زنان باردار را از صفحه نمایش حذف نکنید، زیرا این نوعی تبعیض سنی و جنسیتی است!

این طور خواهد بود

یک اطلاعیه دیگر! من اغلب به درس اول مراجعه می‌کنم تا تکرار نشود، بنابراین اکیداً توصیه می‌کنم که با آن آشنا شوید

برای چی؟

بیایید خیال پردازی کنیم: شما پروژه ای دریافت می کنید که در آن، برای مثال، در صفحه اصلی یک اسلایدر با چندین نوع اسلاید وجود دارد، یکی دارای پس زمینه ویدیو، دیگری دارای یک تصویر، و سومی دارای یک رنگ ثابت است. شما یک مجموعه از فیلدها (یک پیکربندی) ایجاد نمی کنید و همه این فیلدها را (با عرض پوزش برای واژگان) در آن قرار نمی دهید و به مدیر بگویید که چگونه با آن زندگی کند و باشد. نیست نگرش جدی!? (امیدوارم کسی بفهمه)

برای علت

ما "چرا" را با شما فهمیدیم، حالا بیایید "چگونه" را دریابیم. اگر قبلاً درس اول را خوانده اید، باید به صفحه کامپوننت MIGX برویم و 3 پیکربندی ایجاد کنیم. ColorPicker توسط Jako را از قبل نصب کنید (اما مهم نیست):

هر چیزی که توسط من نشان داده نمی شود، بگذرید!

پیکربندی جامد (رنگ ثابت)

• برگه تنظیمات
  • نام- جامد
  • اضافه کردن دسته جدید- لغزنده
• برگه فرمت ها
  • زمینه های زمینه هایایجاد 3 فیلد
    1. رنگ پس زمینه:
       • نام زمینه-bgcolor
       • عنوان- رنگ پس زمینه را انتخاب کنید
       • نوع تلویزیون ورودی- ColorPicker (یا شما
         استفاده کنید)
    2. عنوان:
       • نام زمینهسرتیتر
       • عنوان- عنوان اسلاید
    3. شرح:
       • نام زمینه- شرح
       • عنوان- شرح اسلاید
       • نوع تلویزیون ورودی- textarea
  • فیلد چند فرمت-نوع( ارزش داده شدهنام کلید در خواهد بود
    آرایه خروجی پیش‌فرض: MIGX_formname)
  • - با رنگ ثابت در پس زمینه (متن
    این پیکربندی در لیست انتخاب)
  • - جامد (مقدار همان نوع فیلد
    در آرایه)

پیکربندی ویدئو

• برگه تنظیمات
  • نام- ویدئو
  • دسته بندی- لغزنده
• برگه فرمت ها
  • زمینه های- 1 تب و در فیلد ایجاد کنید زمینه هایمجدداً 3 فیلد ایجاد می کنیم که فقط یکی از این فیلدها از نوع دیگری است.

    در اینجا باید توضیح دهم که تعداد فیلدها و انواع آنها در پیکربندی های مختلف می تواند به همان اندازه که تصور شما محدود است متفاوت باشد ... اما من می دانم که با خیالات شما همه چیز مرتب است؟

    1. ویدئو (یعنی فایل):
       • نام زمینه- ویدئو
       • عنوان- آپلود ویدیو
       • نوع تلویزیون ورودی- فایل
    2. عنوان:
       • نام زمینهسرتیتر
       • عنوان- عنوان اسلاید
    3. شرح:
       • نام زمینه- شرح
       • عنوان- شرح اسلاید
       • نوع تلویزیون ورودی- textarea
  • فیلد چند فرمت- نوع
  • Multiple Formtabs Optionstext- با ویدئو در پس زمینه
  • Multiple Formtabs Optionsvalue- ویدئو

پیکربندی لغزنده

به طور پیش فرض، یک تصویر را می پذیرد و نوعی پیکربندی اصلی خواهد بود.

• برگه تنظیمات
  • نام- لغزنده
  • دسته بندی- لغزنده
  • جایگزین "افزودن مورد"- اسلاید اضافه کنید
  • عنوان فرم
  • عنوان پنجره- اضافه کردن/ویرایش اسلاید
• برگه فرمت ها
  • زمینه های- 1 تب ایجاد کنید و در فیلد Fields دوباره 3 فیلد ایجاد کنید
    1. تصویر:
       • نام زمینه- تصویر
       • عنوان- آپلود تصویر
       • نوع تلویزیون ورودی- تصویر
       • منبع فایل های مورد نیاز خود را مشخص کنید، این کار را در درس اول توضیح دادم
    2. عنوان:
       • نام زمینهسرتیتر
       • عنوان- عنوان اسلاید
    3. شرح:
       • نام زمینه- شرح
       • عنوان- شرح اسلاید
       • نوع تلویزیون ورودی- textarea
  • چندین فرمت- اینجا همان جادو است، ما باید تنظیمات ایجاد شده در مراحل قبلی را انتخاب کنیم، از جمله پیکربندی که در حال حاضر ایجاد می کنیم، یعنی. ویدیو، جامد و لغزنده را انتخاب کنید

    پیکربندی لغزندهدر لیست نخواهد بود، زیرا در واقع هنوز ایجاد نشده است، بنابراین باید از نقاط باقی مانده عبور کنید، پیکربندی را ذخیره کنید، این پیکربندی را دوباره برای ویرایش باز کنید و این بار در لیست موجود خواهد بود. لغزنده

    
    

    یک توضیح بیشتر: تنظیمات دقیقاً به ترتیبی که شما انتخاب کرده اید مرتب می شوند، یعنی. به طور پیش فرض، هنگام افزودن یک اسلاید جدید، اسلایدی که اولین اسلاید در لیست باشد انتخاب می شود
    

  • برچسب چند فرمت- نوع اسلاید را انتخاب کنید (متن در اینجا نشان داده شده است
    که کاربر در کنار لیست انتخاب نوع اسلاید خواهد دید)
  • فیلد چند فرمت- نوع
  • Multiple Formtabs Optionstext- با یک تصویر در پس زمینه
  • Multiple Formtabs Optionsvalue- تصویر
• برگه ستون ها
  • رشته ستون ها.افزودن دو عنصر
    1. سرتیتر
       • برگه ستون
         • سرتیتر- عنوان
         • رشتهسرتیتر
       • برگه ویرایشگر سلولی
         • ویرایشگر- this.textEditor
    2. شرح
       • برگه ستون
         • سرتیتر- شرح
         • رشته- شرح
       • برگه ویرایشگر سلولی
         • ویرایشگر- this.textEditor

همانطور که قبلاً متوجه شدید، در دو پیکربندی اول، ما به اصطلاح ستون هایی را برای خروجی در کنترل پنل ایجاد نکردیم، یعنی. هنگام ویرایش خود پارامتر تلویزیون. این ستون ها باید در دومی ایجاد شوند، یعنی. در پیکربندی که در تلویزیون نشان داده خواهد شد و در آن در فیلد چندین فرمتبرگه فرمت هاتمام پیکربندی‌هایی که ما نیاز داریم، از جمله خود پیکربندی، فهرست می‌شوند

بیایید برویم و به سرعت یک تلویزیون با نوع ورودی migx در میدان ایجاد کنیم پیکربندینام پیکربندی ما را بنویسید، یعنی. نوار لغزنده، الگوهای لازم را اختصاص دهید و منبع را برای ویرایش باز کنید یا آن را ایجاد کنید. اگر همه چیز را درست انجام دادیم، باید تصویر زیر را ببینیم:

تصویر قابل کلیک است و اگر قبلاً گیف را از لینک ابتدای یادداشت تماشا کرده اید، این یکی است

ما به سرعت داده ها را پر می کنیم و به سمت خروجی اسلایدهایمان می رویم.

چگونه برداشت کنیم؟

ورودی داده خوب است، اما در مورد خروجی چطور؟ نگران نباشید رفقا همه چیز درست می شود. برای خروجی، ما دوباره 2 گزینه خوب داریم، و هر دوی این گزینه ها را در نظر گرفتیم، این یک قطعه بومی MIGX است. getImageListو قادر متعال پدیده. بیایید ببینیم داده های ما چگونه به نظر می رسد:

getImageList

بیایید قطعه را بدون تعیین پارامتر tpl فراخوانی کنیم تا داده های خام را ببینیم:

[] آرایه ( => 14 => تصویر => files/avatar.png => این یک اسلاید با یک تصویر است => خب، توضیحات کوتاه) [_alt] => 0 [_first] => 1 [_last] => => 1 = > نوار لغزنده) آرایه ( => 15 => ویدئو => فایل‌ها/خانه من شرم آور است. MOV => و این یک ویدیو است => بله، در واقع! [_alt] => 1 [_first] => [ _last] => => 2 => نوار لغزنده) آرایه ( => 16 => جامد => ff0000 => و قرمز رنگ زیبایی است => من آن را دوست دارم! ] => 1 => 3 = > نوار لغزنده)

پدیده

($_modx->resource.slider| fromJSON | print) آرایه ( => آرایه ( => 14 => تصویر => files/avatar.png => این یک اسلاید تصویر است => خب، توضیحات کوتاه)) => آرایه ( = > 15 => ویدئو => فایل ها/خانه من شرم آور است. MOV => و این یک ویدیو است => بله، در واقع!) => آرایه ( => 16 => جامد => ff0000 => و اینجا قرمز است یک رنگ زیبا => من دوست دارم!))
همانطور که می بینیم، در آرایه های ما، در میان چیزهای دیگر، کلید نوعبا مقادیری که هنگام ایجاد تنظیمات مشخص کردیم.

به منظور نمایش اسلایدر ما با getImageList، باید 3 تکه با نام مقادیر کلیدی خود ایجاد کنیم نوع، یعنی: تصویر، ویدئو و جامد. در ادامه متوجه خواهید شد که چرا.

نمونه های تکه ای:

// تصویر تکه ای

// ویدئوی تکه ای // تکه جامد
و تماس باید به این صورت باشد:

در اینجا از آرایه های هر اسلاید مقادیر می گیریم و بنابراین سه تکه ایجاد کردیم که نام آنها با مقادیر فیلد مطابقت دارد. فیلد چند فرمت

خوب، در پدیدههمه چیز بسیار ساده تر به نظر می رسد:

(var $slider = $_modx->resource.slider| fromJSON) (اگر $slider)

(/اگر)

نتیجه و داستان موعود

همانطور که می بینیم، MIGX با این کار کنار می آید، اگر نگوییم "عالی"، اما حداقل "خوب". یک بار دیگر تکرار می کنم که MIGX شما را در تعداد تنظیمات، تب ها در هر پیکربندی و تعداد فیلدهای آنها محدود نمی کند. و مثال‌ها، همانطور که امیدوارید متوجه شده باشید، بسیار ساده هستند تا بتوانید با این عملکرد نیز آشنا شوید. و یک چیز مهم دیگر: هنگام خروجی کردن تکه ها، اکیداً توصیه می کنم پر بودن فیلدها را بررسی کنید و همیشه در نظر داشته باشید که ممکن است داده ها پر شوند یا نشوند یا به دلایلی نیایند، و بنابراین از فیلترهای phx برای نحو MODX استفاده کنید. یا شرایط موجود در فنوم

از توجه همه شما متشکرم، برای همه آرزوی خوشبختی می کنم، اما این کار را نمی کنم، زیرا همانطور که می گویند: "برای بازنده ها آرزوی موفقیت کنید" ، بنابراین برای شما آرزوی خوشبختی و سلامتی یا چیزی دارم ، اما چه کسی اهمیت می دهد ، پس داستان.

یک بار اقوامم به دیدن ما آمدند، از جمله برادرزاده ام (پسر خواهرم) از آنجا کشور همسایهو دو برادرزاده ام (تقریبا همه همسن هستیم). خانه روستایی، آسیای مرکزی آفتابی، یک کوه کوچک و یک رودخانه در نزدیکی. همان شب، چهار نفری تصمیم گرفتیم در کنار همین رودخانه قدم بزنیم و در ابتدا همه چیز آرام بود، هیچ دلیلی برای هیجان وجود نداشت. آنها بسیار سرگرم بودند، داستان می گفتند (گاهی ترسناک و ترسناک)، شوخی می کردند، و مواردی از این قبیل. اما یک دفعه متوجه شدم که یکی از برادرزاده‌هایم رنگش پریده است و این فقط یک چرخش کلامی یا زینت نیست، زیرا قبل و بعد از این ماجرا چنین ترس و گیجی را در چهره یک نفر ندیده بودم. بدون اینکه چشمش را بردارد به سمتی که پشتم چرخیده بود نگاه کرد، یعنی. به نظر می رسید که او به چیزی یا کسی پشت سر من نگاه می کند، اما نه مستقیماً در پشت و نزدیک، به نظرم می رسید که او به جایی در دوردست نگاه می کند. ترسناک بود و از او پرسیدم: - چی شده؟ و او…

این پاراگراف باید وانمود کند که داستان در این یادداشت ادامه دارد، اما در واقع من فقط کمی شما را فریب دادم، به این امید که بتوانم کمی شما را از متن فنی، خسته کننده و بزرگ دلگرم کنم و در وضعیت خوبی قرار بگیرید. حالت. خود داستان واقعی و بسیار جالب است. اکنون، از توجه همه شما متشکرم!

UPD:
اگر من چی هستم بها!؟

اگر ناگهان کسی بخواهد از روبل تشکر کند، همینطور است: کارت Sberbank +79609354545

در این درس به اصول MIGX می پردازیم و روی اسلایدر جدیدی کار می کنیم که می توانید در وبلاگ خود از آن استفاده کنید.

الزامات:

• وب سایت MODX Revolution.
• نوع متغیر قالب سفارشی MIGX (از طریق مدیریت بسته) نصب شده است.
• نوار لغزنده یا اسکریپت گالری که مایلیم آن را ادغام کنیم. من از FlexSlider WooThemes استفاده کردم زیرا خود را متناسب با عرض ظرف تنظیم می کند (برای طراحی واکنش گرا بسیار مهم است!). همچنین بسیار قابل تنظیم است، از اسکرول در گوشی‌های هوشمند پشتیبانی می‌کند و به خوبی ظاهر می‌شود.
• قطعه phpthumbof از طریق Package Manager برای برش خودکار تصاویر نصب شده است.
• هر تصویری!

شروع

در کار از چندین بخش استفاده شده است. ابتدا باید تلویزیون MIGX را نصب کنیم و باید این داده ها را از قسمت جلویی بگیریم و اسلایدر خود را کار کنیم. این آموزش استفاده از FlexSlider را فرض می‌کند، ما مطمئن می‌شویم که نشانه‌گذاری همان چیزی است که نیاز دارد، اما سازگاری با سایر لغزنده‌ها نیز باید بسیار آسان باشد.

مرحله 1: تلویزیون MIGX را برای مدیریت تصویر نصب کنید

بیایید با تنظیم تلویزیون شروع کنیم. نقطه قوت MIGX این است که می توانید فیلدهای مورد نیاز خود را تعریف کنید. شما آنها را به صورت جدول خواهید دید و فقط باید عناوین را نام ببرید. در این مورد، من به سه فیلد مختلف نیاز دارم:

• فیلد ورودی برای انتخاب یک تصویر در سیستم فایل (یا در 2.2 از منابع رسانه شما).
• فیلد ورود متن برای وارد کردن عنوان / برچسب / توضیحات. FlexSlider با زیرنویس ها کار بسیار خوبی انجام می دهد، بنابراین ما از آنها استفاده خواهیم کرد.
• همچنین ورودی متن را برای "Set" اضافه کردم. همانطور که بعدا خواهیم دید، من از آن برای تعداد بی نهایت اسلایدر فردی استفاده خواهم کرد که از هر نقطه ای در منبع اضافه می شود.

اگر دوست دارید می توانید از فیلدهای دیگر استفاده کنید، اما آموزش دقیقاً از فیلدهایی که در بالا لیست کردم استفاده می کند.

بیایید به ساخت تلویزیون برویم. در اینجا یک نوار لغزنده با توضیحات تصاویر (در صورتی که چیزی در تصویر کوچک قابل مشاهده نباشد) وجود دارد.

یک متغیر قالب جدید در تب Elements ایجاد کنید و نام مناسبی برای آن بگذارید. من آن را ws.images می نامم، اگر نام خود را به آن بدهید، فراموش نکنید که [[*ws.images]] را با نام خود جایگزین کنید. در تب گزینه های ورودی، نوع "migx" را از منوی کشویی انتخاب کنید. اگر این نوع را نمی بینید، بررسی کنید که آیا بسته MIGX را از طریق Package Manager نصب کرده اید یا خیر. متوجه خواهید شد که چندین گزینه در پایین صفحه اضافه شده است، از جمله برگه های فرم و ستون های شبکه. این برای MODX > 2.0 صدق می کند، برای نسخه های قبلی من ارتقاء را توصیه می کنم.

توجه داشته باشید که فیلدهای Form Tabs و Grid Columns باید با رشته های JSON معتبر پر شوند. JSON اساساً راهی برای نمایش اشیاء، آرایه ها یا ترکیبات کلید -> مقادیر به گونه ای است که تقریباً هر زبان برنامه نویسی از آن پشتیبانی می کند. در اینجا مشخصات فنی و چند نمونه از سایت رسمی JSON آورده شده است.

تنظیم برگه های فرم

فرم به شما امکان استفاده از تب های مختلف را می دهد. هر تب دارای توضیحات و چندین فیلد است. شما می توانید بسیاری از کارهای پیشرفته را با این کار انجام دهید زیرا بیشتر اوقات از یک تب استفاده می کنید، بنابراین فقط فعلاً به یاد داشته باشید. در اینجا کد JSON برای برگه‌های فرمی که استفاده می‌کنم آمده است:

[("کاپشن":"تصویر"، "فیلدها": [ ("فیلد":"تنظیم"، "تصویر":"تنظیم")، ("فیلد":"توضیح،"کپشن:"شرح") , ("فیلد":"تصویر"، "تصویر":"تصویر"،"inputTVtype":"تصویر") ] )]

بیایید از هر خط عبور کنیم:

• اولی باز شدن آرایه برگه ها را با براکت مربع ([) و شی باز کردن برگه را با براکت (() نشان می دهد. پس از آن، عنوان قسمت Image را تعریف می کنیم. توجه داشته باشید که شما نیاز دارید برای استفاده از دو گیومه (" ") برای ویژگی ها و مقادیر آنها، تک ها می توانند به نتایج غیرمنتظره ای منجر شوند. اگر این براکت ها را در هر خاصیت، مقدار دارید، با یک اسلش (\) از آنها فرار کنید. بیایید ادامه دهیم و شروع به تعریف آرایه "فیلدها" کنیم، آن را با پرانتز ([) باز کنیم.
• اولین فیلد خود را به صورت set تعریف می کنیم. "field": "set" به این معنی است که می خواهیم در این قسمت ورودی متن ساده داشته باشیم. "Caption": "Set" - ما توضیحی درباره نام "set" ارائه می دهیم - این نام برای وارد کردن متن ساده خواهد بود. در مرحله بعد، عنوان "Set" را به آن بدهید که در فرم به عنوان یک برچسب فیلد نشان داده می شود.
• در مرحله بعد قسمت توضیحات را به همین صورت تعریف کنید
• خط 4 تصویر را تعریف می کند. نکته ویژه در اینجا این است که ما از تلویزیون دیگری (به نام "تصویر") به عنوان نوع ورودی استفاده می کنیم. این ویژگی بسیار قوی MIGX است که به شما امکان می دهد از تلویزیون های دیگر برای ساختن شکل خود استفاده کنید. در این مورد تلویزیون "تصویر" بسیار ساده است: نوع ورودی تصویر است و در 2.2 می توانید آن را به منبع رسانه صحیح اختصاص دهید. لازم نیست آن را مانند تلویزیون معمولی با الگوها مرتبط کنید. راه دیگر برای انجام این کار (که من در سایر تلویزیون های MIGX از آن استفاده می کنم) ساخت جعبه های رادیویی یا جعبه های انتخابی است.
• خط پنجم آرایه فیلدها را می بندد. همچنین توجه داشته باشید که آخرین خط تعیین کننده فیلد (تصویر) با کاما به پایان نمی رسد - این مهم است! اگر در یک آرایه کاما قرار دهید، JSON تجزیه نمی شود و فرم شما کار نمی کند.
• خط ششم شی تب و کل آرایه تب ها را می بندد.

بنابراین، به این ترتیب ما تلویزیون "تصویر" را ایجاد کرده ایم! از قبل باید فرمی برای پر کردن داده ها داشته باشید، اما برای نمایش آن به نشانه گذاری نیاز دارید...

تنظیم نشانه گذاری ستون

طرح ستون یک جدول در پنل تلویزیون منبع است. باید از طریق گزینه های ورودی Column Markup هدرهای این جدول را تعریف کنید. در اینجا تعریف (دوباره JSON) چیزی است که من استفاده می کنم: [( "header": "Set", "sortable": "true"، "dataIndex": "set")، ("header": "Description" , " sortable" : "true"، "dataIndex": "description" ),( "header": "Image"، "sortable": "false"، "dataIndex": "image"، "renderer": "this. renderImage" )]

بیایید از هر خط عبور کنیم:

• آرایه عنوان را با براکت های مربع ([) و عنوان ستون پنجم را با براکت های فرفری (() باز کنید.
• عنوان را "Set" نامگذاری می کنیم، نشان می دهیم که می توان آن را مرتب کرد (قابل مرتب سازی) و پارامتر "set" را مشخص می کنیم که مطابق با تعریف Set Form Tabs است که دارای "field":"set است.
• پایان مجموعه / شروع توضیحات
• نام هدر را «Description» می گذاریم، قابل مرتب سازی است و آن را با dataIndex توضیحات فیلد مطابقت می دهیم.
• پایان توضیحات / شروع تصویر
• نام هدر را "Image"، غیرقابل مرتب سازی، بگذارید و آن را به قسمت dataIndex - image نگاشت کنید. ما همچنین یک رندر تعریف می کنیم که در ExtJS به شما امکان می دهد ظاهر داده های خروجی را تغییر دهید. در این مورد "this.renderImage" رندر به طور خودکار آدرس تصویر انتخاب شده را می گیرد و به جای آن یک تصویر کوچک ارائه می دهد.
• انتهای یک شیء Image و آرایه ای از هدرها.

پس از آن می توانید این تلویزیون MIGX را به قالب خود اختصاص دهید و نتیجه را بررسی کنید. نشانه گذاری نشان داده نمی شود؟ به برگه‌ها برگردید و مطمئن شوید که همه مقادیر در گیومه‌های دوگانه قرار گرفته‌اند و نه تک‌گیومه‌ها و کاماهای اضافی را بررسی کنید.

اطلاعات

برای تأیید اعتبار JSON، از JSONLint استفاده کنید.

• جزئیات را پر کنید
• داده ها را به سایت بیاورید

متغیر الگوی ws.image ما را با داده های دلخواه پر کنید

اگر سعی کنید این داده ها را به عنوان یک تلویزیون معمولی نمایش دهید، چیزی شبیه به این خواهید دید:

[( "MIGX_id":"1"،"set":"set1"،"description":"گربه‌ای را که سوسیس می‌دزد و وقتی بیدار است می‌خورد را علامت‌گذاری کنید"،"image":"demo/uroki/15/1 .jpg" ),("MIGX_id":"2"،"set":"set1"،"description":"Drum"،"image":"demo/uroki/15/2.jpg")،( "MIGX_id" ":"3"،"set":"set1"،"description":"como esta nuevo"،"image":"demo/uroki/15/3.jpg")،("MIGX_id":"4"، "set":"set1"، "description":"شما می توانید یک مرد را با این کتاب بکشید"، "image":"demo/uroki/15/4.jpg" )]

این یک آرایه JSON با فیلدها و مقادیر وارد شده است!

از آنجایی که MIGX با یک قطعه getImageList همراه است، می توانید سعی کنید داده ها را با استفاده از آن نمایش دهید. مستندات این قطعه را می توانید در اینجا بیابید. یا قطعه خود را بسازید (parseMIGXToGallery)، که من از آن برای ایجاد نشانه‌گذاری از &tpl chunk بر اساس داده‌های تلویزیون استفاده می‌کنم:

fromJSON($input); $output = آرایه(); اگر (!$input || خالی ($tpl)) "بدون چیز" را برگرداند; foreach ($input به عنوان ردیف $) ( if (isset($set) && !empty($set) && ($set != $row["set"])) ادامه دهید؛ $output = $modx->getChunk($ tpl، $row); ) return implode("\n", $output);

بیایید از هر خط عبور کنیم:

• متغیر $input را می‌گیریم (که داده‌های موجود در پارامتر &input در فراخوانی قطعه را می‌گیرد و بعداً در مورد آن بیشتر توضیح می‌دهیم) و JSON را در یک آرایه php تجزیه می‌کنیم.
• یک آرایه خالی برای نگه داشتن خروجی خود تنظیم می کنیم.
• بیایید مطمئن شویم که متغیر $input NULL یا False نباشد، که به این معنی است که JSON پاس نشده یا نامعتبر است، و همچنین بررسی کنیم که آیا متغیر $tpl (که توسط پارامتر &tpl در فراخوانی قطعه ارسال می‌شود) خالی نیست. اگر یکی از شرایط درست باشد، یک پیام خطای "خالی" چاپ می کنیم، که به عنوان یک اشاره به مدیر محتوا مبنی بر اینکه مشکلی وجود دارد عمل می کند.
• در مرحله بعد، هر عنصر آرایه ورودی $ را به عنوان یک ردیف $ تکرار کنید.
• بررسی می کنیم که آیا متغیر $set تنظیم شده است (که در فراخوانی قطعه در پارامتر &set تنظیم شده است) و اگر خالی نباشد، مقدار آن را در برابر مقدار "set" ردیف فعلی بررسی می کنیم. اگر این چیزی نیست که می خواهید، به عنصر بعدی در آرایه بروید.
• ما یک تکه به نام $tpl دریافت می کنیم و مقادیر ردیف فعلی را به عنوان متغیرهایی در آن قرار می دهیم.
• حلقه foreach را می بندیم.
• در نهایت آرایه $output را به هم می چسبانیم و هر عنصر را با یک خط شکسته جدا می کنیم و به صفحه خروجی می دهیم.
• بنابراین برای خلاصه کردن موارد بالا، ورودی را می گیریم، هر ردیف را مرور می کنیم و بررسی می کنیم که آیا متعلق به مجموعه ای است که ما تعریف کرده ایم، سپس یک قطعه می شود و همه چیز را به خروجی اضافه می کند.
• اجرای قطعه

تنها چیزی که ما نیاز داریم یک فراخوان قطعه است که در آن به تصاویر خود و یک قطعه نیاز داریم که همه چیز را به روش درست برای FlexSlider خروجی می‌دهد. نام این قطعه به این صورت است:

[]` &set=`set1` ]]

و قطعه images.gallery.tpl:

[[+توضیح]]

طبق مستندات FlexSlider، همچنین باید کل خروجی قطعه را در یک div و یک لیست نامرتب قرار دهید. برای آسان تر کردن همه چیز، بیایید همه را در یک تکه قرار دهیم. قطعه من اسلایدر نام دارد و شامل موارد زیر است:

با استفاده از این بخش، می توانم به سادگی به چیزی در محتوا پیوند دهم، که به خاطر سپردن یا قرار دادن آن در یک برگه تقلب بسیار آسان تر است.

[[$slider?set=`نام مجموعه`]]

اکنون می توانید شروع به چیدمان FlexSlider کنید.

مرحله 3: استفاده از FlexSlider

استفاده از FlexSlider نسبتا آسان است (فایل های آن را دانلود کنید) و نمونه های زیادی در وب سایت آن وجود دارد. همچنین باید فراخوانی به jQuery را در صفحه و فایل CSS آن (در یک فایل فشرده) و افزونه FlexSlider (همچنین در بایگانی فشرده) قرار دهید. پس از آن، باید عنصر صحیح را با استفاده از کد زیر فعال کنید:

سایت توصیه می کند که همه چیز را در سر فایل قرار دهید، اما من شخصا همه را در پایین قرار دادم. اگر نوار لغزنده شما در بالای صفحه نمایش داده می شود، بهتر است آن را در آن قرار دهید به طوری که قبل از ظاهر شدن صفحه بارگذاری شود، بنابراین آن را در هر کجا که دوست دارید قرار دهید.

همین! امیدوارم این مقاله طولانی به کسی کمک کند تا استفاده از MIGX و اسلایدرهایی مانند FlexSlider را شروع کند!

امروز یک مقاله کوچک در مورد نحوه ایجاد یک اسلایدر در modxبا استفاده از بسته BanerY این بسته را می توان از مخزن دانلود و نصب کرد.

ایجاد یک اسلایدر با BanerY

و بنابراین یک لغزنده ثابت وجود دارد، بگذارید یک نوار لغزنده بوت استرپ معمولی باشد، با این نشانه گذاری:

هدف ایجاد یک اسلایدر مدیریت شده از این نشانه گذاری است. بیا شروع کنیم.

بیایید با ایجاد اسلاید در BannerY شروع کنیم، برای این کار به Applications - BannerY - Positions می رویم و یک موقعیت ایجاد می کنیم (مثلا home-slider).

پس از آن به تب Banners رفته و بر روی دکمه New banner کلیک کنید. پنجره ای برای ایجاد یک بنر جدید باز می شود.

ما همه چیز را پر می کنیم:

• نام، با استفاده از [[+name]] قابل نمایش است.
• یک تصویر را انتخاب کنید - [[+ تصویر]].
• URL را مشخص کنید که کجا بروید - [[+url]].
• توضیحات را پر کنید - [[+ توصیف]] - در اینجا، اتفاقا، می توانید نه تنها متن، بلکه html معمولی را نیز شارژ کنید، و این عالی است.
• خوب، موقعیت را انتخاب کنید (قبل از آن ایجاد شده است).

و به این ترتیب تعداد اسلاید مورد نیاز را ایجاد می کنیم.

اکنون باید نشانه گذاری بالا را به قطعات تقسیم کنید و کد موجود در تکه ها را در نحو BanerY قرار دهید.

یک تکه برای یک اسلایدر جداگانه با یک کلاس ایجاد کنید فعال، بگذار باشد اسلایدو سینتکس را به آن تزریق کنید:

حالا اون قسمت رو کپی کنید و اسمش رو بذارید اسلاید 2و کلاس را حذف کنید فعال

خوب، در واقع فقط نمایش اسلایدها باقی می ماند.

[]

در نتیجه موارد زیر را بدست می آوریم:

همین) ایجاد یک نوار لغزنده در modx با استفاده از BanerY بسیار آسان است.

بله، اتفاقا، مستندات آن در اینجا است: docs.modx.pro/components/bannery/snippet

Slider Revolution یکی از محبوب ترین اسلایدرها به دلیل طیف گسترده ای از ویژگی ها و سهولت استفاده است.
از ThemePunch. این اسلایدر بیش از 273441 بار خریداری شده است و بیش از 2500000 سایت در سراسر جهان از آن استفاده می کنند.

در زیر برخی از مزایای اصلی این اسلایدر ذکر شده است که آن را از رایگان و متمایز می کند
اکثر آنالوگ های برتر:

• ویرایشگر بصری قدرتمند - صفحه نمایش کشویی را مطابق با نیازهای پروژه خود از طریق یک منوی مناسب که در آن قرار دارد، سفارشی کنید
  هر تابع در جای خود است. درجه بندی دقیق به شما اجازه نمی دهد گیج شوید. تنها مشکل در
  اولین بار میل به امتحان همه آنها خواهد بود.
• کنترل تغییرپذیری هر اسلاید - نمایش برنامه ریزی شده بلوک ها روی صفحه رایانه، تبلت و تلفن
  در ویرایشگر تصویری نشان داده شده است. می توانید اندازه اسلایدها را به صورت جداگانه برای هر دستگاه تغییر دهید.
  الگوی ریسپانسیو اجازه نمی دهد تصاویر و ویدیوها تحریف شوند یا فضای بیشتری را از آنچه که لازم است اشغال کنند
  مشاهده راحت
• کار با شبکه های اجتماعی و میزبانی ویدیو - نسل پنجم Slider Revolution به شما امکان می دهد در اسلایدر قرار دهید
  داده ها از Instagramm، Facebook، Flickr، Twitter، Vimeo و Youtube. اگر قصد دارید ویدیو را به تنهایی پست کنید
  سرور، می توانید از زبان HTML5 استفاده کنید. بخش هایی از کد به صورت خودکار نوشته می شود.
• کارایی بالا و بهینه سازی اسلاید - این افزونه در حالت ویرایش سریع کار می کند و کاهش می دهد
  وزن نوار لغزنده بدون از دست دادن کیفیت محتوا. لازم نیست نگران زمان بارگذاری طولانی صفحه باشید. به خصوص چیست
  مربوط به دستگاه های تلفن همراهی که از دسترس اتصالات WiFi دور هستند.
• تعداد زیادی جلوه های ویژه هنگام انتقال اسلایدها
• بسیاری از جلوه های انیمیشن هنگام نمایش متن، فیلم و عکس
• شروع خودکار ویدیو هنگام باز کردن سایت یا به صورت دستی، برای انتخاب، توقف اسلایدر هنگام تماشای ویدیو،
  عقب و غیره
• انتخاب بزرگی از تنظیمات ناوبری
• اعلامیه های پست را با پیوندها مستقیماً در نوار لغزنده درج کنید، در حالی که برای بهینه سازی سئو پیکربندی شده است.
• پشتیبانی و نصب فونت گوگل
• با استفاده از چندین لایه (تصاویر، فیلم ها، زیرنویس ها و پیوندها) در یک اسلاید، تعداد بیشماری از آنها وجود دارد.
  همدیگر را پوشش دهند، بنابراین یک ویدیوی واقعی یا هر ارائه ای ایجاد می کنند.

توجه!برای اینکه بتوانید قالب‌های اسلایدر پریمیوم آنلاین و آبجکت‌های کتابخانه را دانلود کنید، باید لایسنس جداگانه‌ای از ThemePunch خریداری کنید که در زمان نوشتن این متن 19 دلار هزینه دارد و سپس با وارد کردن کد خرید در فیلد مشخص شده آن را فعال کنید. شکل زیر

بررسی ویدئو modSliderRevolution

امروز به نحوه ایجاد یک نوار لغزنده بوت استرپ با استفاده از MIGX خواهیم پرداخت. قبل از شروع مطالعه، توصیه می کنم ابتدا از این مورد بازدید کنید.

ایجاد یک پیکربندی MIGX

من میرم مدیریت MIGXو یک عنصر جدید به نام اضافه کنید لغزنده، در قسمت جایگزین بنویسید " اسلایدها را اضافه کنید"و برو به برگه" فرمت ها».

• نام فیلد - عنوان، عنوان - عنوان.
• نام فیلد - اسلاید، عنوان - اسلاید، نوع تلویزیون ورودی - تصویر.
• نام فیلد - توضیحات، عنوان - توضیحات.
• نام فیلد - idstranici، Caption - شناسه سندی که باید به آن پیوند داده شود را مشخص کنید.

• سربرگ - عنوان، فیلد - عنوان.
• سربرگ - اسلاید، فیلد - اسلاید، رندر - this.renderImage.
• سربرگ - توضیحات، فیلد - توضیحات.
• هدر - شناسه سند، فیلد - idpage.

توجه داشته باشید:در اصل، ما در حال انتقال عناصر از Formtabs هستیم. بله، می‌توانید فیلدهای عرض ستون - عرض ستون‌ها را نیز پر کنید.

ذخیره (اجرا)

برای کسانی که اصلاً نمی خواهند حمام کنند، یک پیکربندی خالی ایجاد می کنیم و کد زیر را در آن صادر می کنیم:

("formtabs":[ ("MIGX_id":1، "Caption":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0430\u0430\u0430\u0430\u04\u0430\u039\u0430\u04" Tab "، "print_before_tabs" ":"0، "fields":[ ( "MIGX_id":1، "field":"عنوان"، "Caption":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432 \u043e\u043a" ، "توضیحات":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u043b\u043b\u04_co""description:"de , "inputTV": ""، "inputTVtype":"، "Validation":"، "configs":"، "restrictive_condition":"، "display":"، "sourceFrom":"config" , "sources": ""، "inputOptionValues":"، "default":"، "useDefaultIfEmpty":"0، "pos":1)، ("MIGX_id":2، "field":"slide "، "caption" :"\u0421\u043b\u0430\u0439\u0434"، "description":"، "description_is_code":"0، "inputTV":"، ​​"inputTVtype":"image"، " اعتبارسنجی":""، "configs":"، "restrictive_condition":"، "نمایش":"، "sourceFrom":"config"، "source":"، "inputOptionValues":"، " پیش فرض":"" , "useDefaultIfEmpty":"0"، "pos" :2)، ("MIGX_id":3، "field":"description"، "caption":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435، "description":"، " description_is_code":"0"، "inputTV":"، ​​"inputTVtype":"، "Validation":"، "configs":"، "restrictive_condition":"، "نمایش":"، " sourceFrom":"config"، "sources":"، "inputOptionValues":"، "default":"، "useDefaultIfEmpty":"0، "pos":3)، ("MIGX_id":4، "field":"idstranici"، "caption":"\u0423\u043a\u0430\u0436\u0438\u0442\u0435 id \u0434\u043e\u043a\u0443\u043c\u0443\u043c\u043\u043 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u0441\u0441",0441\u044"", "descript:"،"descript:""descript": inputTV":"، ​​"inputTVtype":"، "Validation":"، "configs":"، "restrictive_condition":"، "display":"، "sourceFrom": "config"، " sources":""، "inputOptionValues":"، "default":"، "useDefaultIfEmpty":"0، "pos":4 ) ]، "pos":1 ) ]، "contextmenus":"" , "actionbuttons":"، "columnbutton s":"، "filters":"، "extended":( "migx_add":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u044\u0430\u0430 u044b، "disable_add_item":"، "add_items_directly":"، "formcaption":"، "update_win_title":"، "win_id":"، "maxRecords":"، "addNewItemAt":" bottom، "media_source_id":"، "multiple_formtabs":"، "multiple_formtabs_label":"، "multiple_formtabs_field":"، "multiple_formtabs_optionstext":"، "multiple_formtabs_optionsvalue":"، "actionbuttonsperrow" ، "winbuttonslist":"، "extrahandlers":"، "filtersperrow":4، "packageName":"، "classname":"، "task":"، "getlistsort":"، " getlistsortdir":"، "sortconfig":"، "gridpagesize":"، "use_custom_prefix":"0، "prefix":"، "grid":"، "gridload_mode":1، "check_resid" ":1، "check_resid_TV":"، ​​"join_alias":"، "has_jointable":"yes"، "getlistwhere":"، "joins":"، "hooksnippets":"، "cmpmaincaption" :""، "cmptabcaption":"، "cmptabdescription":"، "cmptabcontroller":"، "winbuttons" ":"، "onsubmitsuccess":"، "submitparams":"" )، "ستون":[ ( "MIGX_id":1، "header":"\u0417\u0430\u0433\u043e\u043b\u043e\ u0432\u043e\u043a، "dataIndex":"header"، "width":100، "Sortable":"false"، "show_in_grid":1، "customrenderer":"، "Renderer":"، " clickaction":"، "selectorconfig":"، "renderchunktpl":"، "renderoptions":"، "editor":"")، ("MIGX_id":2، "header":"\u0421\ u043b\u0430\u0439\u0434، "dataIndex":"اسلاید"، "width":100، "قابل مرتب سازی":"false"، "show_in_grid":1، "customrenderer":"، "رندرکننده":"این .renderImage، "clickaction":"، "selectorconfig":"، "renderchunktpl":"، "renderoptions":"، "editor":"")، ("MIGX_id":3، "header" :"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435"، "dataIndex":"description"، "width":200، "قابل مرتب سازی":"false"، "show_in_customre":1، ":"، "renderer":"، "clickaction":"، "selectorconfig":"، "renderchunktpl":"، "renderoptions":"، "ویرایشگر":"")، (" MIGX_id":4، "header":"id \u0434\u043 e\u043a\u0443\u043c\u0435\u043d\u0442\u0430، "dataIndex":"idstranici"، "width":50، "sortable": "false"، "show_in_grid":1، "customrenderer": "، "renderer":"، "clickaction":"، "selectorconfig":"، "renderchunktpl":"، "renderoptions":"، "editor":"" ) ], "category": "")

ایجاد تلویزیون با پیکربندی MIGX

در درخت MODX، روی " عناصر"، مطبوعات + مقابل نقطه فیلدهای اضافی" و موارد زیر را وارد کنید:

• "نام" - نوار لغزنده؛ "امضا" - لغزنده.
• در تب "Input Options" در "Input Type" migx را انتخاب کنید و در قسمت "Configurations" وارد کنید. لغزنده.
• در برگه «در دسترس برای الگوها»، الگوهایی را انتخاب کنید که ورودی در این قسمت برای آنها در دسترس است.

ورود اطلاعات

بیایید سندی را باز کنیم که فیلد اسلایدر با MIGX با پیکربندی اختصاص داده شده است و مقداری داده را در آن وارد کنیم.

خروجی کاروسل بوت استرپ 3 به صفحه

ما یک نشانه گذاری استاندارد Html getbootstrap.com/docs/3.3/javascript/#carousel-examples داریم، آن را برای MIGX بازسازی کرده و کد زیر را در محل مورد نیاز در قالب بنویسید:

و تکه ها را ایجاد کنید:

tplsliderIndicator:

و تکه tplsliderItemبا محتوای زیر:

خروجی کاروسل بوت استرپ 4 در هر صفحه

مانند مورد قبلی، نشانه گذاری استاندارد را می گیریم getbootstrap.com/docs/4.1/components/carousel/و دوباره آن را انجام دهیم، در نتیجه به دست می آوریم

تکه کجاست tplsliderIndicatorدارای کد زیر است:

و تکه tplsliderItemبا کد زیر: