Modx image carousel on the product page. big and scary

Hello community!

In this note, you will learn what Multiple Formtabs are and how to create a configuration with a different data set. And of course, we will create a slider with you that will have different types of slides, and at the end you will find a very interesting story which I did not dare to tell anyone for a long time (unless, of course, you are interested, but the story is interesting - believe me). And so, examples of slides:

• Background Image
• Video background
• solid color background

Attention! This time, do not remove children and pregnant women from the screens, because this is some kind of discrimination based on age and gender!

That's how it will be

Another announcement! I will often refer to the first lesson so as not to repeat myself, so I strongly recommend that you familiarize yourself with

What for?

Let's fantasize: You get a project where, for example, on the main page there is a slider with several types of slides, one has a video background, another has a picture, and the third has a solid color, for example. You won’t create one set of fields (one configuration) and cram (sorry for the lexicon) all these fields into it and tell the manager how to live with it and be. Is not serious attitude!? (I hope someone understands)

For the cause

We understood the "why" with you, now let's find out the "how". If you have already read the first lesson, then we need to go to the MIGX component page and create 3 configurations. Pre-install ColorPicker by Jako (but it doesn't matter):

Everything that is not indicated by me, skip!

solid configuration (solid color)

• Tab Settings
  • Name- solid
  • Add new category- Slider
• Tab Formtabs
  • Fields Fields create 3 fields
    1. Background color:
       • fieldname-bgcolor
       • Caption- Select background color
       • Input TV type- ColorPicker (or the one you
         use)
    2. Title:
       • fieldname header
       • Caption- Slide title
    3. Description:
       • fieldname- description
       • Caption- Description of the slide
       • Input TV type-textarea
  • Multiple Formtabs Field-type( Given value will be the name of the key in
    output array. Default: MIGX_formname)
  • - With a solid color on the background (Text
    this configuration in the selection list)
  • - solid (The value of the same type field
    in array)

video configuration

• Tab Settings
  • Name- video
  • Category- Slider
• Tab Formtabs
  • Fields- Create 1 tab and in the field Fields again, we create 3 fields, only one of these fields is of a different type.

    I should clarify here that the number of fields and their types in different configurations can be as different as your imagination is limited ... But I know that everything is in order with your fantasies?

    1. Video (i.e. file):
       • fieldname- video
       • Caption- Upload video
       • Input TV type- file
    2. Title:
       • fieldname header
       • Caption- Slide title
    3. Description:
       • fieldname- description
       • Caption- Description of the slide
       • Input TV type-textarea
  • Multiple Formtabs Field- type
  • Multiple Formtabs Optionstext- With video in the background
  • Multiple Formtabs Optionsvalue- video

slider configuration

By default, it will accept an image and will be a kind of main configuration.

• Tab Settings
  • Name- slider
  • Category- Slider
  • Replace "Add Item"- Add slide
  • Form Caption
  • window title- Add/edit slide
• Tab Formtabs
  • Fields- Create 1 tab and in the Fields field again create 3 fields
    1. Image:
       • fieldname- image
       • Caption- Upload an image
       • Input TV type- image
       • Specify the source of files you need, I described this task in the first lesson
    2. Title:
       • fieldname header
       • Caption- Slide title
    3. Description:
       • fieldname- description
       • Caption- Description of the slide
       • Input TV type-textarea
  • Multiple Formtabs- Here is the very magic, we need to select the configurations created in the previous steps, including the one that we are currently creating, i.e. select video, solid and slider

    Configurations slider will not be in the list, because in fact it has not yet been created, so you will need to go through the remaining points, save the configuration, open this configuration again for editing, and this time it will be available in the list slider

    
    

    One more clarification: the configurations will be sorted exactly in the order in which you have chosen, i.e. by default, when adding a new slide, the one that will be the first in the list will be selected
    

  • Multiple Formtabs Label- Select the type of slide (Text is indicated here
    which the user will see next to the slide type selection list)
  • Multiple Formtabs Field- type
  • Multiple Formtabs Optionstext- With an image on the background
  • Multiple Formtabs Optionsvalue- image
• Tab columns
  • Field Columns. Adding two elements
    1. header
       • Tab Column
         • header- Title
         • field header
       • Tab Cell Editor
         • Editor- this.textEditor
    2. Description
       • Tab Column
         • header- Description
         • field- description
       • Tab Cell Editor
         • Editor- this.textEditor

