Tratamento de imagens de Mainroad

Especificidades das imagens do Hugo no Mainroad: tipos e tamanhos

Conteúdo da página

A Mainroad é um tema para o gerador de sites estáticos Hugo e, além de ter uma aparência agradável, possui um tratamento de imagens terrível.

Como você pode ver, este site utiliza a mesma abordagem: escrever texto em markdown, adicionar imagens e, em seguida, com o Hugo, produzir um conjunto agradável de arquivos HTML, JS e CSS.

topimage

Onde

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

thumbnail: img/thumb.jpg

A visibilidade da miniatura é configurada no config.toml

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

Existem algumas dificuldades com o Mainroad

  • O Mainroad procura imagens de miniatura na pasta /static, não no page bundle.
  • Por padrão, uma única imagem é usada tanto para a miniatura da página de lista quanto para a imagem principal da página de detalhes.
  • As miniaturas não são redimensionadas, apenas copiadas para o public

Inconveniências…

  • O acima leva a um uso de largura de banda muito ineficiente quando a imagem da página de detalhes é usada como miniatura
  • Muito inconveniente (para mim) armazenar imagens na pasta estática, mesmo em estrutura de árvore de posts paralela, e não em um page bundle

Tipos e tamanhos de imagens

Miniaturas

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

Página de detalhes - interno

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

A solução

É armazenar

  • na pasta estática - imagens de miniatura para lista média (visualização desktop) 235x171
  • ter um conjunto de miniaturas pré-definido - como 10 dessas, e usar a mais apropriada ou alternar
  • no page bundle - imagens desktop 678x495
  • referenciá-los no texto da página ![img](localimg.png)
  • configurar thumbnail visibility = [“list”]