Put Black Borders arounds tons of Pictures

I see web graphics as one of the tags.

Just a question... If you are using these photos on a webpage rather apply styling to the images via CSS instead of directly to the images

@shaun they are for my website to make my pictures pop but I am not a css or html expert. I am using wordpress and woocommerce and want all my products in my woocommerce shop to have a black border so I was going to simply put one around them but if you can tell me how a dummie can do it I'm game to learn something new. otherwise I will try Paul's suggestion of Irfanview; thanks to all so far.

Lionel,
What file types are your pictures — GIF? JPG? JPEG? PNG? TIF? TIFF? Others? Please let me know all that apply. Thanks, Joe

@ Joe just JPG's about 100 product pictures
@ Shaun -- don't forget I said I was a rookie (dummy) in Wordpress and woocommerce -- where is style.css; will have have to use file manager in my CPanel to get there and is there more than one style.css (read link and that info is not provided) Details please and thanks.

Can you post your site?

it is still a mess of learning and testing but here goes (don't judge me too harshly) caladiums.net

> just JPG's about 100 product pictures

OK, that will be very simple to do in a batch file using the (free!) GraphicsMagick tool. First, download it, as shown in my first EE article about GM. Second, create a batch file, as shown in both my first and second EE article about GM, but with these commands instead:

FOR /R "C:\StartingFolder\" %%G in (.) DO (
  PUSHD %%G
  gm.exe mogrify -bordercolor black -border 10x10 *.jpg
  POPD )

Select allOpen in new window

Some comments about that code:

(1) Of course, change the "C:\StartingFolder\" to wherever your JPGs are.

(2) As I mentioned earlier, you may make the border any color and any size that you want (the code now has black and 10x10 pixels).

(3) The code does a mogrify, which means that it modifies the JPG files directly. Because of this, I strongly suggest copying all the JPGs into a different folder for safekeeping before adding the border — just in case something goes awry.

(4) The code recurses into all subfolders of the starting folder. But if all the JPGs are in a single folder, you don't need the recursion into subfolders, so the solution is literally one line of code in a command prompt or batch file:

gm.exe mogrify -bordercolor black -border 10x10 "C:\StartingFolder\*.jpg"

Select allOpen in new window

One other thing. You said earlier that the objective in this is to "make my pictures pop". The black border may help, but another approach is to enhance the pictures. For example, for a client in the Oriental rug business, I wrote a program called EnhanceImage that uses GraphicsMagick. His rugs are gorgeous (and very expensive!), but the photos from his camera do not do them justice — they look "washed out". So he uses my EnhanceImage program on the photos before uploading (it is also possible to install GraphicsMagick or ImageMagick on the website, so that the enhancement is done on the server). From a business ethics/integrity perspective, it's important to note that the enhanced images are not to deceive his customers — it's simply that the enhanced images look much more like the actual rug in real life than the photos coming from the camera.

I downloaded the first "Pink" photo at your site, Florida Sweetheart, and ran both AddBorder and EnhanceImage on it (which could easily be combined into a single program). Here are the results:

Original


Original with 10x10 black border:


Enhanced no border:


Enhanced with 10x10 black border:


Btw, my EnhanceImage program uses a GraphicsMagick call like this:

gm.exe convert input.jpg +contrast -gamma 0.8 -quality 100 output.jpg

Select allOpen in new window

You may, of course, experiment by adjusting the various parameters (the -quality parameter is the ticket to file size, as discussed in my first GraphicsMagick article).

Regards, Joe

You can add it to a global custom CSS

.product-image-wrapper {
    padding: 10px;
    background: #fff;
    border: 1px solid #BCBCBC;
}

Select allOpen in new window

https://www.8theme.com/topic/how-can-add-box-frame-to-product-image-in-woocommerce/

If you do not want to fiddle with CSS have a look at this plugin
https://wordpress.org/plugins/wp-image-borders/

I would not "tattoo" this onto 100+ images
Terrible waste because every time you change it, you need to re-upload and fix 100+ products

If you want help, you could always give me temp access to your site

@Shaun I like the idea that product pics auto-get borders; that way if I ever change my theme and or my mind I can easily remove too so I will look into that option.
@ Joe -- thanks for the info -- will check it out especially if I can end up with a simple batch file that will auto enhance and/or auto add borders however Shaun's option seem like a better approach but will check both out.

I would not "tattoo" this onto 100+ images
Terrible waste because every time you change it, you need to re-upload and fix 100+ products

you can always create a child theme for any wordpress theme and any theme updates do not affect the child theme.

Hey guys so sorry that I did not get to fully test and try all your suggestions--I hate closing questions without providing a solution I actually put into practice but I also didn't think it was fair to not award you for your time and suggestions. I can't say which suggestion actually works best for any future questioners and for that I apologize in advance--I simply just don't have the time and the client decided to go with a website that has a black background so black borders no longer had the urgency it had before. Again thanks for your time and my apologies for not giving a tried and tested solution.

You're welcome, Lionel, and thanks back at you for explaining the situation in your closing comment — very helpful! Regards, Joe

Since accepting an answer I have actually had to put this into use and what worked was Shaun's second suggestion; this was good in that it put a black border around all images that are products (.product-image-wrapper) but I needed it to work on all images on the site so I adjusted it to this
img {
position: relative;
    display: block;
    border: 5px solid black;
}
and that put a black border around all images on my site which is what I needed.

Thanks for the update, Lionel. Great to get feedback like that. Regards, Joe