• he/him

programming, video games, dadding. I happen to work for Xbox, but don't represent them.


more blog
dev.to/knutaf
discord
knutaf

when i write dadblogs i include a lot of pics of the kids. i do a lot of side-by-side images where i take two similar or related pictures and put em together to fill the space on the page better. it's tedious and time consuming, so i decided enough is enough

whipped together a small utility called "image_gallery" in rust to do it for me. this is going to save me so much time, the most tedious part, honestly.

let canvas_height = min(img1.height(), img2.height());
let img1 = img1.resize(img1.width(), canvas_height, FilterType::Lanczos3);
let img2 = img2.resize(img2.width(), canvas_height, FilterType::Lanczos3);
canvas = DynamicImage::new(img1.width() + img2.width() + args.margin, canvas_height, img1.color());
canvas.copy_from(&img1, 0, 0).unwrap();
canvas.copy_from(&img2, img1.width() + args.margin, 0).unwrap();

// Only resize the width. Don't constrain by height.
canvas = canvas.resize(args.width, u32::MAX, FilterType::Lanczos3);
canvas.save("output.jpg").unwrap();
syntax highlighting by codehost

You must log in to comment.

in reply to @knutaf's post:

when i write one of my blogs, i back up the html of it and the combined images. i upload those images to my onedrive and embed them in the web page. i use a crappy wordpress blog which gives me a limited amount of styling and html, but i haven't explored if it can do flexbox or the styles you're referring to.

it's an interesting idea and i understand the idea you're suggesting. i'll have to think on whether I want to go for that. there's something appealing to me about having the composited image stored simply so i don't have to worry about some browser's interpretation of my html/css code. i guess that's not as worrisome nowadays, but still.

i think it’s neat how much control that html css offer you. just this little writing can still give you a lot of control imo. here’s the snippet if you want to see it. i made it for a friend’s cohost post which had a lot of side by side images with captions and i share it around a bit because i think it’s just a good snippet in general.

(aspect ratio should be in the form of a fraction btw (e.g. 4/3, 16/9, 3/4, etc))

<figure>
  <div style="display: flex; flex-flow: row; gap: 4px">
    <div style="flex: calc(ASPECT RATIO);">
      <img style="height: auto; width: 100%; margin: 0;" src="LINK-HERE" alt="ALT TEXT HERE">
    </div>
    <div style="flex: calc(ASPECT RATIO);">
      <img style="height: auto; width: 100%; margin: 0;" src="LINK-HERE" alt="ALT TEXT HERE">
    </div>
  </div>
  <figcaption>CAPTION HERE</figcaption>
</figure>

this is sick and wordpress does seem to support this. i'm going to try it out this time. thanks for the snippet!! my html/css knowledge tapered off around 10 years ago, haha