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).
- Na tela de edição de conteúdo, logo acima da área de texto principal, clique em Adicionar Elemento (Add Post Element)
- Na nova janela que se abrirá, selecione Superlumina» Taxonomy Grid
- Escolha as opções de seu grid
- Clique em Inserir Elemento
Veja os passos na sequência de imagens abaixo:
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.
- 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)
- 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
- 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
- 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)
Padrão: 3col
Padrão: '' (vazio)
hide_empty
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
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"]
Mais informações sobre shortcodes superlumina»
Aprenda mais sobre shortcodes no artigo "O que são e como usar shortcodes"
Outros shortcodes superlumina»
- [aa_content_grid] - shortcode para geração de listas e grids de posts, obras, exposições, etc
- [button] - para criar um botão
- [contentbox type="alert"]Lorem Ipsum dolor sit[/contentbox]
- [hr] - para gerar uma linha separando áreas de texto