Gallery's height

[rgarrigue]

Hi there

When I look at https://themes.gohugo.io/theme/hugo-story/, your gallery's neat and clean. It's because all the images' height are the same.

So I processed my own images to generate thumbs (using squoosh-cli) of the same height. But it look messy, because your gallery component stretch the result for every image to have the same width. Maybe it should be based on height, or you should have a style option for this behavior ? Or maybe I'm not a pro on this topic and everyone do it likes you do and I learnt something.

Cheers,

[caressofsteel]

Hi Remy,

I think what you're trying to achieve could be done with a masonry approach. I think this would be cool option for the gallery component. If I get some time, I'll try to incorporate it. Thanks for the input.

[georgeblck]

This is indeed a common problem. For the style1 gallery a masonry approach would be nice but for the pre-set carousel gallery style2 the easiest way is to cut out thumbnails from your full images that are a centered crop and not the whole image. Only if your images have extreme aspect ratios or extremely different ones would it look weird.

If you are on Linux this code does the trick

mogrify -path static/images/gallery/thumbs/ -thumbnail 500x500^ -gravity center -extent 500x500 static/images/gallery/fulls/*

[rgarrigue]

Thanks for the mogrify ref. For the record here's my squoosh based script make_thumbs.sh

#!/usr/bin/env bash
set -e

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
nvm use --silent 15
for f in ./originals/*
do
  NODE_OPTIONS=--max_old_space_size=8192 \
  squoosh-cli \
    -d ./thumbs \
    --mozjpeg auto \
    --resize '{
      "enabled":true,
      "width":200,
      "height":250,
      "method":"lanczos3",
      "fitMethod":"stretch",
      "premultiply":true,
      "linearRGB":true
    }' \
    --max-optimizer-rounds 10 "$f"
done

And a similar one make_optimized.sh

#!/usr/bin/env bash
set -e

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
nvm use --silent 15
for f in ./originals/*
do
    NODE_OPTIONS=--max_old_space_size=8192 \
    squoosh-cli \
        -d ./optimized \
        --mozjpeg auto \
        --max-optimizer-rounds 10 "$f"
done