As you have already noticed, in the first two configurations, we did not create the so-called columns for output in the control panel, i.e. when editing the TV parameter itself. These columns must be created in the latter, i.e. in the configuration that will be indicated in the TV and in which in the field Multiple Formtabs tab Formtabs all the configurations that we need will be listed, including the same configuration itself

Let's go and quickly create a TV with input type migx , in the field Configurations write the name of our configuration, i.e. slider , assign the necessary templates and open the resource for editing, or create it. If we did everything right, then we should see the following picture:

The image is clickable, and if you have already watched the gif from the link at the beginning of the note, then this one is the one

We quickly fill in the data and move on to the output of our slides.

How to withdraw?

Data input is good, but what about the output? Don't worry comrades, everything will be fine. For output, we again have 2 good options, and we considered both of these options in , this is a native MIGX snippet getImageList and almighty phenomenon. Let's see what our data looks like:

getImageList

Let's call the snippet without specifying the tpl parameter in order to see the raw data:

[] Array ( => 14 => image => files/avatar.png => This is a slide with an image => Well, short description) [_alt] => 0 [_first] => 1 [_last] => => 1 = > slider) Array ( => 15 => video => files/My home is shameful.MOV => And this is a video => Yes, indeed! [_alt] => 1 [_first] => [_last] => => 2 => slider) Array ( => 16 => solid => ff0000 => And red is a beautiful color here => I like it! [_alt] => 0 [_first] => [_last] => 1 => 3 = > slider)

phenomenon

($_modx->resource.slider| fromJSON | print) Array ( => Array ( => 14 => image => files/avatar.png => This is an image slide => Well, short description)) => Array ( = > 15 => video => files/My home is shameful.MOV => And this is a video => Yes, indeed!) => Array ( => 16 => solid => ff0000 => And here red is a beautiful color => I like!))
As we can see, in our arrays, among other things, the key type with the values ​​that we specified when creating the configurations.

In order to display our slider with getImageList, we need to create 3 chunks with the names of our key values type, i.e.: image , video and solid . Further you will understand why.

Chunk examples:

// Chunk image

// Chunk video // Chunk solid
And the call should look like this:

Here we take values ​​from the arrays of each slide, and therefore we created three chunks whose names match the field values Multiple Formtabs Field

Well, on phenomenon everything looks much simpler:

(var $slider = $_modx->resource.slider| fromJSON) (if $slider)

(/if)

Outcome and promised story

As we can see, MIGX copes with this task, if not to say "excellent", but at least "good". I repeat once again that MIGX does not limit you in the number of configurations, tabs in each configuration and in the number of fields in them. And the examples, as you already hope you understand, are quite simple so that you can also just get acquainted with this functionality. And something else important: when outputting chunks, I strongly recommend checking for fullness of the fields and always take into account that the data may or may not be filled in or for some reason may not come, and therefore use phx filters for the MODX syntax or conditions in fenom.

Thank you all for your attention, I would wish good luck to everyone, but I won’t, because as they say: “Wish the losers good luck”, so I wish you happiness and health or something, but who cares, then the story.

Once my relatives came to visit us, among them my nephew (son of my sister) from neighboring country and my two nephews (We are almost all the same age). Country house, sunny Central Asia, a small mountain and a river nearby. That same night, the four of us decided to take a walk along this very river, and at first everything was calm, there were no reasons for excitement. They had a lot of fun, told stories (sometimes scary and creepy), joked, and stuff like that. But at one point, I noticed that one of my nephews turned pale and this is not just a verbal turn or embellishment, because I have never seen such fear and bewilderment on a person’s face before and after this incident. Without taking his eyes off, he looked in the direction where my back was turned, i.e. he seemed to be looking at something or someone behind me, but not directly behind and close, it seemed to me that he was looking somewhere in the distance. It was scary and I asked him: - What happened? And he…

This paragraph will have to pretend that the story in this note has a continuation, but in fact I just deceived you a little, hoping that I could cheer you up a little from the technical, boring and large text and you will be in a good mood. The story itself is real and very interesting. Now, thank you all for your attention!

UPD:
If what am I Baha!?

If suddenly someone wants to thank the ruble, then so be it: Sberbank card +79609354545

In this lesson, we will cover the basics of MIGX and work on a new slider that you can use on your blog.

Requirements:

• MODX Revolution website.
• Installed MIGX custom template variable type (via package management).
• Gallery slider or script that we would like to integrate. I used WooThemes' FlexSlider because it adjusts itself to fit the width of the container (very important for responsive design!). It's also highly configurable, supports scrolling on smartphones, and looks just fine out of the box.
• Installed phpthumbof snippet via Package Manager for autocropping images.
• Any images!

Begin

