Should it be possible to pad an an image using 0.119+ image processing?

feature
1

The new Image Processing features in 0.119.x are pretty slick!

Nice work!

I’m trying to take an existing square image, with a transparent background and add wings to it…

say, for example, I have a 512x512 image…
I want to have a 310x150 “wide format” card…

my plan was to reduce to 150x150 and add 80px on either side to increase the asset dimensions to 310x150, while still maintaining the entirety of the image.
(IOW: No cropping desired)

looking at the underlying imaging package it seems like it should be functionally possible to create a new ‘empty’ image construct with the desired dimensions (310x150) and place the 150x150 asset into the wider image, and mint a new image.

however it doesn’t seem like that end result is attainable with the methods available currently…

I tried:
512x512 → resize ( 150x150) and then

150x150 → crop(310x150) (150x150 image result)
150x150 → fill(310x150) (310x150 image result, zoomed)
150x150 → fit(310x150 ) (150x150 image result)
150x150 → resize(310x150) (310x150 image result, stretched)

Am I missing something? Is this functionality that should exist, and doesn’t? or functionality that causes more confusion/problems than it solves? or…

I looked here on the forums, and on github for issues/questions around this topic, but didn’t find any matches… but then again, it’s entirely possible that I’m just bad at searching; so if this is a repeat question, mea culpa.

W

2

You could start with a 1x1 image, resize to 310x150, then overlay the 150x150 image with x=80 y=0.

3

That’s not a bad idea!

This community really is lucky to have your help. You’ve consistently been a source of legitimately helpful solutions to people’s problems for quite some time.

THANK YOU.

Barring anything BETTER, I’ll likely do just that; however it feels a lil wonky y’know?

Regardless, I hope your day is going awesomely.

:wolf:W

2 Likes
4

Thank you for your kind words.

Below, $bi is the base image and $oi is the overlay image. You could easily turn this into a parameterized partial and call it from anywhere.

{{ with resources.Get "images/1x1-pink.png" }}
  {{ $bi := .Resize "310x150" }}
  {{ with resources.Get "images/a.jpg" }}
    {{ $oi := .Resize "150x150" }}
    {{ with $bi.Filter (images.Overlay $oi 80 0) }}
      <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
    {{ end }}
  {{ end }}
{{ end }}

Note that this will fail silently if it can’t find one of the resources. You may want to warn/error.

2 Likes
5

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.