Imagens

O componente Imagem.vue permite que imagens sejam inseridas no conteúdo de uma consulta. É necessário importá-lo e escrever um objeto json com as informações da imagem (URL, legenda, título, caption...), que pode ser renderizada de seis maneiras diferentes: default, na coluna, em destaque, tipo hero, como mapa com legenda e gerada a partir do plugin ai2html. Cada forma define um objeto json mínimo diferente.

<script>
import Imagem from '@/components/Imagem'

export default {
    data () {
        return {
            nome_do_objeto_json: { ... }
        }
    }
    components: {
        Imagem
    }
}
</script>

<Imagem :dados="nome_do_objeto_json"></Imagem>

Default

Essa forma renderiza a imagem em suas dimensões originais (com restrição de largura igual à da coluna).

objeto: {
    tipo: 'default',
    url: 'https://placehold.it/400x300',
    caption: 'Legenda que aparecerá abaixo da imagem',
    fonte: 'Fonte da imagem'
}

<Imagem :dados="objeto"></Imagem>

Imagem tipo 'default'

Coluna

Força a imagem a ter a mesma largura da coluna.

objeto: {
    tipo: 'coluna',
    url: 'https://placehold.it/400x300',
    caption: 'Legenda que aparecerá abaixo da imagem',
    fonte: 'Fonte da imagem'
}

<Imagem :dados="objeto"></Imagem>

Imagem em coluna

Destaque

Exibe a imagem em seu tamanho original (dimensões limitadas às da tela) numa caixa escura com as dimensões da tela.

objeto: {
    tipo: 'destaque',
    url: 'https://placehold.it/1200x800',
    caption: 'Legenda que aparecerá abaixo da imagem',
    fonte: 'Fonte da imagem'
}

<Imagem :dados="objeto"></Imagem>

Imagem em destaque

Hero

Em dispositivos desktop, força as dimensões da imagem às da tela. Em dispositivos mobile (sentido "retrato"), é renderizada num fundo escuro com as dimensões da tela.

objeto: {
    tipo: 'hero',
    url: 'https://placehold.it/1600x900',
    caption: 'Legenda que aparecerá abaixo da imagem',
    fonte: 'Fonte da imagem'
}

<Imagem :dados="objeto"></Imagem>

Hero

Mapa

Gera uma caixa que contém a imagem do mapa, título, legenda e fonte. Cada objeto dentro da array legenda é um objeto que contém as seguintes propriedades:

simbolo: vazio ('') ou com o endereço de uma imagem usada no mapa (como ícones ou texturas de áreas)
linha: boolean que informa se a legenda se trata de um elemento em linha ou não
fundo: define uma cor de fundo para o elemento de legenda
descricao: a definição do que o elemento representa no mapa

objeto: {
    tipo: 'mapa',
    url: 'https://placehold.it/1600x900',
    titulo: 'Título do mapa',
    legenda: [
        { simbolo: 'https://participe.gestaourbana.prefeitura.sp.gov.br/arquivos/piu-anhembi/img/legendaHabitacao1.gif', linha: false, fundo: '', descricao: 'Legenda de imagem' },
        { simbolo: '', linha: false, fundo: 'blue', descricao: 'Legenda de área' },
        { simbolo: '', linha: true, fundo: 'red', descricao: 'Legenda de linha' }
    ],
    fonte: 'Fonte da imagem'
}