Manipulação de imagens da Mainroad

Específicos das imagens do Hugo no Mainroad, tipos e tamanhos

Conteúdo da página

Mainroad é um tema para o Hugo gerador de sites estáticos e, além de ter uma boa aparência, possui um excelente tratamento de imagens

Como você pode ver, este site está usando a mesma abordagem: escrever texto em markdown, adicionar imagens e, depois, com o Hugo, gerar um conjunto agradável de arquivos html, js e css.

topimage

Onde

As miniaturas são definidas no front matter da página

thumbnail: img/thumb.jpg

A visibilidade das miniaturas é configurada no config.toml

[Params.thumbnail]
  visibility = ["list", "post"]

Existem algumas dificuldades com o Mainroad

  • O Mainroad está buscando por imagens de miniatura na pasta /static, e não no pacote da página.
  • Por padrão, uma única imagem é usada tanto para a miniatura da página de lista quanto para a imagem de topo da página de detalhes.
  • As miniaturas não são redimensionadas, apenas copiadas para a pasta pública

Inconveniências…

  • Isso leva ao uso muito ineficiente de largura de banda quando a imagem da página de detalhes é usada como miniatura
  • Muito inconveniente (para mim) armazenar imagens na pasta static, mesmo em uma estrutura de árvore de posts paralela, e não em um pacote de página

Tipos de imagens e tamanhos

Miniaturas

  • pequena lista (visão móvel) 73x53
  • média lista (visão de desktop) 235x171

Página de detalhes - interna

  • máximo desktop 678x495
  • ipad pro 597x436
  • iphone xr 374x273
  • iphone 14 max 390x285
  • ipad mini 479x350

A solução

É armazenar

  • na pasta static - imagens de miniatura para lista média (visão de desktop) 235x171
  • ter um conjunto pré-definido de miniaturas - como 10 dessas, e usar a mais apropriada ou alternar
  • no pacote da página - imagens de desktop 678x495
  • no texto da página, referenciar as imagens ![img](localimg.png)
  • configurar a visibilidade da miniatura = [“list”]