Imagens no HyperFluxCMS

Como utilizar imagens nas postagem no HyperFluxCMS

O HyperFluxCMS possui recursos para simplificar a incorporação de imagens nas postagens. Veja como.

A URL

Se você estiver escrevendo sua postagem (ou um template) em HyperCode ou HyperLite, pode usar uma forma simplificada para acessar imagens da galeria.

O HyperFluxCMS utiliza uma sintaxe simplificada para facilitar o uso do imagens. Se a imagem já fizer parte da galeria do site, não é necessário informar o caminho completo da imagem.

Se a imagem se chamar "imagem.png" e estiver na galeria, você pode utilizar tanto o caminho completo https://meu-site.com/gallery/imagem.png, o caminho relativo /gallery/imagem.png ou simplesmente imagem.png.

Ao encontrar uma URL de imagem sem especificar um path ou url completa, o HyperFluxCMS infere que se trata de um arquivo localizado dento da pasta gallery.

Note que essa funcionalidade se aplica somente a imagens inseridas usando a linguagem HyperCode ou HyperLite. Postagens ou trechos que utilizam HTML devem continuar especificando o local da imagem usando os métodos tradicionais: caminho completo ou relativo, como "/gallery/logo.png"

Seleção Automática de Imagens

O HyperFluxCMS também possui um recurso de localizar automaticamente uma imagem dependendo das condições. Esse recurso é útil para usar, editar e criar TEMAS do HyperFluxCMS.

Para isso, o nome da imagem deve ser prefixado com /auto/. Por exemplo /auto/imagem.png.

Ao encontrar uma URL de imagem com o prefixo /auto/, o HyperFluxCMS procurará pelo arquivo com esse nome em diversas localizações, na seguinte ordem:

1. Primeiro procurará o arquivo na pasta gallery;
2. Não encontrando o arquivo lá, procurará em /themes/custom/img
3. Não encontrando o arquivo lá, procurará em /themes/<tema-atual-selecionado>/img
4. Não encontrando o arquivo lá, procurará em /themes/system/img
5. Não encontrando o arquivo lá, aceitará como arquivo não encontrado e responderá com erro 404.

Dessa forma, supondo que seu site tenha uma imagem usada como logomarca chamada logo.jpg. Você pode referenciá-la por /auto/logo.jpg. Se ela existir na galeria, ela será usada. Caso contrário, será usada uma outra procurada na ordem citada acima.

Isso permite, por exemplo, você utilize um TEMA que você gosta em geral, mas não gosta do papel de parede, que você substitua por um de sua preferência sem precisar mexer nos arquivos referentes ao Tema escolhido (supondo que quem criou o tema tenha usado /auto nos links das imagens.

O problema dos Thumbnails/Miniaturas

É bem comum que uma mesma imagem possa ser mostrada em dois tamanhos diferentes no site: uma miniatura e uma em tamanho original.

O HTML, a linguagem HyperCode e também HyperLite permitem que se faça isso sem trabalho adicional. Por exemplo, armazenar uma foto com 4000 x 3000 pixels e, para mostrá-la pequena (por exemplo, 80x60 pixels), simplesmente informar usando as propriedades width e height que é esse o tamanho em que ela deve ser exibida.

Funciona. O problema é que para isso, a imagem inteira, no tamanho original, é transferida para o navegador do visitante para depois ser exibida em miniatura. Nesse processo, gastou-se largura de banda do servidor, gastou-se a quota de internet do visitante e o tempo para download da imagem.

Uma foto com 4000x3000 pixels em formato JPG tem em média 3 a 4 MB. Se estamos falando de uma postagem com 10 fotos, são até 40 MB. Um esforço significativo e desperdício de banda e quota de internet.

Uma solução para isso seria criar manualmente uma miniatura da imagem, no tamanho desejado, e subi-la para a galeria. A mesma imagem, em 80x60 pixels, ocuparia menos de 4kb, UM MILÉSIMO do tamanho da foto original, tornando o carregamento muito mais rápido.

Mas aí geramos outros problemas:

• Um deles é o esforço de criar manualmente miniaturas de cada imagem desejada e subir cada uma para a galeria com um nome único.
• Outro é que se formos depois atualizar a imagem por uma mais atualizada, o esforço tem que ser repetido todo de novo para cada tamanho de miniatura que é utilizado em cada página do site.
• Também que, quando se for excluir a imagem porque ela não é mais necessária, todas as miniaturas devem ser excluidas manualmente também.
• E por último, o tamanho desejado de cada miniatura deve ser previsto de antemão enquanto se desenha o site ou página.

A abordagem do HyperFluxCMS

O HyperFluxCMS possui um mecanismo que une o melhor dos dois mundos: a rapidez e economia das miniaturas com a não necessidade de criar manualmente as miniaturas.

Quando uma imagem é acessada de um servidor HyperFluxCMS com determinados parâmetros, o sistema automaticamente gera uma miniatura com os parâmetros informados, armazena a imagem em uma pasta especial para miniaturas e envia uma imagem exatamente do tamanho desejado.

Na próxima vez que a imagem for acessada com os mesmos parâmetros, a miniatura já terá sido criada e será enviada.

Se uma imagem da galeria for excluída, todas as miniaturas correspondentes a ela também serão excluídas automaticamente.

Se uma nova imagem com o mesmo nome for enviada para a galeria, novas miniaturas serão criadas quando forem solicitadas.

Apesar de não ser recomendado usar o recurso para AUMENTAR uma imagem, ele PODE ser usado sem problemas, com óbvia e inevitável aparente "perda de resolução" inerente a qualquer algoritmo convencional de upscaling.

Usando Miniaturas Automáticas

Para acessar uma miniatura de uma imagem, deve-se informar o nome de uma imagem existente na galeria e acrescentando dois-pontos : e seus parâmetros.

São TRÊS parâmetros (nem mais, nem menos), separados por um ponto (.):

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

Por exemplo, foto.jpg:200.130.fit

Gerará (ou acessará, caso ela já tenha sido gerada) uma miniatura da imagem /gallery/foto.jpg, com 200 pixels de largura, 130 de altura e no modo fit.

As minaturas geradas são salvas na pasta /gallery/thumbs/ e são SEMPRE geradas em formato JPG, independentemente do tipo original da imagem.

Mas essa é uma informação apenas técnica. Para quem está escrevendo a postagem, não é necessário conhecer esse detalhe. Basta saber que ao referenciar uma imagem usando foto.jpg:200.130.fit o navegador receberá uma imagem com as características descritas.

Fit, Cover ou Stretch

As miniaturas geradas automaticamente pelo HyperFluxCMS podem ser criadas usando três algoritmos diferentes. Veja a diferença entre eles para decidir qual é o mais adequado para cada caso.

Em primeiro lugar, se as proporções da miniatura forem exatamente iguais à da imagem original, todas as três formas retornarão o mesmo resultado.

Por exemplo, se a imagem original tinha 1600x1200 pixels e a miniatura for de 800x600, 160x120, 320x240, qualquer dos modos terá o mesmo resultado. A diferença se dá quando a miniatura tem proporções diferentes da imagem original.

• stretch: Usar o moto "Stretch" fará com que a imagem da miniatura contenha todo o conteúdo da imagem original, mas se estiver fora de proporções, a imagem seja distorcida e esticada ou encolhida na vertical e na horizontal para chegar ao tamanho desejado.
• fit: Usar o moto "Fit" fará com que a imagem da miniatura contenha todo o conteúdo da imagem original, mas se estiver fora de proporções, a miniatura tenha MENOS pixels na horizontal ou vertical assegurando que as proporções sejam mantidas sem distorção.
• cover: Usar o moto "Cover" fará com que a imagem da miniatura tenha exatamente o tamanho especificado, esteja 100% preenchida com parte da imagem original, mas se estiver fora de proporções, parte da imagem (em cima/embaixo, ou dos lados) seja cortada, focalizando no centro.

Exemplos:

Limpando o cache de miniaturas

Toda vez que uma imagem é acessada com parâmetros de miniatura, primeiro o HyperFluxCMS verifica se a imagem da miniatura com os parâmetros solicitados já existe. Se existir, envia a imagem. Se não existir, cria a miniatura e armazena o arquivo da miniatura em "wwwroot/gallery/thumbs".

Quando uma imagem é apagada da galeria, suas miniaturas também são, de forma que, ao se fazer upload de outra imagem, não tenham sobrado miniaturas desatualizadas.

No entanto, é possível que, por algum motivo, tenha sobrado alguma imagem que não foi excluida. Assim, quando o visitante acessa a página que faz referência à miniatura específica, a imagem exibida é da imagem anterior, desatualizada.

Para evitar isso, existe a opção "Limpar Cache de Miniaturas".

A operação de "Limpar Cache de Miniaturas" também serve para reduuzir o espaço de armazenamente ocupado pelas miniaturas. É útil para eliminar miniaturas de imagens que não foram recentemente acessadas pelos visitantes, liberando espaço em disco e facilitando também um back-up completo ou migração do seu site.

Para fazer a limpeza do cache, siga os seguintes passos:

Fazendo login com a conta de um usuário com permissões de "Outras Operações Administrativas", selecione a opção "Operações Administrativas".

Depois procure e clique no botão "Limpar Cache de Miniaturas".

Todos os arquivos de miniaturas serão eliminados.

Note que isso normalmente não acontece. Não é necessário nem recomendável fazer a limpeza do cache com muita frequência. O cache de miniaturas foi criado para OTIMIZAR o seu site, tornando o acesso mais rápido e com menos processamento. Só é recomendado fazer a limpeza do cache quando perceber que alguma miniatura está desatualizada ou se estiver preparando o site para fazer um back-up completo ou migração, via FTP ou painel de controle, e assim reduzir o número e tamanho de arquivos a serem transferidos.

Veja também:
Imagens em HyperCode
Imagens em HyperLite