Nesta página:

  • Introdução
  • Usando o botão Adicionar Elemento para gerar um grid de taxonomia (série, categorias, etc)
  • Criando um grid "manualmente" com o shortcode [aa_taxonomy_grid]
  • Parâmetros do shortcode
  • Exemplos: usando parâmetros para mudar o que é visto com o shortcode
  • Mais informações sobre shortcodes superlumina»
  • Outros shortcodes superlumina»

Os sites superlumina» listam os conteúdos em certos endereços padrões. Por exemplo, no endereço www.dominio.com.br/obras/ são listadas todas as obras fotográficas cadastradas e puublicadas, enquanto o endereço www.dominio.com.br/publicacoes/ mostrará seus livros cadastrados. 


Entretanto, se você desejar listar categorias, tags, séries, etc em uma página ou post específico, você pode utilizar o shortcode [aa_taxonomy_grid].


Como exemplo, veremos como o fotógrafo Feco Hamburger usou o shortcode [aa_taxonomy_grid] para gerar uma lista de séries de seus trabalhos autorias e aprenderemos como usar alguns dos parâmetros que alteram o resultado do shortcode. A lista completa destes parâmetros pode ser encontrado adiante no artigo, mas antes, vamos ver como adicionar um grid de conteúdo usando o botão Adicionar Elemento.


Usando o botão Adicionar Elemento para gerar uma grid de taxonomia (séries, categorias, etc)


Na versão mais recente do Superlumina é possível gerar estes códigos facilmente através do botão Adicionar Elemento (Add Post Element).


  1. Na tela de edição de conteúdo, logo acima da área de texto principal, clique em Adicionar Elemento (Add Post Element)
  2. Na nova janela que se abrirá, selecione Superlumina» Taxonomy Grid
  3. Escolha as opções de seu grid
  4. Clique em Inserir Elemento


Veja os passos na sequência de imagens abaixo:



Tela de edição e botão Adicionar Elemento (Add Post Element) em destaque

clique em Adicionar Elemento


Selecione Superlumina» Taxonomy Grid


Configure o Grid (tamanho de imagens, colunas, etc)


Clique no botão adicionar elemento


Exemplo de uso do shortcode [aa_taxonomy_grid]


Se o shortcode [aa_taxonomy_grid] for usado sem nenhum parâmetro, ele usará configurações padrões e mostrará uma lista de categorias de posts do blog de seu site, em um grid com 3 colunas e usando o tamanho de arquivo médio para a imagem. No exemplo a seguir, o fotógrafo queria mostrar alguns ensaios de críticos e curadores em um grid com 3 colunas. Este é o shortcode usado:


[aa_taxonomy_grid taxonomy="content" image_size="small" content_type="page" style="3col" ids="999, 365, 375, 377, 376, 378, 379" order="ASC" orderby="ID"]


Repare que temos diversos outros parâmetros. Adiante neste artigo veremos o que significa cada um deles.


o shortcode na área de administração



o resultado na área pública




Parâmetros do shortcode 

Abaixo segue a lista com todos os parâmetros que podem ser usado no shortcode [aa_taxonomy_grid] para modificar o grid. Cada parâmetro tem um efeito diferente no que é mostrado para o usuário, como podem ser vistos nos exemplos após a lista.
Cada um dos parâmetros tem um valor padrão, utilizado caso o parâmetro não seja especificado. Estes valores estão marcados em ítálico e negrito.
number

Número máximo de ítens no grid ou lista. O valor máximo é 50 e sugerimos manter entre 20 e 30 para não deixar o carregamento da página lento. 

Padrão: 20

taxonomy

Se o parâmetro type for igual taxonomy (i.e. [type="taxonomy"] ) , é usado para especificar qual a taxonomia deve ser utilizada para gerar o grid (e.g serie). Se o type é igual content [type="content"], é usado em conjunto com o parâmetro taxonomy_term (vide abaixo) para limitar os ítens a uma taxonomia específica.

Padrão: '' (vazio)

taxonomy_term

Usado em conjunto com o parâmetro taxonomy quando se deseja que o grid ou lista contenha apenas ítens classificados com uma opçõa específica de uma taxonomia.

  • Exemplo 1: para gerar um grid com posts do blog que tenham a tag "destaque", seria usado o seguinte shortcode: [aa_taxonomy_grid taxonomy="tag" taxonomy_term="destaque"]
  • Exemplo 2: para gerar um grid com obras que façam parte da serie XPTO, seria usado o seguinte shortcode: [aa_taxonomy_grid content_type="work" taxonomy="serie" taxonomy_term="xpto"]


Padrão: '' (vazio)


order_by

Por qual campo do banco de dados os ítens devem ser ordenados.
  • date: data de publicação no site (para conteúdos como post, obra, etc)
  • title: título do ítem ou taxonomia
  • ID: identificação numérica do ítem no banco de dados, encontrado na barra de endereço do navegador

 

Padrão: date


order

A direção de ordenação
  • ASC: ascendente (A a Z, de 0 para números maiores.)
  • DES: descendente (Z a A, de números maiores para menores) 


Padrão: ASC


style


O estilo do grid:
  • 1col: 1 coluna (ítens um abaixo do outro, como lista)
  • 2col: grid com 2 colunas de largura igual
  • 3col: grid com 3 colunas de larguras iguais
  • 4col: grid com 4 colunas
  • 5col: grid com 5 colunas
  • 6col: grid com 6 colunas
  • 2col-assimetric: 2 colunas de larguras diferentes, uma com 66% e outra 33% da largura disponível (em breve)
  • 2col-faux: 2 colunas, uma delas para a imagem e outra para título e conteúdo textual (em breve)
  • 2col-mosaic: alterna entre 2 colunas de larguras diferentes e 1 coluna de 100% (em breve)

Importante: o número de colunas diminui em telas menores. Por exemplo, uma grid de 6 colunas se torna de 5 colunas em telas menores de 1024 pixels largura, 4 colunas em em telas menores de 800 pixels e assim por diante. Todos os grids se tornam de 1 coluna em telas menores que 480 pixels (a maioria dos celulares na posição retrato).

 

Padrão: 3col


ids

Serve para limitar quais ítens devem aparecer no grid por suas identificações numéricas dos ítens no banco de dados, encontrados na barra de endereço do navegador. 

Por exemplo, o shortcode a seguir irá mostrar apenas as obras com as ids 40, 34, 41 e 42, e como tem o parâmetro orderby="ID" irá ordenar pela ordem em que os números aparecem.


[aa_taxonomy_grid image_size="small" content_type="obra" style="3col" ids="40, 34, 41 e 42" order="ASC" orderby="ID"]

Padrão: '' (vazio)


hide_empty


Usando apenas quando o tipo de grid é type="taxonomy". Por padrão o grid não mostra taxonomias "vazias". Por exemplo, séries que foram cadastradas mas que ainda não têm nenhuma obra atrelada à ela. Para fazer aparecer estes ítens, é preciso usar o parâmetro hide_empty="false".


Padrão: true


parent


Identificação numérica (ID, id) da taxonomia pai. Por exemplo,você tem uma série de obras chamada Capitais e dentro dela subséries chamadas Acre, Bahia, Rio de Janeiro e São Paulo, então Capitais é uma série "parent". Será necessário procurar a id dela na tela de administração (digamos que a id é 46) e usar no shortcode, que ficaria similar a:


[slt_grid type="taxonomy" taxonomy="serie" parent="46"]


Padrão: '' (vazio)


gut


A margem horizontal entre colunas do grid.

  • none: sem margem.
  • thin: estreita
  • normal: média
  • wide: mais larga

Importante: a porcentagem da largura varia conforme o tema. Por exemplo: no tema básico, thine equivale a é 0,5% do espaço que o grid ocupa, normal 1% e wide 1,5%.


Padrão: normal


grid_line_distance


Distância entre linhas do grid.


  • none: nenhuma
  • short: curta
  • normal: normal
  • tall: alta


Importante: assim como em gut (margem) a porcentagem da distância varia conforme o tema.


Padrão: normal


image_position


A posição da imagem em relação ao título do ítem.


  • Before: antes do título
  • Under: abaixo do título (o título fica sobreposto à imagem)
  • After: após o título


Padrão: after


image_size


O tamanho do arquivo da imagem usado no grid. As medidas em pixels abaixo correspondem à maior dimensão da imagem (largura para imagens horizontais, altura para as verticais). Sugerimos que não use imagens muito grandes em grids com muitas colunas


  • thumbnail: miniatura, 320 pixels
  • small: pequena, 480 pixels
  • medium: média, 640 pixels
  • large: grande, 960 pixels
  • extra_large: extra grande, 1280 pixels
  • full: inteira, a dimensão em pixels do arquivo original que foi adicionado ao site


Padrão: medium


image_proportion


A proporção de recorte para o arquivo da imagem:


  • original: proporções originais do arquivo
  • square: quadrado
  • horizontal: horizontal na proporção 3:2
  • vertical: vertical na proporção 2:3
  • wide: horizontal na proporção 16:9
  • slim: vertical na proporção 9:16
  • panoramic: horizontal na proporção 2,35:1
  • thin: vertical na proporção 1:2,35


Padrão: medium


show_title


Ajusta a visibilidade do título do ítem.


  • true: mostra o título
  • false: deixa o título invisível


Padrão: true


title_alignment


Alinhamento do título em relação à área onde está o grid

  • left: alinhado à esquerda
  • center: centralizado
  • right: alinhado à direita


Dica: caso utilize o estilo de 1 coluna (style="1col") e o alinhamento seja esquerda ou direita, certifique-se de usar um tamanho de imagem que ocupe toda a largura da área de conteúdo do site (large, extra ou full) a fim de evitar que título e imagem pareçam desalinhados.


Padrão: center


show_content


Ajusta a visibilidade do conteúdo textual (e.g. informações da série ou categoria). Limitado a 300 caracteres

  • true: mostra o conteúdo
  • false: não mostra o conteúdo


Padrão: true


content_alignment


Alinhamento do conteúdo em relação à área onde está o grid

  • left: alinhado à esquerda
  • center: centralizado
  • right: alinhado à direita


Dica: caso utilize o estilo de 1 coluna (style="1col") e o alinhamento seja esquerda ou direita, certifique-se de usar um tamanho de imagem que ocupe toda a largura da área de conteúdo do site (large, extra ou full) a fim de evitar que conteúdo e imagem pareçam desalinhados.


Padrão: center


show_read_more


Se deve aparecer um link com o termo Veja Mais após o conteúdo. Funciona apenas caso o comportamento de clique seja "single" (click_behavior="single")

  • true: mostra a frase Veja Mais com link para a série ou categoria
  • false: não mostra link


Padrão: false


click_behavior


O que deve acontecer quando o usuário clicar no link de cada ítem do grid


  • lightbox: abre as imagens em tela cheia, com fundo preto (o efeito conhecido com lightbox) e o usuário pode ver todas as imagens do grid sem sair da página, usando as setas para esquerda e direita ou arrastando para os lados com o dedo, em telas sensíveis a toque (touch screen)
  • single: envia o usuário para a página do ítem clicado
  • disable: clique é desabilitado


Exemplos: usando parâmetros para mudar o grid


Nos exemplos abaixo, utilizamos novos parâmetros para alterar o grid original do começo deste artigo. Os parâmetros modificados estão em negrito.


[slt_grid type="taxonomy" image_size="small" taxonomy="serie" style="1col" image_position="before" ids="40, 34, 41, 42, 43, 44, 45, 46, 47, 49, 48, 50, 51" number="13" order="ASC" orderby="ID" click_behavior="lightbox"]


O estilo foi mudado para 1 coluna, a imagem deve aparecer antes do título, e o grid será composto apenas das séries com as ids especificadas, quando o usuário clicar em uma imagem, todas as imagens serão abertas com efeito lightbox. repare também que removemos o parâmetro hide_empty.



Agora as séries aparecem uma embaixo da outra (1 coluna). Note que apenas 4 séries estão aparecendo, pois como removemos o parâmetro hide_empty, o grid deixou de mostrar séries que ainda não tiveram obras catalogadas.


Repare também a largura da imagem é bem menor que a largura da coluna central do site. Isto acontece pois o tamanho do shortcode original (small, pequeno) não é suficiente para ocupar todo o espaço. Para resolver o problema, é necessário escolher um novo tamanho de imagem:


[slt_grid type="taxonomy" image_size="extra-large" taxonomy="serie" style="1col" image_position="before" ids="40, 34, 41, 42, 43, 44, 45, 46, 47, 49, 48, 50, 51" number="13" order="ASC" orderby="ID" click_behavior="lightbox" image_size="extra-large"]




[slt_grid type="taxonomy" image_size="small" taxonomy="serie" style="1col" image_position="before" ids="40, 34, 41, 42, 43, 44, 45, 46, 47, 49, 48, 50, 51" number="13" order="ASC" orderby="ID" click_behavior="lightbox" image_size="extra-large"]


Dica: se você repetir parâmetros no shortcode, apenas o último valor será considerado. Por exemplo, o código abaixo tem image_size aparecendo duas vezes, mas apenas o tamanho extra-large é considerado válido.

[slt_grid type="taxonomy" image_size="small" taxonomy="serie" style="1col" image_position="before" ids="40, 34, 41, 42, 43, 44, 45, 46, 47, 49, 48, 50, 51" number="13" order="ASC" orderby="ID" click_behavior="lightbox" image_size="extra-large"]


Mais informações sobre shortcodes superlumina»


Aprenda mais sobre shortcodes no artigo "O que são e como usar shortcodes"


Outros shortcodes superlumina»