Carrossel de imagens Modx na página do produto. grande e assustador

Olá comunidade!

Nesta nota, você aprenderá o que são Multiple Formtabs e como criar uma configuração com um conjunto de dados diferente. E claro, vamos criar um slider com você que terá diversos tipos de slides, e no final você encontrará um slider bem história interessante que por muito tempo não ousei contar a ninguém (a menos, claro, que você esteja interessado, mas a história é interessante - acredite em mim). E assim, exemplos de slides:

• Imagem de fundo
• Plano de fundo do vídeo
• fundo de cor sólida

Atenção! Desta vez, não retire crianças e gestantes das telas, pois isso é algum tipo de discriminação por idade e sexo!

É assim que vai ser

Outro anúncio! Muitas vezes me referirei à primeira lição para não me repetir, por isso recomendo fortemente que você se familiarize com

Pelo que?

Vamos fantasiar: Você pega um projeto onde, por exemplo, na página principal tem um slider com vários tipos de slides, um tem um fundo de vídeo, outro tem uma foto, e o terceiro tem uma cor sólida, por exemplo. Você não vai criar um conjunto de campos (uma configuração) e amontoar (desculpe o léxico) todos esses campos nele e dizer ao gerente como viver com isso e ser. não é atitude séria!? (espero que alguém entenda)

pela causa

Nós entendemos o "porquê" com você, agora vamos descobrir o "como". Se você já leu a primeira lição, precisamos ir para a página do componente MIGX e criar 3 configurações. Pré-instalar o ColorPicker da Jako (mas não importa):

Tudo que não for indicado por mim, pule!

configuração sólida (cor sólida)

• Aba Definições
  • Nome- sólido
  • Adicionar nova categoria- Controle deslizante
• Aba Guias de formulário
  • Campos Campos criar 3 campos
    1. Cor de fundo:
       • nome do campo-bgcolor
       • Rubrica- Selecione a cor de fundo
       • Tipo de TV de entrada- ColorPicker (ou aquele que você
         usar)
    2. Título:
       • nome do campo cabeçalho
       • Rubrica- Título do slide
    3. Descrição:
       • nome do campo- Descrição
       • Rubrica- Descrição do diapositivo
       • Tipo de TV de entrada-textarea
  • Campo Múltiplos Formtabs-modelo( valor dado será o nome da chave em
    matriz de saída. Padrão: MIGX_formname)
  • - Com uma cor sólida no fundo (Texto
    esta configuração na lista de seleção)
  • - sólido (O valor do campo do mesmo tipo
    em matriz)

configuração de vídeo

• Aba Definições
  • Nome- vídeo
  • Categoria- Controle deslizante
• Aba Guias de formulário
  • Campos- Criar 1 aba e no campo Campos novamente, criamos 3 campos, apenas um desses campos é de um tipo diferente.

    Devo esclarecer aqui que o número de campos e seus tipos em diferentes configurações podem ser tão diferentes quanto sua imaginação é limitada ... Mas eu sei que está tudo em ordem com suas fantasias?

    1. Vídeo (ou seja, arquivo):
       • nome do campo- vídeo
       • Rubrica- Envio vídeo
       • Tipo de TV de entrada- Arquivo
    2. Título:
       • nome do campo cabeçalho
       • Rubrica- Título do slide
    3. Descrição:
       • nome do campo- Descrição
       • Rubrica- Descrição do diapositivo
       • Tipo de TV de entrada-textarea
  • Campo Múltiplos Formtabs- modelo
  • Múltiplas abas de formulário Optionstext- Com vídeo em segundo plano
  • Múltiplas abas de formulário Optionsvalue- vídeo

configuração do controle deslizante

Por padrão, aceitará uma imagem e será uma espécie de configuração principal.

• Aba Definições
  • Nome- controle deslizante
  • Categoria- Controle deslizante
  • Substitua "Adicionar item"- Adicionar diapositivo
  • Legenda do formulário
  • título da janela- Adicionar/editar slide
• Aba Guias de formulário
  • Campos- Crie 1 aba e no campo Campos crie novamente 3 campos
    1. Imagem:
       • nome do campo- imagem
       • Rubrica- Carregar uma imagem
       • Tipo de TV de entrada- imagem
       • Especifique a fonte dos arquivos que você precisa, descrevi esta tarefa na primeira lição
    2. Título:
       • nome do campo cabeçalho
       • Rubrica- Título do slide
    3. Descrição:
       • nome do campo- Descrição
       • Rubrica- Descrição do diapositivo
       • Tipo de TV de entrada-textarea
  • Múltiplas abas de formulário- Aqui está a mágica, precisamos selecionar as configurações criadas nas etapas anteriores, incluindo a que estamos criando no momento, ou seja, selecione vídeo, sólido e deslizante

    Configurações controle deslizante não estará na lista, porque na verdade ainda não foi criado, então você precisará percorrer os pontos restantes, salvar a configuração, abrir novamente esta configuração para edição e desta vez estará disponível na lista controle deslizante

    
    

    Mais um esclarecimento: as configurações serão ordenadas exatamente na ordem que você escolheu, ou seja, por padrão, ao adicionar um novo slide, será selecionado aquele que será o primeiro da lista
    

  • Rótulo de Múltiplos Formtabs- Selecione o tipo de slide (o texto é indicado aqui
    que o usuário verá ao lado da lista de seleção do tipo de slide)
  • Campo Múltiplos Formtabs- modelo
  • Múltiplas abas de formulário Optionstext- Com uma imagem no fundo
  • Múltiplas abas de formulário Optionsvalue- imagem
• Aba colunas
  • Campo Colunas. Adicionando dois elementos
    1. cabeçalho
       • Aba Coluna
         • cabeçalho- Título
         • campo cabeçalho
       • Aba Editor de células
         • editor- this.editor de texto
    2. Descrição
       • Aba Coluna
         • cabeçalho- Descrição
         • campo- Descrição
       • Aba Editor de células
         • editor- this.editor de texto

Como você já percebeu, nas duas primeiras configurações não criamos as chamadas colunas para saída no painel de controle, ou seja, ao editar o próprio parâmetro da TV. Essas colunas devem ser criadas no último, ou seja, na configuração que será indicada na TV e na qual no campo Múltiplas abas de formulário aba Guias de formulário todas as configurações que precisamos serão listadas, incluindo a própria configuração

Vamos criar rapidamente uma TV com entrada tipo migx , no campo Configurações escreva o nome da nossa configuração, ou seja, slider , atribua os modelos necessários e abra o recurso para edição ou crie-o. Se fizermos tudo certo, veremos a seguinte imagem:

A imagem é clicável, e se você já assistiu o gif do link no início da nota, então este é o tal

Preenchemos rapidamente os dados e passamos para a saída de nossos slides.

Como retirar?

A entrada de dados é boa, mas e a saída? Não se preocupe camaradas, tudo ficará bem. Para saída, novamente temos 2 boas opções e consideramos ambas as opções em , este é um snippet MIGX nativo getImageList e todo poderoso fenômeno. Vamos ver como nossos dados se parecem:

getImageList

Vamos chamar o snippet sem especificar o parâmetro tpl para ver os dados brutos:

[] Array ( => 14 => imagem => arquivos/avatar.png => Este é um slide com uma imagem => Bem, breve descrição) [_alt] => 0 [_first] => 1 [_last] => => 1 = > slider) Array ( => 15 => video => arquivos/Minha casa é vergonhosa.MOV => E isso é um vídeo => Sim, de fato! [_alt] => 1 [_first] => [ _last] => => 2 => slider) Array ( => 16 => solid => ff0000 => E o vermelho é uma cor linda aqui => eu gosto! [_alt] => 0 [_first] => [_last ] => 1 => 3 = > controle deslizante)

fenômeno

($_modx->resource.slider| fromJSON | print) Array ( => Array ( => 14 => image => files/avatar.png => Este é um slide de imagem => Bem, breve descrição)) => Array ( => 15 => vídeo => arquivos/Minha casa é vergonhosa.MOV => E isso é um vídeo => Sim, de fato!) => Array ( => 16 => sólido => ff0000 => E aqui é vermelho uma cor linda => eu gosto!))
Como podemos ver, em nossos arrays, entre outras coisas, a chave modelo com os valores que especificamos ao criar as configurações.

Para exibir nosso controle deslizante com getImageList, precisamos criar 3 blocos com os nomes de nossos valores-chave modelo, ou seja: imagem , vídeo e sólido . Além disso, você entenderá o porquê.

Exemplos de pedaços:

// Pedaço de imagem

// Pedaço de vídeo // Pedaço sólido
E a chamada deve ficar assim:

Aqui pegamos valores das matrizes de cada slide e, portanto, criamos três blocos cujos nomes correspondem aos valores do campo Campo Múltiplos Formtabs

Bem, em fenômeno tudo parece muito mais simples:

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

(/E se)

Resultado e história prometida

Como podemos ver, o MIGX dá conta dessa tarefa, senão para dizer "excelente", mas pelo menos "bom". Repito mais uma vez que o MIGX não te limita na quantidade de configurações, abas em cada configuração e na quantidade de campos nelas. E os exemplos, como você já deve ter entendido, são bastante simples para que você também possa se familiarizar com essa funcionalidade. E outra coisa importante: na saída de chunks, recomendo fortemente verificar a plenitude dos campos e sempre levar em consideração que os dados podem ou não estar preenchidos ou por algum motivo podem não vir e, portanto, use filtros phx para a sintaxe MODX ou condições em fenom.

Obrigado a todos pela atenção, gostaria de desejar boa sorte a todos, mas não vou, porque como dizem: “Deseje boa sorte aos perdedores”, então desejo felicidades e saúde ou algo assim, mas quem se importa, então o história.

Uma vez meus parentes vieram nos visitar, entre eles meu sobrinho (filho da minha irmã) de país vizinho e meus dois sobrinhos (somos quase todos da mesma idade). Casa de campo, ensolarada Ásia Central, uma pequena montanha e um rio próximo. Naquela mesma noite, nós quatro decidimos dar um passeio ao longo deste mesmo rio, e a princípio tudo estava calmo, não havia motivos para agitação. Eles se divertiram muito, contaram histórias (às vezes assustadoras e assustadoras), brincaram e coisas assim. Mas, a certa altura, notei que um de meus sobrinhos empalideceu e isso não é apenas uma mudança verbal ou embelezamento, porque nunca vi tanto medo e perplexidade no rosto de uma pessoa antes e depois desse incidente. Sem tirar os olhos, ele olhou na direção em que eu estava de costas, ou seja, ele parecia estar olhando para algo ou alguém atrás de mim, mas não diretamente atrás e perto, parecia-me que ele estava olhando para algum lugar distante. Foi assustador e eu perguntei a ele: - O que aconteceu? E ele…

Este parágrafo terá que fingir que a história desta nota tem uma continuação, mas na verdade eu só te enganei um pouco, esperando poder animá-lo um pouco com o texto técnico, chato e grande e você ficará em um bom humor. A história em si é real e muito interessante. Agora, obrigado a todos pela atenção!

UPD:
Se o que eu sou Baha!?

Se de repente alguém quiser agradecer o rublo, que assim seja: cartão Sberbank +79609354545

Nesta lição, abordaremos os fundamentos do MIGX e trabalharemos em um novo controle deslizante que você pode usar em seu blog.

Requisitos:

• Site do MODX Revolution.
• Tipo de variável de modelo personalizado MIGX instalado (via gerenciamento de pacote).
• Slider ou script da galeria que gostaríamos de integrar. Eu usei o FlexSlider da WooThemes porque ele se ajusta para caber na largura do container (muito importante para design responsivo!). Também é altamente configurável, oferece suporte à rolagem em smartphones e tem uma aparência perfeita assim que sai da caixa.
• Snippet phpthumbof instalado por meio do Gerenciador de Pacotes para recorte automático de imagens.
• Qualquer imagem!

Começando

A obra utiliza várias partes. Primeiro precisamos instalar o MIGX TV e pegar esses dados do front-end e fazer nosso controle deslizante funcionar. Este tutorial pressupõe o uso do FlexSlider, garantiremos que a marcação seja o que ele precisa, mas também deve ser muito fácil de adaptar a outros controles deslizantes.

Passo 1: Instale o MIGX TV para gerenciamento de imagens

Vamos começar configurando a TV. A força do MIGX é que você pode definir os campos de que precisa. Você os verá como uma tabela e só precisará nomear os títulos. Neste caso, precisarei de três campos diferentes:

• Campo de entrada para selecionar uma imagem no sistema de arquivos (ou em 2.2 de suas fontes de mídia).
• Campo de entrada de texto para inserir uma legenda/tag/descrição. O FlexSlider faz um ótimo trabalho com legendas, então vamos usá-las.
• Também adicionei entrada de texto para "Set". Como veremos mais tarde, vou usá-lo para um número infinito de controles deslizantes individuais que serão adicionados de qualquer lugar do recurso.

Você pode usar outros campos se quiser, mas o tutorial usará exatamente os campos que listei acima.

Vamos passar para a criação de TV. Aqui está um controle deslizante com descrições das imagens (caso nada esteja visível na miniatura).

Crie uma nova variável de modelo na guia Elementos e dê a ela um nome apropriado. Vou chamá-lo de ws.images, se você der seu próprio nome, não se esqueça de substituir [[*ws.images]] pelo seu nome. Na guia Opções de entrada, selecione o tipo "migx" no menu suspenso. Se você não vir esse tipo, verifique se instalou o pacote MIGX por meio do Gerenciador de pacotes. Você notará que várias opções foram adicionadas na parte inferior da tela, incluindo guias de formulário e colunas de grade. Isso se aplica ao MODX >2.0, para versões anteriores, recomendo atualizar.

Observe que os campos Guias de formulário e Colunas de grade devem ser preenchidos com strings JSON válidas. JSON é basicamente uma maneira de exibir objetos, matrizes ou combinações de chave -> valor de uma forma compatível com quase todas as linguagens de programação. Aqui está a especificação técnica e alguns exemplos do site JSON oficial.

Definindo guias de formulário

O formulário permite que você use diferentes guias. Cada guia possui uma descrição e vários campos. Você pode fazer muitas coisas avançadas com isso, pois estará usando uma única guia na maioria das vezes, então lembre-se por enquanto. Aqui está o código JSON para as guias de formulário que estou usando:

[("caption":"Imagem", "fields": [ ("field":"set","caption":"Set"), ("field":"description","caption":"Description") , ("campo":"imagem","caption":"Imagem","inputTVtype":"imagem") ] )]

Vamos a cada linha:

