Documentação Droppics

 

Introdução

Droppics é uma extensão do Joomla usada para gerar galerias e gerenciar imagens de maneira inteligente e produtiva.

 

Droppics-main

Principais características:

  • Crie uma galeria com uma mesa de luz com apenas 3 cliques
  • Use Droppics no editor e no frontend
  • Gerenciar vídeos entre imagens
  • Upload múltiplo de AJAX
  • Geração de miniaturas no upload
  • Exibir personalização sem CSS
  • Regenere imagens de tamanhos originais e personalizados
  • Tema de design da galeria incluído
  • Galerias multi-nível
  • Encomende imagens e galerias com arrastar e soltar
  • SEO otimizado

 

I. DROPPICS INSTALAR

1.1 Instale

Nosso componente é compatível com o Joomla 3.x. Todos os recursos e integrações de terceiros estão incluídos em todas as associações.
Para instalar nosso componente, você precisa baixar o arquivo .zip e usar o instalador padrão do Joomla.

 

joomla-install

 

Em seguida, clique no botão Browse> Upload & Install. O componente, módulos e plugins serão instalados e ativados por padrão.

 

1.2 Atualização e atualizador automático

Para atualizar a extensão, você pode instalar uma nova versão sobre a antiga baixando o arquivo .zip do JoomUnited ou use o atualizador automático (recomendado).

 

droppic-update

 

O atualizador automático, que envia a notificação de atualização, está embutido na extensão do Joomla que você instalou. Você será notificado como em qualquer outra extensão no painel ou poderá verificar manualmente usando o menu: Extensão> Gerenciar> menu Atualizar.

 

Faça login na sua conta para atualizar

Você precisa fazer login em sua conta do JoomUnited para atualizar todas as suas extensões do JoomUnited Joomla. Para efetuar login, acesse a configuração principal do componente e, em seguida, clique no Guia de atualização ao vivo. Na parte inferior, você encontrará um botão de login.

 

atualização ao vivo

 

Insira suas mesmas credenciais do JoomUnited que você usa para fazer login em www.joomunited.com

 

login-joomunited

 

O botão ficará laranja - parabéns! Agora você pode atualizar todas as extensões do JoomUnited neste site! Se sua assinatura expirar, você receberá um link de renovação e um texto explicando isso.

 

conta vinculada

 

Nota: um único login permitirá que você atualize todas as extensões do JoomUnited (referentes à sua associação). O login não expirará, a menos que você o desconecte.

II. GALERIAS DROPPICS

A idéia principal do Droppics é definir parâmetros de imagem e galerias no componente e gerenciá-los diretamente do editor. O Droppics funciona em todos os editores WYSIWYG padrão do Joomla, tanto para o frontend quanto para o backend. Por exemplo, você pode adicionar uma galeria em um módulo personalizado do Joomla.


Quando o Droppics é instalado, você tem um botão do plugin do editor exibido abaixo ou no seu editor (dependendo do editor em uso).

 editor-gerente-galeria

Clique nele para abrir a caixa de luz principal do Droppics.

 

lightbox-gallery

 

2.2 Gerenciar galerias

Para criar uma galeria, clique em Novo álbum na coluna da esquerda.

 

nova galeria

 

Nota: uma galeria padrão já é criada na instalação do componente.


Para adicionar novas imagens em sua galeria, você pode arrastar e soltar mídia na parte central ou clicar em Botão Selecionar arquivos.

 

Enviar imagens

 

Um pop-up de notificação será exibido no canto superior direito depois que as imagens forem carregadas, ordenadas, movidas, removidas ou editadas pelo usuário.

 

notificação-popup-file

 

Selecione uma ou algumas imagens para enviá-las. O uploader é ativado por HTML5, para que você possa enviar imagens grandes. Eles serão redimensionados automaticamente para os tamanhos definidos nos parâmetros globais (o padrão é 1200px).


Você pode reorganizar suas imagens quando elas são enviadas usando arrastar e soltar. O pedido é salvo automaticamente, e é por isso que não há botões para salvar

ordem de imagem dragndrop

Para inserir a galeria em seu artigo, clique no Inserir esta galeria botão na coluna da direita

 

insert-gallery-content


 
A galeria se materializará em seu artigo com um Ícone Droppics.

 

galeria materializada

 

Salve seu conteúdo e pronto - sua primeira galeria já está online! Se você clicar na imagem da galeria Droppics no artigo e, em seguida, no botão Droppics, você recarregará a galeria selecionada.

Nota: se ativado na configuração, você pode configurar parâmetros de exibição em cada galeria no menu à direita.

 

O tema padrão permite definir:

  • Tamanho da borda
  • Raio da borda
  • Cor da borda
  • Cor e tamanho da sombra da imagem
  • Margem esquerda, margem superior, margem direita, margem inferior
  • Seja para carregar sub-galerias ou não
  • Alguns parâmetros adicionais estão disponíveis no tema da apresentação de slides, como atraso de transição, efeito ...

 

2.3 sub-galerias

Em Droppics você pode gerenciar galerias de vários níveis. Para adicionar um subnível de galeria, basta arrastar e soltar as categorias de imagem para classificar ou alterar os níveis.

 

pedido-galeria de imagens

 

Para ativar a navegação de sub-galeria, você precisará configurar o parâmetro na categoria pai no menu à direita.

 

sub-galerias

 

Se você desativou as configurações da galeria e a configuração a partir da configuração global, use o menu Componentes> Droppics> Opções> Selecione o tema para configurar.

 

configurações-subgalerias

 

Já que você tem sub-galerias, você poderá navegar nelas no frontend. Todas as suas sub-galerias geram automaticamente miniaturas de navegação.

 

subgalleries-frontend
 

A miniatura da sub-galeria é gerada automaticamente usando a primeira imagem na categoria da imagem. Uma vez em uma sub-galeria, você também pode escolher uma imagem para usar como um botão Voltar do Opção> Parâmetros Principais cardápio.

 

categoria de fallback

 

Um estado padrão do nível da galeria pode ser definido nas opções globais para a parte administrativa: abra o Droppics com todas as categorias da imagem abertas ou fechadas. Pode economizar espaço se você tiver um grande número de galerias.

 

categoria de imagem aproximada

 

2.5 Copiar - Recortar - Colar imagens

Depois que uma imagem for carregada no Droppics, você poderá fazer uma seleção única / múltipla clicando nela. Você pode selecionar várias imagens pressionando e mantendo pressionada a tecla CTRL. O primeiro método para mover ou copiar imagens é usar arrastar e soltar. Arrastar e soltar sozinho irá mover a imagem, arrastar e soltar enquanto pressiona e segure Shift irá copiar as imagens.

 

arrastar e soltar a imagem

 

Você também pode usar os botões superiores direito.

 

copiar-colar-botões

 

III GERENCIAMENTO DE IMAGEM ÚNICA


3.1 Opções de exibição de imagem única

Com o Droppics, você pode usar as mesmas imagens em suas galerias ou como uma única imagem em seu conteúdo. Abra o Droppics, clique em uma imagem e o painel direito será alterado. Na parte superior você pode definir:

  • Raio da borda
  • Margem
  • Tamanho da borda
  • Cor da borda
  • Tamanho da sombra
  • Cor de sombra
  • Alinhamento

 

image-parameter1

 

Não se esqueça de clicar em salvar depois de concluir a modificação.

Todos esses parâmetros podem ser configurados por padrão para todas as suas imagens nas opções do componente.

 

parâmetro de arquivo único

 

Em seguida, você pode definir uma ação no clique da imagem com um link externo opcional e uma legenda (texto sob sua imagem):

 

image-parameter2

 

A ação ao clicar determinará se o usuário irá:

  • Abra a imagem em uma mesa de luz
  • Siga um link para um artigo ou um menu
  • Siga um link para um URL personalizado
  • Fazer nada

Legenda da imagem:

  • Siga o link personalizado na visualização da galeria
  • Mostrar legenda

A opção da caixa de seleção "Seguir link personalizado na visualização da galeria" adiciona o comportamento do link a uma única imagem, mas também funciona na visualização de galeria se você inserir toda a galeria em seu conteúdo. Esse recurso é freqüentemente usado para páginas de portfólio.

O link para menus e artigos é completado por uma ferramenta para ajudá-lo a encontrar o seu conteúdo mais fácil em uma lista.

 

image-link-gallery

 

Ao clicar em uma única imagem, você tem a opção de substituir a imagem em todo o seu site Joomla. Faça o upload de um novo e Droppics irá gerar novamente todos os tamanhos de imagem, incluindo tamanhos personalizados, e substitua-o em seu conteúdo!

 

image-replace

 

Se ativado o Visualização de imagem parâmetro nas configurações, você pode até ativar um efeito de imagem de foco do mouse.

 

hover-image

 

E o processo de upload também.

 

upload-process

 

3.2 Criar tamanhos de imagem personalizados

Você pode criar algumas imagens de tamanho personalizado usando os arquivos originais e a imagem original permanecerá intocada. Clique no tamanho novo botão de opção, defina pelo menos uma largura e um nome de arquivo para gerar uma nova imagem. O novo nome e tamanho do arquivo de imagem será adicionado à lista.

 

imagem personalizada tamanho

 

Os tamanhos de imagem personalizados também podem ser gerados automaticamente no upload. Para definir os tamanhos personalizados, use o menu: Componente> Droppics> Opções> Imagens individuais> Tamanhos personalizados.

Em seguida, você pode adicionar os tamanhos personalizados da imagem que deseja criar por padrão no upload.

 

imagem de tamanho personalizado

 

Quando a imagem personalizada for gerada, você a incluirá na sua listagem de imagens. Então simplesmente clique em inserir esta foto para adicionar em seu artigo.

 

imagem em conteúdo
 
Clicando novamente na imagem e no Droppics botão, a imagem será aberta novamente com todos os seus parâmetros.

 

reabrir imagem

 

Para fins de SEO, você pode definir o título, o texto alternativo e alterar o nome do arquivo original.

 

seo-image-info

 

3.3 Aplicando efeitos na imagem

Você pode aplicar filtros e efeitos nas imagens. No lado direito do tamanho da imagem, clique no Ícone da caneta de edição.

 

efeito aberto

 

Você será mostrado uma tela com efeitos.

 

imagem-efeito-vista


 
Você pode aplicar modificações e efeitos:

  • Colheita
  • Redimensionar
  • Espelho
  • Girar
  • Aplique alguns efeitos de estilo

 

IV. PARÂMETROS DROPPICS


4.1 Parâmetros de extensão


Para acessar os parâmetros Droppics, use o Componente> Droppics> Opções cardápio.

 

parâmetros globais

 

  • Tamanho da miniatura: o tamanho de todas as miniaturas que são geradas ao importar imagens ou que são exibidas em galerias e como imagens únicas
  • Tamanho médio: o tamanho da imagem ampliada, usada na lightbox, por exemplo
  • Tamanho de upload original: o tamanho da imagem original armazenada no servidor, usada para gerar novos tamanhos
  • Imagens responsivas: permite gerar 2 novos tamanhos de imagem com larguras de 768px e 300px que serão carregadas em telas de dispositivos móveis
  • Mostrar título da caixa de luz: exibe o título da imagem quando uma imagem é aberta em uma mesa de luz
  • Tamanho das imagens na lightbox: o tamanho das imagens mostra na mesa de luz; se você escolher ampla, lembre-se de regenerar imagens para sua pasta, se você nunca fez isso antes
  • Qualidade JPG: defina a qualidade das suas imagens .jpg
  • Compressão PNG: use-o se quiser compactar suas imagens no upload

 

opção de colheita

  • Corte de imagem: você pode cortar suas imagens no upload com base no tamanho que você definiu no começo - caso contrário, a proporção da imagem será respeitada
  • Fechar categorias: carregar a exibição de categorias / subcategorias administrativas aberta ou fechada
  • Definir opções infinitas de rolagem: carregar imagem progressivamente, em vez de todas as imagens no carregamento da página
  • Elementos carregados primeiramente: Número de elementos carregados inicialmente
  • Elementos carregados em ajax: Número de elementos carregados em ajax
  • Carregar tema na categoria: Carregar e alterar os parâmetros do tema em cada categoria de arquivo
Nota: se você alterar o tamanho da imagem ou ativar o recurso responsivo, será necessário executar um Regeneração de miniaturas. Por favor, clique no botão e regenere todos os tamanhos de imagem.

 

regeneração de miniaturas

Pode demorar um pouco dependendo do número de imagens, apenas seja paciente :)

4.2 Permissão e gerenciamento de imagem frontend


O Droppics usa a ACL padrão do Joomla para definir o acesso ao gerenciamento de imagens. Por padrão, o usuário Super admin sempre terá acesso a todas as galerias.
 
Se você precisar restringir o acesso de alguns usuários, coloque-os pelo menos no grupo de administradores ou crie um novo grupo de usuários do Joomla. Por exemplo, se você quiser que um usuário administrador acessar e editar apenas suas próprias imagensconjunto "Editar" direito a "negado" e "editar próprio" para "Permitido". Você também pode restringir:

  • Acesso à configuração Droppics
  • Acesso à interface
  • Criação de imagem / galeria
  • Exclusão de imagem / galeria
  • Edição / própria edição de arquivos

 

droppics-permission

O Droppics oferece uma opção para gerenciar imagens do frontend usando o botão do editor (como no lado do administrador) ou usando uma interface dedicada. Ao instalar o Droppics, um modelo é adicionado para fazer exatamente isso.
Use um menu do Joomla para carregar o Droppics no frontend. Naturalmente, todas as permissões que você configurou serão respeitadas.

Adicione um menu Joomla e configure o Estilo de modelo frontend Droppics.

 

Menu droppics

 

Então, se você for permitido, poderá gerenciar imagens do frontend do site.

 

Front-image-edition

 

4.3 Temas e configurações de imagem

Com o Droppics, você pode permitir que o tema e o parâmetro de imagem sejam definidos em cada categoria de imagem e imagem, ou apenas como uma configuração global.

 

load-theme-parameters

 

Todas as configurações de tema da configuração global serão aplicadas somente se você não permitir que as modificações sejam feitas na categoria da imagem.

 

configuração de temas

 

Aqui está a ilustração das configurações do tema permitidas e não permitidas nas categorias de imagem. Na segunda imagem, você só pode alternar o tema, mas não alterar as configurações do tema.

 

Opções de temas

 

4.4 Vídeos remotos

O Droppics pode incluir vídeos remotos do Youtube, Vimeo e Dailymotion entre as imagens. Para ativar a opção use o Componente> Droppics> Opções> Adicionar vídeos remotos cardápio.
Você também pode definir a largura padrão do vídeo para quando ele for adicionado como um único vídeo ou carregado em um lightbox.

 

vídeo remoto

Ativar essa configuração adicionará um botão acima do botão de upload.

 

add-remote-video

 

A única coisa que você precisa adicionar é o URL do vídeo.

 

add-remote-video-url

 

4.5 importador de imagem Droppics

O Droppics possui um importador de mídia capaz de navegar e importar imagens do seu servidor. Para ativar a opção, vá para o Componente> Droppics> Opções> guia Parâmetros principais> Mostrar parâmetro de importação de imagens.

 

importação de imagem

 

Em seguida, use a interface principal Droppics para selecionar algumas mídias e importá-las na categoria desejada.

 

importador-seleção

 

4.6 marca d'água da imagem

O Droppics pode aplicar automaticamente uma marca d'água (direitos autorais) em suas imagens. Primeiro, você precisa ativar o Marca d'água de imagens recurso da configuração do componente.

 

ativar marca d'água

 

Em seguida, selecione a imagem de marca d'água para aplicar sobre suas imagens - pode ser qualquer imagem, mas preste atenção à dimensão.

 

marca d'água selecionada

 

Existem 5 posições onde você pode colocar a marca d'água:

  • Centro
  • Inferior esquerdo
  • Canto inferior direito
  • Canto superior direito
  • Esquerda Superior

 

posição da marca d'água

 

Os tamanhos possíveis quando a marca d'água é aplicada são:

  • Todos os tamanhos
  • Miniatura
  • ampla
  • Médio
  • Tamanho personalizado

Nota: A marca d'água será aplicada somente após salvar as configurações e regenerar as miniaturas (clique no botão '' regenerar miniaturas '').

 

imagem-marca d'água

 

V. TEMAS DROPPICS

5.1 Apresentação de Temas


Droppics vem com 6 temas:

  • Tema Padrão
  • Tema Masonry: este é um tema responsivo que exibe paredes de fotos
  • Tema de apresentação de slides para exibir um carrossel de imagens
  • Um tema de design polaroid
  • Tema Heapshot, que é uma pilha de fotos com um efeito legal para alternar entre elas
  • Tema de slideshow avançado personalizado, com um editor de texto personalizado sobre imagens

 

galeria-tema-imagem-params

 

 


Depois de aplicar um tema em uma galeria, você poderá configurar opções relacionadas ao tema em uma única imagem. Por exemplo, aqui eu configurei o tema da galeria como a apresentação de slides avançada, para que eu possa adicionar algum texto sobre a imagem.

 

Custom-slideshow-theme


No tema masonry, você pode configurar a largura máxima da imagem.

 

masonry-config

 

VI. DICAS E TRUQUES DROPPICS

O Droppics é construído para ser usado em todos os campos do editor WYSIWYG - você só precisa ter o plugin de conteúdo chamado. Na maioria das vezes, é ativado por padrão.
Note que este não é o caso do módulo HTML personalizado do Joomla - você precisa ativá-lo como acima.

 

módulo personalizado

 

Na aba de opções você precisa definir o opção Preparar conteúdo para Sim.

 

6.2 Criar / substituir um tema Droppics

Você pode personalizar e adicionar temas ao Droppics. Nós não usamos o padrão MVC Overrides, mas o sistema de plugins padrão do Joomla.
Os temas Droppics são plugins e estão localizados na pasta / plugins / droppics.

Você terá que copiar um plugin e alterar o nome do plugin para criar seu novo plugin (pluginname.xml e o nome da classe do plugin).
Em seguida, instale-o através do instalador padrão do Joomla. Deve ser mostrado na lista de temas. Você pode, então, fazer todas as alterações desejadas neste tema e ele não será afetado pelas atualizações.