The work uses several parts. First we need to install MIGX TV and we need to take this data from the front end and make our slider work. This tutorial assumes using the FlexSlider, we will make sure the markup is what it needs, but it should also be very easy to adapt to other sliders.

Step 1: Install MIGX TV for picture management

Let's start by setting up the TV. The strength of MIGX is that you can define the fields you need. You will see them as a table and you only need to name the titles. In this case, I will need three different fields:

• Input field for selecting an image in the file system (or in 2.2 from your media sources).
• Text entry field to enter a caption / tag / description. FlexSlider does a great job with captions, so we'll use them.
• Also I added text input for "Set". As we will see later, I will use it for an infinite number of individual sliders that will be added from anywhere in the resource ..

You can use other fields if you like, but the tutorial will use exactly the fields I listed above.

Let's move on to creating TV. Here is a slider with descriptions of the images (in case nothing is visible in the thumbnail).

Create a new template variable in the Elements tab and give it an appropriate name. I'll call it ws.images, if you give it your own name, don't forget to replace [[*ws.images]] with your name. In the Input Options tab, select the "migx" type from the drop-down menu. If you don't see this type, then check if you have installed the MIGX package via the Package Manager. You'll notice that several options have been added at the bottom of the screen, including Form Tabs and Grid Columns. This applies to MODX >2.0, for earlier versions I recommend upgrading.

Note that the Form Tabs and Grid Columns fields must be filled with valid JSON strings. JSON is basically a way of displaying objects, arrays, or key -> value combinations in a way that almost any programming language supports. Here is the technical specification and some examples from the official JSON site.

Setting Form Tabs

The form allows you to use different tabs. Each tab has a description and several fields. You can do a lot of advanced things with this since you'll be using single tab most of the time, so just remember for now. Here is the JSON code for the Form Tabs I am using:

[("caption":"Image", "fields": [ ("field":"set","caption":"Set"), ("field":"description","caption":"Description") , ("field":"image","caption":"Image","inputTVtype":"image") ] )]

Let's go through each line:

• The first one shows the opening of the array of tabs with a square bracket ([), and the opening object of the tab with a curly bracket ((). After that, we define the caption of the Image field. Note that you need to use double quotes (" ") for properties and their values , single ones can lead to unexpected results.If you have these brackets in any properties, values, escape them with a slash (\).After defining the description (caption), let's continue and start defining the array of "fields", opening it with square brackets ([) .
• We will define our first field as set. "field": "set" means that we want to have plain text input in this field. “Caption”:”Set” - we give a description of the name "set" - this will be the name for entering plain text. Next, give it the caption "Set", which will be shown on the form as a field label.
• Next, define the description field in the same way
• Line 4 defines the image. What's special here is that we're using another TV (named "image") as the input type. This is a very strong feature of MIGX that allows you to use other TVs to build your shape. In this case the "image" TV is very simple: the input type is image, and in 2.2 you can assign it to the correct media source. You don't need to associate it with templates as you would with regular TV. Another way to do this (which I use on other MIGX TVs) is to make radio boxes or select boxes.
• The fifth line closes the array of fields. Also note that the last line defining the field (image) does not end with a comma - this is important! If you put a comma in an array, the JSON will not be parsed and your form will not work.
• The sixth line closes the tab object and the entire array of tabs.

So, in this way we have created "image" TV! You should already have a form to fill in the data, but you need markup to show it...

Setting the Column Markup

The column layout is a table on the resource's TV panel. You need to define the headers for this table via the Column Markup input options. Here is the (JSON again) definition of what I'm using: [( "header": "Set", "sortable": "true", "dataIndex": "set" ),( "header": "Description", "sortable" : "true", "dataIndex": "description" ),( "header": "Image", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage" )]

Let's go through each line:

• Open the heading array with square brackets ([) and the fifth column heading with curly brackets (().
• We name the header "Set", indicate that it can be sorted (sortable) and specify the parameter "set", which corresponds to the definition of Set Form Tabs, which have "field":"set".
• End of Set / start of Description
• We name the header "Description", sortable and match it with the field description dataIndex.
• End Description / Start Image
• Name the header "Image", unsortable, and map it to the dataIndex - image field. We will also define a renderer that in ExtJS will allow you to change the appearance of the output data. In this case "this.renderImage" the renderer will automatically take the url of the selected image and render a thumbnail instead.
• The end of an Image object and an array of headers.

After that you can assign this MIGX TV to your template and check the result. Markup not showing? Go back to the tabs and make sure all values ​​are enclosed in double quotes and not single quotes and check for extra commas.

Information

To validate JSON, use JSONLint .

• Fill in the details
• Bring data to the site

Fill in our ws.image template variable with arbitrary data

If you try to display this data as a normal TV, you will see something like this:

[( "MIGX_id":"1","set":"set1","description":"Mark the cat, who steals sausage and eats when he is awake","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":"you can kill a man with this book","image":"demo/uroki/15/4.jpg" )]

This is a JSON array with entered fields and values!

Since MIGX comes with a getImageList snippet, you can try to display the data using it. Documentation for this snippet can be found here. Or make your own snippet (parseMIGXToGallery), which I use to generate markup from &tpl chunk based on TV data:

fromJSON($input); $output = array(); if (!$input || empty($tpl)) return "no stuff"; foreach ($input as $row) ( if (isset($set) && !empty($set) && ($set != $row["set"])) continue; $output = $modx->getChunk($ tpl, $row); ) return implode("\n", $output);

Let's go through each line:

• We take the $input variable (which takes the data contained in the &input parameter in the snippet call, more on that later) and parses the JSON into a php array.
• We will set an empty array to hold our output.
• Let's make sure that $input variable is not NULL or False, which would mean that JSON was not passed or that it is invalid, and also check if the $tpl variable (passed by the &tpl parameter in the snippet call) is not empty. If either condition is True we will print an "empty" error message, which will serve as a hint to the content manager that something is wrong.
• Next, iterate through each element of the $input array as a $row.
• We check if the $set variable is set (which is set in the snippet call in the &set parameter) and if it is not empty we check its value against the "set" value of the current row. If this is not what you want, move on to the next element in the array.
• We get a chunk named $tpl and insert the values ​​of the current row into it as placeholders.
• We close the foreach loop.
• Finally, we glue the $output array together, separating each element with a line break, and output it to the page.
• So to summarize the above, we take the input, go through each row and check if it belongs to the set that we have defined, then it gets a chunk and adds everything up to the output.
• Run snippet

All we need is a snippet call where we need our images and a chunk that will output everything in the right way for the FlexSlider. Here's how the snippet is called:

[]` &set=`set1` ]]

And the images.gallery.tpl chunk:

[[+description]]

You also need to wrap the entire snippet output in a div and an unordered list, according to the FlexSlider documentation. To make it all easier, let's put it all in one chunk. My chunk is called slider and contains the following:

Using this chunk, I can simply link to something in the content, which is much easier to remember or put into a cheat sheet.

[[$slider?set=`name of the set`]]

Now you can start laying out the FlexSlider.

Step 3: Using FlexSlider

FlexSlider is relatively easy to use (download its files) and there are tons of examples on its website. You also need to include the call to jQuery on the page and its CSS file (packed in a zip file) and the FlexSlider plugin (also in the zip archive). After that, you need to trigger the correct element using the following code:

The site advises to put everything in the head of the file, but I personally put it all at the bottom. If your slider is displayed at the top of the page, then it is better to place it in so that it loads before the page appears, so place it wherever you like.

That's all! I hope this long article will help someone get started using MIGX and sliders like FlexSlider!

Today a small article about how to create a slider in modx using the BanerY package. This package can be downloaded and installed from the repository.

Creating a slider with BanerY

And so there is a static slider, let it be a regular bootstrap slider, with this markup:

The goal is to create a managed slider from this markup. Let's get started.

Let's start with creating slides in BannerY, for this we go to Applications - BannerY - Positions and create a position (for example, home-slider).

After that, go to the Banners tab and click on the New banner button. A window for creating a new banner will open.

We fill everything:

• Name, it can be displayed using [[+name]].
• Select an image - [[+image]].
• Specify the URL where to go - [[+url]].
• Fill in the description - [[+description]] - here, by the way, you can charge not only text, but also regular html, and that's cool.
• Well, select the position (created it earlier).

And so we create the required number of slides.

Now you need to break the above markup into chunks and fit the code in the chunks to the BanerY syntax

Create a chunk for a separate slider with a class active, let it be slide and inject the syntax into it:

Now copy that chunk and give it a name slide2 and remove the class active

Well, it remains, in fact, only to display the slides.

[]

As a result, we get the following:

That's it) It's so easy to create a slider on modx using BanerY.

Yes, by the way, its documentation is here: docs.modx.pro/components/bannery/snippet

Slider Revolution is one of the most popular sliders due to its huge range of features and ease of use.
from ThemePunch. This slider has been bought 273,441+ times and is used by 2500000+ sites worldwide.

Listed below are some of the main advantages of this slider, which distinguishes it from free and
most premium analogues:

• Powerful visual editor - customize the slider display to suit the needs of your project through a convenient menu in which
  every function is in its place. Strict gradation will not allow you to get confused. The only difficulty in
  the first time will be the desire to try them all.
• Control of the variability of each slide - the planned display of blocks on the screen of a PC, tablet and phone
  shown in the visual editor. You can change the size of slides individually for each device.
  Responsive template will not allow pictures and videos to be distorted or take up more space than required for
  convenient viewing.
• Work with social networks and video hosting - Slider Revolution fifth generation allows you to include in the slider
  data from Instagramm, Facebook, Flickr, Twitter, Vimeo and Youtube. If you plan to post the video on your own
  server, you can use the HTML5 language. Parts of the code will be written automatically.
• High performance and slide optimization - the plugin works fast in edit mode and reduces
  the weight of the slider without losing the quality of the content. You don't have to worry about long page loading times. What is especially
  relevant in relation to mobile devices that are out of reach of WiFi connections.
• A huge number of special effects when transitioning slides
• Many animation effects when displaying text, video and pictures
• Starting the video automatically when opening the site or manually, to choose from, stopping the slider when watching the video,
  rewind, etc.
• Large selection of navigation settings
• Insert post announcements with links directly into the slider, while it is configured for seo optimization
• Support and installation of Google Fonts
• Using many layers (pictures, videos, captions and links) in one slide, there are countless of them
  overlay each other, thus creating a realistic video or any presentation.

Attention! In order to be able to download Online premium slider templates and library objects, you need to buy a separate license from ThemePunch, which at the time of writing this text costs $19, and then activate it by entering the purchase code in the field indicated in the figure below.

Video review modSliderRevolution

Today we'll look at how to create a Bootstrap slider using MIGX. Before starting the study, I recommend visiting this one first.

Creating a MIGX Configuration

I'm going to management MIGX and add a new element named slider, in the replacement field write " Add Slides"and go to the tab" Formtabs».

• Fieldname - title, Caption - Title.
• Fieldname - slide, Caption - Slide, Input TV Type - image.
• Fieldname - description, Caption - Description.
• Fieldname - idstranici, Caption - Specify the id of the document to link to.

• Header - Title, Field - title.
• Header - Slide, Field - slide, Renderer - this.renderImage.
• Header - Description, Field - description.
• Header - document id, Field - idpage.

Note: In essence, we are transferring elements from Formtabs. Yes, you can also fill in the fields Column width - the width of the columns.

Save (execute).

For those who do not want to bathe at all, we create an empty configuration and export the following code into it:

( "formtabs":[ ( "MIGX_id":1, "caption":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u044b", "print_before_tabs", "print_before_tabs" ":"0", "fields":[ ( "MIGX_id":1, "field":"title", "caption":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a" , "description":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u043b\u0430\u0439\u0434\u0430", "description_is_code":"0", "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", "validation":"" , "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config", "sources":"", "inputOptionValues":"", "default":"" , "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":"", "display":"", " 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\u0435\u043d\u0442\u0430 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f", "description":"", "description_is_code":"0", " 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\u0430\u0439\u0434\ 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":4 , "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":"" ), "columns":[ ( "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":"slide", "width":100, "sortable":"false", "show_in_grid":1, "customrenderer":"", "renderer":"this .renderImage", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" ), ( "MIGX_id":3, "header" :"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435", "dataIndex":"description", "width":200, "sortable":"false", "show_in_grid":1, "customrenderer ":"", "renderer":"", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" ), ( " 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": "")

Creating TV with MIGX configuration

In the MODX tree, on the " Elements”, press + opposite the point Additional fields" and enter the following:

• "Name" - slider; "Signature" - Slider.
• In the "Input Options" tab in the "Input Type" select migx, and in the "Configurations" field enter slider.
• In the "Available for templates" tab, select those templates for which input in this field will be available.

Data input

Let's open a document for which the slider field is assigned with MIGX with configuration and enter some data into it.

Bootstrap 3 carusel output to page

We have a standard Html markup getbootstrap.com/docs/3.3/javascript/#carousel-examples, remake it for MIGX and write the following code in the required place in the template:

And create chunks:

tplsliderIndicator:

and chunk tplsliderItem with the following content:

Bootstrap 4 carusel output per page

As in the previous case, we take the standard markup getbootstrap.com/docs/4.1/components/carousel/ and redo it, as a result we get

Where is the chunk tplsliderIndicator has the following code:

and chunk tplsliderItem with the following code: