Um tutorial abrangente sobre o módulo ColorBox para Drupal 9 (e como estendê-lo)

Publicados: 2020-09-29

As imagens desempenham um papel significativo na melhoria da experiência do usuário em um site. Um estudo mostra que 90% das informações que transmitimos ao nosso cérebro são visuais. Muitos sites contornam essa teoria por si só e bombardeiam os usuários com toneladas de mídia avançada, como imagens e arquivos de vídeo. A maioria deles ignora o aspecto da apresentação desses arquivos de mídia e acaba com uma experiência do usuário decepcionante. O que eles precisam é de uma ferramenta como o ColorBox, que é um plugin jQuery extremamente leve que permite exibir imagens de forma elegante e intuitiva. Os estilos e funcionalidades são altamente personalizáveis via CSS e Javascript. O módulo Drupal ColorBox é compatível com Drupal 6, 7, 8 e agora com Drupal 9 também! Neste artigo, você aprenderá como configurar, implementar e estender ainda mais o módulo ColorBox para Drupal 9.

ColorBox para Drupal

O módulo ColorBox se integra com o plugin ColorBox jQuery no Drupal. O plugin é uma caixa de luz leve e personalizável para jQuery. Entre os outros módulos “box” concorrentes que são usados para fins semelhantes (Thickbox, Lightbox2, Shadowbox, Greybox, etc.), o módulo ColorBox é o mais popular e tem o maior número de instalações. O uso do Drupal ColorBox não termina apenas com a exibição de imagens carregadas lindamente. Ele também oferece suporte a estilos de vídeos, PDFs, nó, taxonomia, formulários da web, conteúdo com iframes e muito mais. O estilo pode ser controlado por meio do CSS para que a aparência seja altamente personalizável. A funcionalidade também é facilmente personalizável por meio do arquivo JS sem a necessidade de tocar no HTML. Ele também suporta o agrupamento de fotos e pré-carrega as próximas imagens

Passos para instalar o módulo ColorBox

1.Instale o módulo ColorBox com o composer.

 composer require 'drupal/colorbox:^1.6'
composer require 'drupal/colorbox:^1.6'

2. Baixe o plugin ColorBox 1.x.
1. Usando o comando Drush
(Nota: Se você estiver usando o comando drush para instalar o plugin ColorBox, você deve habilitar o módulo e então executar o comando abaixo)

 drush colorbox-plugin
drush colorbox-plugin

2. Baixe manualmente o plugin ColorBox
Baixe o plugin Colorbox e descompacte em / libraries. Certifique-se de que o caminho para o arquivo do plug-in seja assim:

 “/libraries/colorbox/jquery.colorbox-min.js”
“/libraries/colorbox/jquery.colorbox-min.js”

3. Ative o módulo Drupal ColorBox.

 drush en -y colorbox
drush en -y colorbox

Parabéns! Agora você está pronto para usar os recursos do módulo ColorBox.

Configurando o Módulo ColorBox

Configure o módulo Drupal ColorBox navegando até Configuração -> Mídia -> Configurações do Colorbox .

Como criar uma galeria de imagens usando o ColorBox

1. Para fazer uma galeria de imagens, primeiro precisamos adicionar um campo de imagem para um dos tipos de conteúdo. Escolha o nome do rótulo e clique no botão Salvar e continuar.

2. A próxima etapa é definir as configurações do campo. Podemos adicionar a imagem padrão quando não houver imagens carregadas. Um texto alternativo para fins de acessibilidade e um título. O número permitido de configurações de valores diz limite máximo de upload para um campo. Selecione a opção desejada e clique no botão Salvar configurações do campo.

3. Em seguida, definiremos as outras configurações para os campos desta imagem, como Extensões de arquivo permitidas, Diretório de arquivos, Resolução máxima e mínima da imagem, Tamanho máximo de upload, alt e título para a imagem e clique em salvar configurações.

