Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create padding image filter #11599

Closed
jmooring opened this issue Oct 24, 2023 · 5 comments
Closed

Create padding image filter #11599

jmooring opened this issue Oct 24, 2023 · 5 comments

Comments

@jmooring
Copy link
Member

jmooring commented Oct 24, 2023

Return an image resource that you can use with images.Text and images.Overlay.

images.Create WIDTH HEIGHT [BGCOLOR] [FORMAT]
  • Width and height must be in the range [1,10000] (or something smaller, but put a limit on it).
  • Background color is RGBA, with length of 3, 4, 6, or 8 (e.g., #123, #123f, #112233, #112233ff. If alpha not specified, opaque. Default is white.
  • Format is one of jpeg, webp, etc. Default is png.

The way to handle this today is with a 1x1.png in the assets directory that you grab as a resource and then resize.

Reference: https://discourse.gohugo.io/t/should-it-be-possible-to-pad-an-an-image-using-0-119-image-processing/46684/4


EDIT: Rethinking this, the specific case referenced above, image padding, would probably be handled better with an image filter.

images.Pad D1 [D2] [D3] [D4] [BGCOLOR]

Where the dimensions use the same syntax as CSS padding (e.g., if you provide one number if affects all sides), and background color is as previously described.

@bep bep removed the NeedsTriage label Oct 24, 2023
@bep bep added this to the v0.120.0 milestone Oct 24, 2023
@bep bep added Enhancement and removed Proposal labels Oct 24, 2023
@bep
Copy link
Member

bep commented Oct 24, 2023

That would be useful, but we cannot re-invent the wheel here, so I suggest:

{{ $image := images.Create "200x200 jpg #000" }}

Which is the same "string API" we use in Process etc.

@bep
Copy link
Member

bep commented Oct 24, 2023

The way to handle this today is with a 1x1.png in the assets directory that you grab as a resource and then resize.

That said, I say that the common way today is to use a pretty background image (with some gradient or something) for your overlay images, which is trivial to make in most photo editors.

@jmooring
Copy link
Member Author

Agreed. The primary use case behind this suggestions is padding an image, which today is get+resize+get+overlay.

Instead of doing create+get+overlay, maybe just a filter so you can do get+pad.

@jmooring jmooring changed the title Add images.Create template function Create Padding image filter Oct 28, 2023
@jmooring
Copy link
Member Author

Renaming this issue; the ability to pad an image is the primary use case. We can revisit image creation at a later date if needed.

@jmooring jmooring changed the title Create Padding image filter Create padding image filter Oct 28, 2023
jmooring added a commit to jmooring/hugo that referenced this issue Oct 28, 2023
@bep bep closed this as completed in 3ed28e4 Oct 29, 2023
Copy link

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Nov 20, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants