Imagens em HyperCode

Como utilizar imagens nas postagens com HyperCode

O HyperCode suporta alguns tipos diferentes de Tags para inserir imagens. Veja quais são, as diferenças e como utilizá-las.

Uma postagem com imagens fica muito mais atratitvo. Seja uma postagem sobre uma notícia, um produto, um artigo de opinião, as imagens dão um brilho a mais para sua postagem.

O HyperCode suporta vários tipos diferentes de Tags para inserir imagens. Veja aqui como utilizá-las, quais são os tipos e diferenças e qual o tipo mais adequado em cada caso.

Antes de prosseguir, é recomendável ler e entender Imagens no HyperFluxCMS.

As tags de imagens descritas a seguir são algumas das Tags HyperCode que são auto-contidas, ou seja, elas NÃO PRECISAM e NEM DEVEM ser usadas em pares "abrir/fechar". Devem ser usadas simplesmente as tags.

Tag [img]

A tag img é o método padrão de inserir imagens em uma postagem em HyperCode.

Sintaxe:

src é a única propriedade obrigatória.
src deve conter o caminho para um arquivo de imagem válido. Pode ser:

• um caminho completo, como "https://nome-do-meu-site.com/gallery/foto.jpg". Nesse caso, pode-se usar uma imagem do próprio site ou de fonte externa.
• um caminho relativo, se for uma imagem do próprio site, como "/gallery/foto.jpg"
• um caminho automático, se for uma imagem do próprio site, como "auto/foto.jpg" (veja Seleção Automática de Imagens)
• apenas o nome da imagem, se ela estiver na galeria de imagens do próprio site, como em "foto.jpg"

Se for uma imagem do próprio site, pode-se usar também o caminho para uma Miniatura Automática, como em "foto.jgp:300.200.cover".

Propriedade anônima

A propriedade "src" pode ser omitida e o link pode ser informado diretamente após o nome da tag;

[img="foto.jpg"]

Propriedades adicionais

caption é uma propriedade opcional. Se ele for incluida, o texto informado aparecerá na parte de baixo da imagem, como uma legenda.

width e height indicam, respectivamente a largura e a altura da imagem. Podem ser informadas em pixels, pt, % ou qualquer outra unidade de medida válida em HTML.

Se nenhuma das propriedades width e height forem informadas, a imagem será inserida em seu tamanho original em pixels conforme dados do próprio arquivo.

Se ambas as propriedades width e height forem informadas, a imagem será inserida no tamanho informado. Se as medidas não seguirem a proporção da imagem original, a imagem será exibida distorcida, comprimida ou esticada na vertical ou horizontal, para ocupar exatamente o tamanho informado.

Se apenas uma das propriedades width ou height for informada, a imagem será inserida com a dimensão informada, sendo a demais calculada automaticamente para que a imagem seja exibida mantendo a proporção original e sem distorção.

Como a maioria tas Tags HyperCode, IMG aceita opcionalmente as propriedades class, style e id. Veja Class, Style, id

Exemplo:

[img="thumbnail-sample.jpg" with="400" height="225" caption="sample image"]

Tag [thumb]

A tag thumb é o método padrão de inserir miniaturas de imagens em uma postagem em HyperCode.

Sintaxe:

[thumb src="link-da-imagem" options="opcoes" width="largura" height="altura"]

src é propriedade obrigatória.
src deve conter o caminho para um arquivo de imagem válido. Pode ser:

• um caminho completo, como "https://nome-do-meu-site.com/gallery/foto.jpg". Nesse caso, pode-se usar uma imagem do próprio site ou de fonte externa.
• um caminho relativo, se for uma imagem do próprio site, como "/gallery/foto.jpg"
• apenas o nome da imagem, se ela estiver na galeria de imagens do próprio site, como em "foto.jpg"

options indica as opções para geração da miniatura. É uma /string composta de 3 campos separados por ponto . e sem espaços entre si.

• O primeiro campo é a largura da imagem miniatura em pixels.
• O segundo campo é a altura da imagem miniatura em pixels.
• O terceiro campo é o MODO da imagem, que pode ser stretch, fit ou cover. Veja mais em Modos de Miniaturas.

Exemplo:

Propriedades adicionais

width e height indicam, respectivamente a largura e a altura de exibição da imagem na página. Pode ser informado em pixels, pt, % ou qualquer outra unidade de medida válida em HTML.

Se nenhuma das propriedades width e height forem informadas, a imagem será inserida exatamente no tamanho indicado na propriedade options.

Se ambas as propriedades width e height forem informadas, a imagem será inserida no tamanho informado.

Se as medidas não seguirem a proporção informada em options, a imagem será exibida distorcida, comprimida ou esticada na vertical ou horizontal, para ocupar exatamente o tamanho informado.

Se apenas uma das propriedades width ou height for informada, a imagem será inserida com a dimensão informada, sendo a demais calculada automaticamente para que a imagem seja exibida mantendo a proporção original e sem distorção.

Como a maioria tas Tags HyperCode, img aceita opcionalmente as propriedades class, style e id. Veja Class, Style, id

Diferenças entre img e thumb

• A tag img possui o campo caption que permite adicionar uma legenda à imagem. A tag thumb não.
• A tag thumb possui o campo options que permite informar parâmetros da miniatura. A tag thumb não, mas isso pode ser feito indicando no caminho as informações para geração de miniaturas. Veja Miniaturas.
• Por padrão, img e thumb possuem classes CSS diferentes e são exibidas de forma ligeiramente diferente, configuradas nas folhas de estilo do site.

Exemplo:

Tag [image]:

A tag [image] é exatamente igual à tag [img], sendo somente um nome alternativo para a mesma tag, com as mesmas funções e propriedades.

Exemplo:

Tag [floatimg]

A tag floatimg é outra forma de inserir imagem na postagem.

A tag floatimg é extremamente parecida com img. A única diferença é que, por padrão, pertence à classe CSS floatimg e será exibida no site de forma ligeiramente diferente de uma img padrão. No restante, é similar a img em sintaxe e propriedades. Veja Tag img.

Exemplo:

Como a maioria tas Tags HyperCode, floatimg aceita opcionalmente as propriedades class, style e id. Veja Class, Style, id

Tag [modalimg]

A tag modalimg é outra forma de inserir imagem na postagem.

A tag modalimg é uma forma basta de útil de inserir galerias de fotos de uma postagem.

Ela mostra na postagem principal uma miniatura da foto, e quando o visitante clica sobre ela, ela é exibida ampliada (ou com o tamanho real) em destaque, com o restante da página sendo escurecida.

Depois que o usuário clicar em um "X" no canto da tela, a imagem é fechada e se restabelece a visualização normal do site.

Sintaxe:

Propriedades

As propriedades src, caption, width, height, class, style e id são idênticas às da tag img.

A propriedade options é idênticas às da tag thumb.

Exemplo:

Como a maioria tas Tags HyperCode, floatimg aceita opcionalmente as propriedades class, style e id. Veja Class, Style, id

Tag [coverimg]

A tag coverimg é outra forma de inserir imagem na postagem e serve quase que exclusivamente para inserir na postagem uma imagem de capa.

A tag coverimg é basicamente a tag img mas em que a propriedade src pode - e deve - ser omitida, e será automaticamente substituída pela imagem definida como "imagem de capa" na configuração da página.

Se a postagem for editada e a imagem de capa for modificada, automaticamente a nova imagem será exibida nas próximas vezes que a página for acessada.

Exceto por isso, a sintaxe e as propriedades de coverimg são exatamente iguais às da tag img.