4. Agora, concluímos a configuração do campo de imagem. Vamos definir a opção de formatação para o campo de imagem criado para ColorBox. Navegue até Gerenciar exibição do tipo de conteúdo e, a seguir, defina a opção de formato na lista suspensa como ColorBox. Clicar na engrenagem ao lado da opção de formato nos permite personalizar a imagem exibida. Assim que todas as opções forem atualizadas, clique no botão atualizar e, em seguida, clique na opção salvar.

5. Agora vamos adicionar algum conteúdo em nossa galeria de imagens ColorBox clicando em Adicionar conteúdo. Podemos alterar a ordem das imagens carregadas com base nos pesos das imagens. Em seguida, clique no botão Salvar. A exibição do conteúdo será semelhante a abaixo.

6. Por fim, clicar em qualquer uma das imagens exibe a imagem dentro do modal ColorBox como mostrado abaixo.

Você também pode fazer o mesmo com o campo incorporado de vídeo.

Como Integrar com o Módulo ColorBox Inline

O módulo Colorbox Inline permite ao usuário abrir o conteúdo que já está na página dentro do ColorBox.

1. Instale o módulo embutido colorbox

 composer require 'drupal/colorbox_inline:^1.2'
composer require 'drupal/colorbox_inline:^1.2'

2. Habilite o módulo usando o comando drush / Habilite manualmente por meio da IU drupal

 drush en -y colorbox_inline
drush en -y colorbox_inline

3. Abra a imagem no modal ColorBox que está na página usando um link

4. Navegue para adicionar conteúdo -> Qualquer tipo de conteúdo que tenha o campo de corpo

Altere o formatador de texto de html básico para html completo

6. Em seguida, clique no botão Salvar.

Aqui no exemplo acima, o atributo data-colorbox-inline da tag âncora também pode conter o nome da classe em vez do id. ver imagem é um link onde abre uma imagem já existente em uma página (modifique as mudanças de acordo com os requisitos do seu projeto). Podemos usar este módulo para renderizar qualquer conteúdo - vídeo, formulário da web, etc., de maneira semelhante.

Ao visualizar esta página, você pode ver um link com a imagem. E ao clicar no link visualizar imagem, um pop-up ColorBox aparecerá conforme mostrado na imagem abaixo.

Como integrar o ColorBox com o módulo de carregamento do ColorBox

O módulo ColorBox Load permite aos usuários carregar o conteúdo no ColorBox usando Ajax. Com este módulo, os usuários podem especificar uma série de caminhos que, quando renderizados, abrirão um ColorBox com o conteúdo. Depende do módulo NG Lightbox para interface de administração de caminhos. Este método pode ser usado para renderizar nós, páginas, formulários da web e muito mais.
Instale o módulo de carregamento do colorbox

 composer require 'drupal/colorbox_load:^1.2'
composer require 'drupal/colorbox_load:^1.2'

Habilite o módulo usando o comando drush / Habilite manualmente por meio da IU drupal

 drush en -y colorbox_load
drush en -y colorbox_load

Implementando um pop-up de login usando o módulo ColorBox Load .

1. Configure o módulo ColorBox Load navegando até Configuration -> Ng Lightbox (Under Media). Podemos configurar os caminhos para os quais queremos fornecer a exibição modal ColorBox, largura do modal ColorBox, classe para o modal lightbox e opções de renderizador. (Escolha sua opção conforme desejado).

2. Agora podemos ver o modal Drupal ColorBox implementado para a página de login, clicando no botão de login na página inicial.

Como integrar ColorBox com visualizações Drupal

Para alguns sites, podemos precisar de um recurso que pode exibir um modal ColorBox para uma lista de imagens. Isso pode ser feito com a ajuda do módulo Views.
1. Vá para estrutura -> visualizações -> adicionar visualização.
2. Adicione o campo de imagem para visualizar e configurar o formatador para ColorBox e outras configurações de acordo e, em seguida, salve a visualização.

3. Agora dê uma olhada na visão que você acabou de criar (no meu caso, criei uma visão como uma página). Você pode ver uma lista de imagens e ao clicar em uma delas, a imagem individual é exibida na janela pop-up ColorBox.