• A primeira mostra a abertura do array de abas com um colchete ([), e o objeto de abertura da aba com um colchete ((). Depois disso, definimos a legenda do campo Imagem. Observe que você precisa usar aspas duplas (" ") para propriedades e seus valores, as simples podem levar a resultados inesperados.Se você tiver esses colchetes em quaisquer propriedades, valores, escape-os com uma barra (\).Após definir a descrição (legenda), vamos continuar e começar a definir o array de "campos", abrindo-o com colchetes ([) .
• Vamos definir nosso primeiro campo como set. "field": "set" significa que queremos ter entrada de texto simples neste campo. “Legenda”:”Conjunto” - damos uma descrição do nome "conjunto" - este será o nome para inserir texto simples. Em seguida, dê a ele a legenda "Set", que será mostrada no formulário como um rótulo de campo.
• Em seguida, defina o campo de descrição da mesma forma
• A linha 4 define a imagem. O que há de especial aqui é que estamos usando outra TV (chamada "imagem") como o tipo de entrada. Este é um recurso muito forte do MIGX que permite que você use outras TVs para construir sua forma. Neste caso, a TV de "imagem" é muito simples: o tipo de entrada é imagem e, em 2.2, você pode atribuí-la à fonte de mídia correta. Você não precisa associá-lo a modelos como faria com a TV normal. Outra maneira de fazer isso (que eu uso em outras TVs MIGX) é criar caixas de rádio ou caixas de seleção.
• A quinta linha fecha a matriz de campos. Observe também que a última linha que define o campo (imagem) não termina com vírgula - isso é importante! Se você colocar uma vírgula em uma matriz, o JSON não será analisado e seu formulário não funcionará.
• A sexta linha fecha o objeto tab e todo o array de tabs.

Então, desta forma, criamos TV "imagem"! Você já deve ter um formulário para preencher os dados, mas precisa de uma marcação para mostrá-lo...

Definindo a marcação da coluna

O layout da coluna é uma tabela no painel de TV do recurso. Você precisa definir os cabeçalhos para esta tabela por meio das opções de entrada Marcação de Coluna. Aqui está a definição (JSON novamente) do que estou usando: [( "header": "Set", "sortable": "true", "dataIndex": "set" ),( "header": "Description" , "sortable" : "true", "dataIndex": "description" ),( "header": "Image", "sortable": "false", "dataIndex": "image","renderer": "this. renderImage" )]

Vamos a cada linha:

• Abra a matriz de cabeçalho com colchetes ([) e o cabeçalho da quinta coluna com colchetes (().
• Nomeamos o cabeçalho "Set", indicamos que ele pode ser classificado (classificável) e especificamos o parâmetro "set", que corresponde à definição de Set Form Tabs, que possuem "field":"set".
• Fim do Conjunto / início da Descrição
• Nomeamos o cabeçalho "Descrição", classificável e combinamos com a descrição do campo dataIndex.
• Descrição Final / Imagem Inicial
• Nomeie o cabeçalho "Imagem", não classificável, e mapeie-o para o dataIndex - campo de imagem. Também definiremos um renderizador que no ExtJS permitirá alterar a aparência dos dados de saída. Neste caso, "this.renderImage" o renderizador irá automaticamente pegar a url da imagem selecionada e renderizar uma miniatura.
• O fim de um objeto Image e uma matriz de cabeçalhos.

Depois disso, você pode atribuir esta TV MIGX ao seu modelo e verificar o resultado. A marcação não está aparecendo? Volte para as guias e verifique se todos os valores estão entre aspas duplas e não simples e verifique se há vírgulas extras.

Em formação

Para validar JSON, use JSONLint .

• Preencha os detalhes
• Trazer dados para o site

Preencha nossa variável de modelo ws.image com dados arbitrários

Se você tentar exibir esses dados como uma TV normal, verá algo assim:

[( "MIGX_id":"1","set":"set1","description":"Marque o gato, que rouba linguiça e come quando está acordado","image":"demo/uroki/15/1 .jpg" ),( "MIGX_id":"2","set":"set1","description":"tambor","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":"você pode matar um homem com este livro","image":"demo/uroki/15/4.jpg" )]

Esta é uma matriz JSON com campos e valores inseridos!

Como o MIGX vem com um trecho getImageList, você pode tentar exibir os dados usando-o. A documentação para este snippet pode ser encontrada aqui. Ou crie seu próprio snippet (parseMIGXToGallery), que uso para gerar marcação de &tpl chunk com base em dados de TV:

deJSON($input); $saída = array(); if (!$input || empty($tpl)) return "sem coisas"; foreach ($input as $row) ( if (isset($set) && !empty($set) && ($set != $row["set"])) continue; $output = $modx->getChunk($ tpl, $linha); ) return implode("\n", $saída);

Vamos a cada linha:

• Pegamos a variável $input (que pega os dados contidos no parâmetro &input na chamada do snippet, falaremos mais sobre isso depois) e analisamos o JSON em uma matriz php.
• Vamos definir uma matriz vazia para armazenar nossa saída.
• Vamos verificar se a variável $input não é NULL ou False, o que significaria que o JSON não foi passado ou é inválido, e também verificar se a variável $tpl (passada pelo parâmetro &tpl na chamada do snippet) não está vazia. Se qualquer uma das condições for verdadeira, imprimiremos uma mensagem de erro "vazia", ​​que servirá como uma dica para o gerenciador de conteúdo de que algo está errado.
• Em seguida, percorra cada elemento da matriz $input como uma linha $.
• Verificamos se a variável $set está definida (que é definida na chamada do snippet no parâmetro &set) e, se não estiver vazia, verificamos seu valor em relação ao valor "set" da linha atual. Se não for isso que você deseja, passe para o próximo elemento da matriz.
• Obtemos um pedaço chamado $tpl e inserimos os valores da linha atual nele como espaços reservados.
• Fechamos o loop foreach.
• Por fim, colamos o array $output junto, separando cada elemento com uma quebra de linha e o enviamos para a página.
• Então, para resumir o que foi dito acima, pegamos a entrada, passamos por cada linha e verificamos se ela pertence ao conjunto que definimos, então pegamos um pedaço e adicionamos tudo à saída.
• Executar trecho

Tudo o que precisamos é de uma chamada de snippet onde precisamos de nossas imagens e um pedaço que produzirá tudo da maneira certa para o FlexSlider. Veja como o trecho é chamado:

[]` &set=`set1` ]]

E a parte images.gallery.tpl:

[[+descrição]]

Você também precisa agrupar toda a saída do trecho em um div e uma lista não ordenada, de acordo com a documentação do FlexSlider. Para tornar tudo mais fácil, vamos colocar tudo em um bloco. Meu pedaço é chamado slider e contém o seguinte:

Usando esse pedaço, posso simplesmente criar um link para algo no conteúdo, o que é muito mais fácil de lembrar ou colocar em uma folha de dicas.

[[$slider?set=`nome do conjunto`]]

Agora você pode começar a desenhar o FlexSlider.

Etapa 3: Usando o FlexSlider

O FlexSlider é relativamente fácil de usar (baixe seus arquivos) e há vários exemplos em seu site. Você também precisa incluir a chamada para jQuery na página e seu arquivo CSS (empacotado em um arquivo zip) e o plugin FlexSlider (também no arquivo zip). Depois disso, você precisa acionar o elemento correto usando o seguinte código:

O site aconselha colocar tudo no cabeçalho do arquivo, mas eu pessoalmente coloco tudo no final. Se o seu controle deslizante for exibido na parte superior da página, é melhor colocá-lo em para que ele carregue antes que a página apareça, então coloque-o onde quiser.

Isso é tudo! Espero que este longo artigo ajude alguém a começar a usar o MIGX e controles deslizantes como o FlexSlider!

Hoje um pequeno artigo sobre como criar um slider no modx usando o pacote BanerY. Este pacote pode ser baixado e instalado a partir do repositório.

Criando um controle deslizante com o BanerY

E então há um controle deslizante estático, seja um controle deslizante de bootstrap regular, com esta marcação:

O objetivo é criar um controle deslizante gerenciado a partir dessa marcação. Vamos começar.

Vamos começar criando slides no BannerY, para isso vamos em Aplicativos - BannerY - Posições e criamos uma posição (por exemplo, controle deslizante inicial).

Depois disso, vá para a guia Banners e clique no botão Novo banner. Uma janela para criar um novo banner será aberta.

Nós preenchemos tudo:

• Nome, pode ser exibido usando [[+nome]].
• Selecione uma imagem - [[+imagem]].
• Especifique a URL para onde ir - [[+url]].
• Preencha a descrição - [[+descrição]] - aqui, aliás, você pode cobrar não só texto, mas também html normal, e isso é legal.
• Bem, selecione a posição (criada anteriormente).

E assim criamos o número necessário de slides.

Agora você precisa dividir a marcação acima em partes e ajustar o código nas partes à sintaxe do BanerY

Crie um bloco para um controle deslizante separado com uma classe ativo, deixe estar slide e injetar a sintaxe nele:

Agora copie esse pedaço e dê um nome a ele slide2 e remover a classe ativo

Bem, resta, na verdade, apenas exibir os slides.

[]

Como resultado, obtemos o seguinte:

É isso) É muito fácil criar um controle deslizante no modx usando o BanerY.

Sim, a propósito, sua documentação está aqui: docs.modx.pro/components/bannery/snippet

O Slider Revolution é um dos sliders mais populares devido à sua enorme variedade de recursos e facilidade de uso.
de ThemePunch. Este controle deslizante foi comprado mais de 273.441 vezes e é usado por mais de 2.500.000 sites em todo o mundo.

Listadas abaixo estão algumas das principais vantagens deste slider, que o distingue dos gratuitos e
a maioria dos análogos premium:

• Editor visual poderoso - personalize a exibição do controle deslizante para atender às necessidades do seu projeto por meio de um menu conveniente no qual
  cada função está em seu lugar. A gradação estrita não permitirá que você fique confuso. A única dificuldade em
  a primeira vez será o desejo de experimentá-los todos.
• Controle da variabilidade de cada slide - a exibição planejada de blocos na tela de um PC, tablet e telefone
  mostrado no editor visual. Você pode alterar o tamanho dos slides individualmente para cada dispositivo.
  O modelo responsivo não permitirá que fotos e vídeos sejam distorcidos ou ocupem mais espaço do que o necessário para
  visualização conveniente.
• Trabalhe com redes sociais e hospedagem de vídeo - Slider Revolution de quinta geração permite incluir no slider
  dados do Instagramm, Facebook, Flickr, Twitter, Vimeo e Youtube. Se você planeja postar o vídeo por conta própria
  servidor, você pode usar a linguagem HTML5. Partes do código serão escritas automaticamente.
• Alto desempenho e otimização de slides - o plugin funciona rápido no modo de edição e reduz
  o peso do slider sem perder a qualidade do conteúdo. Você não precisa se preocupar com os longos tempos de carregamento da página. O que é especialmente
  relevante em relação a dispositivos móveis que estão fora do alcance de conexões WiFi.
• Um grande número de efeitos especiais ao fazer a transição de slides
• Muitos efeitos de animação ao exibir texto, vídeo e imagens
• Iniciando o vídeo automaticamente ao abrir o site ou manualmente, a escolher, parando o slider ao assistir o vídeo,
  retroceder, etc
• Grande seleção de configurações de navegação
• Insira anúncios de postagem com links diretamente no controle deslizante, enquanto ele estiver configurado para otimização de SEO
• Suporte e instalação do Google Fonts
• Usando muitas camadas (fotos, vídeos, legendas e links) em um slide, existem inúmeras delas
  se sobrepõem, criando assim um vídeo realista ou qualquer apresentação.

Atenção! Para poder baixar modelos de slider premium online e objetos de biblioteca, você precisa comprar uma licença separada do ThemePunch, que no momento da redação deste texto custa US $ 19, e ativá-la inserindo o código de compra no campo indicado em a figura abaixo.

Revisão de vídeo modSliderRevolution

Hoje veremos como criar um slider Bootstrap usando MIGX. Antes de iniciar o estudo, recomendo visitar este primeiro.

Criando uma configuração MIGX

vou para a gerencia MIGX e adicione um novo elemento chamado controle deslizante, no campo de substituição escreva " Adicionar slides"e vá para a aba" Guias de formulário».

• Nome do campo - título, legenda - título.
• Nome do campo - slide, Legenda - Slide, Tipo de TV de entrada - imagem.
• Nome do campo - descrição, legenda - descrição.
• Fieldname - idstranici, Caption - Especifique o id do documento ao qual vincular.

• Cabeçalho - Título, Campo - título.
• Cabeçalho - Slide, Campo - slide, Renderizador - this.renderImage.
• Cabeçalho - Descrição, Campo - descrição.
• Cabeçalho - id do documento, Campo - idpage.

Observação: Em essência, estamos transferindo elementos de Formtabs. Sim, você também pode preencher os campos Largura da coluna - a largura das colunas.

Salvar (executar).

Para quem não quer tomar banho de jeito nenhum, criamos uma configuração vazia e exportamos o seguinte código para ela:

( "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" , "descrição":"\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 ", "legenda" :"\u0421\u043b\u0430\u0439\u0434", "descrição":"", "description_is_code":"0", "inputTV":"", "inputTVtype":"imagem", " validação":"" , "configs":"", "condição_restritiva":"", "display":"", "sourceFrom":"config", "sources":"", "inputOptionValues":"", " default":"" , "useDefaultIfEmpty":"0", "pos" :2 ), ( "MIGX_id":3, "campo":"descrição", "legenda":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435", "descrição":"", " 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", "descrição":"", "descrição_é_código":"0", " inputTV":"", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config", " sources":"", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":4 ) ], "pos":1 ) ], "contextmenus":"" , "botões de ação":"", "botão de coluna s":"", "filtros":"", "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":"sim", "getlistwhere":"", "joins":"", "hooksnippets":"", "cmpmaincaption" :"", "cmptabcaption":"", "cmptabdescription":"", "cmptabcontroller":"", "winbuttons ":"", "onsubmitsuccess":"", "submitparams":"" ), "colunas":[ ( "MIGX_id":1, "cabeçalho":"\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":"este .renderImage", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" ), ( "MIGX_id":3, "cabeçalho" :"\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, "cabeçalho":"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": "")

Criando TV com configuração MIGX

Na árvore MODX, na página " elementos", pressione + oposto ao ponto Campos adicionais" e digite o seguinte:

• "Nome" - controle deslizante; "Assinatura" - controle deslizante.
• Na guia "Opções de entrada" em "Tipo de entrada", selecione migx e, no campo "Configurações", digite controle deslizante.
• Na guia "Disponível para modelos", selecione os modelos para os quais a entrada neste campo estará disponível.

entrada de dados

Vamos abrir um documento para o qual o campo deslizante é atribuído com MIGX com configuração e inserir alguns dados nele.

Bootstrap 3 saída do carrossel para a página

Temos uma marcação Html padrão getbootstrap.com/docs/3.3/javascript/#carousel-examples, refaça-a para MIGX e escreva o seguinte código no local necessário no modelo:

E crie pedaços:

tplsliderIndicator:

e pedaço tplsliderItem com o seguinte conteúdo:

Bootstrap 4 saída de carrossel por página

Como no caso anterior, tomamos a marcação padrão getbootstrap.com/docs/4.1/components/carousel/ e refazê-lo, como resultado, obtemos

Onde está o pedaço tplsliderIndicator tem o seguinte código:

e pedaço tplsliderItem com o seguinte código: