Add configurable amount of whitespace as border

[IAmJulianAcosta]

Hi! Thanks for supporting this feature, I was thinking about it and it could be great if the border have any color, not just white.

[sewpafly]

@stereoactivo - I've been thinking about this, and looking at the different options, and it seems to me that the best way to accomplish this is actually through CSS, as below. Do you have a use case where you think having the border defined in the actual image is a better solution? Can you share it?

Thanks.

.img_class {
     border:10px solid red; /* Style of border (solid, dotted, inset, outset, ridge, grooved) */
     padding:20px 10px 5px 20px; /* Padding of border by clock-wise rule, starting from top */
     background:url('file.jpg'); /* Background image file if padding applied */
}

[IAmJulianAcosta]

@sewpafly - look at this page: http://acmfr.org/analisis-contraloria-a-la-reforma-a-la-salud/

Is a WP site that I developed some time ago. If you can see, the logo has the C and A letters cropped, because the original had 4:3 aspect ratio, but when the post author uploaded the logo, she cropped it to match the 300 x 300 size required for the theme, the logo was cropped. What I am proposing is when editing the image, I can add an arbitrary border of any color, So, in my example, I can add a 50px white border top and bottom, so when I crop the image to square format, I don't lose any part of the photo.

.I found something interesting in stackoverflow: http://stackoverflow.com/questions/8741172/add-whitespace-to-image-and-save-file-to-server. I think that in the cropping UI CSS could be used to add a border, and after that use the value for adding the current border.

I don't have a use case for that.

[sewpafly]

You should be able to define a post-thumbnail of 300x300 and then use PTE to crop it to the correct parameters and then use CSS to add any border that you need. Adding the borders like this gives you more flexibility and lets you change them on an as-needed basis, rather than having to re-create them every time you want to change the border.

On Thu, Nov 21, 2013 at 3:40 PM, stereoactivo notifications@github.comwrote:

@sewpafly https://github.com/sewpafly - look at this page: http://acmfr.org/analisis-contraloria-a-la-reforma-a-la-salud/

Is a WP site that I developed some time ago. If you can see, the logo has the C and A letters cropped, because the original had 4:3 aspect ratio, but when the person that uploaded the logo, cropped to match the 300 x 300 size required for the template, the logo was cropped.

What I am proposing is when editing the image, I can add an arbitrary border of any color. I found something interesting in stackoverflow: http://stackoverflow.com/questions/8741172/add-whitespace-to-image-and-save-file-to-server. I think that in the cropping UI CSS could be used to add a border, and after that use the value for adding the current border.

I don't have a use case for that.

— Reply to this email directly or view it on GitHubhttps://github.com/sewpafly/post-thumbnail-editor/issues/78#issuecomment-29035908 .

[IAmJulianAcosta]

Look at this screenshot:

I can't crop a 300 x 300 image without removing some parts of the image. I could crop a 400 x 300 image, and add 50px border top and bottom. Adding CSS is an option for me; but the content creator of the page doesn't know nothing about web development. That's why I asked for the feature, because not everyone knows about CSS

[sewpafly]

In this example, do you just want the circles cropped? That should be easy to crop into a 300x300 image. Or do you want the text as well? If you want the text as well, then I think I'll rename this feature request. You want the ability to have the crop actually extend the image lengthwise so it fits the 1:1 crop aspect ratio. I would call it, "Fit to image". Is that accurate?

[sewpafly]

GD implementation: 88b7e0c392

[IAmJulianAcosta]

In this example, do you just want the circles cropped? That should be easy to crop into a 300x300 image. Or do you want the text as well? If you want the text as well, then I think I'll rename this feature request. You want the ability to have the crop actually extend the image lengthwise so it fits the 1:1 crop aspect ratio. I would call it, "Fit to image". Is that accurate?

---

Hi! I want the text also! You can rename the feature if you want, but your comment reflects exactly what I want (English isn't my native language, so I had trouble trying to explain what i want).

In my example, the desired behavior is that I can make the image taller, so it can fit the 1:1 aspect ratio, without losing the sides of the image. Also that I can select the background color. I can explain better showing you the implementation that Photoshop currently has:

[sewpafly]

This feature is already in the latest version. It should work how you've described. See http://sewpafly.github.io/post-thumbnail-editor/editor/#advanced-cropping-options (Look at item no. 5) for more information.

[IAmJulianAcosta]

Nice! It worked very well. THANKS!!

I suggest to improve the usability of the feature, adding a select ratio item to select if I want to activate the feature or use a fixed ratio. If you don't show me the link, I would never have noticed that I should type "width/height" to use the feature.

Also I should put a "pick color" button. The current behavior causes confusion, because the checkbox is checked when the user opens the tool, so the user must uncheck and check again the checkbox to open the color picker, and is not clear that the feature exists and can be used.

Here is a visual diagram of that I propose: