Nesta página:

  • Introdução
  • Usando o botão Adicionar Elemento para gerar uma grid conteúdo
  • Criando um grid de conteúdo "manualmente" com o shortcode [aa_content_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 algum conteúdo em uma página ou post específico, você pode utilizar o shortcode [aa_content_grid].


Como exemplo, veremos como o fotógrafo Feco Hamburger usou o shortcode [aa_content_grid] para gerar uma lista de textos críticos sobre seus trabalhos e exposições 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 conteúdo


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» Content rid
  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» Content Grid


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


Clique no botão adicionar elemento


Exemplo de uso do shortcode [aa_content_grid]


Se o shortcode [aa_content_grid] for usado sem nenhum parâmetro, ele usará configurações padrões e mostrará uma lista 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_content_grid 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âmetrosque podem ser usado no shortcode [aa_content_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.

content_type

Que tipo de conteúdo específico, válido somente se o type for igual content [type="content"]
  • award (prêmios)
  • clipping (clippings)
  • collection (coleções)
  • exhbition (exposições)
  • page (página)
  • post (posts do blog)
  • publications (publicações)
  • work (obras)

Padrão: post

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

É 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 em uma opção especifica dentro de taxonomia.

  • Exemplo 1: para gerar um grid com posts do blog que tenham a tag "destaque", seria usado o seguinte shortcode: [aa_content_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_content_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_content_grid image_size="small" content_type="obra" style="3col" ids="40, 34, 41 e 42" order="ASC" orderby="ID"]

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 de obra ou resumo de post). 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 o conteúdo
  • 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.


[aa_content_grid image_size="medium" content_type="page" style="2col" image_position="before" ids="999, 365, 375, 379" order="ASC" orderby="ID" click_behavior="lightbox"]


Com este shortcode, o estilo foi mudado para 2 colunas, a imagem agora aparece após o título e tem um tamanho maior, e o grid é composto apenas das páginas com as ids especificadas. Por fim, quando o usuário clica em uma imagem, todas as imagens são abertas com efeito lightbox.




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.

Mais informações sobre shortcodes superlumina»


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


Outros shortcodes superlumina»