Put Black Borders arounds tons of Pictures

Looking an an easy or automated way to put borders around pictures, black borders. In the perfect world would like to "select" all the pictures and "simply apply" the chosen black border to them. Possible? How? Thanks!
LVL 26
Lionel MMSmall Business IT ConsultantAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Paul SauvéRetiredCommented:
yes, you can do this using Irfanview image editor:

Irfanview can also batch process the borders, so if you have an entire folder of images to put black borders around, this is seriously painless...

Unfortunately the border option is a little hidden. People are often a little surprised when I show them. You need to open the application, browse to the folder containing the images, and select an image. Once you are viewing an image, either choose the Batch Conversion/Rename option from the File menu, or hit the ‘b’ key on the keyboard.

Download for free here: http://www.irfanview.com/
0
Joe Winograd, Fellow&MVEDeveloperCommented:
Hi Lionel,
Both GraphicsMagick and ImageMagick can do it. I prefer GM over IM, but both are excellent (GM is a fork of IM). I have written several articles here at EE on GM:

Reduce the file size of many JPG files in many folders via an automated, mass, batch compression method

Create a PDF file with Contact Sheets (montage of thumbnails) for all JPG files in a folder and each of its subfolders using an automated, batch method

Create an image (BMP, GIF, JPG, PNG, TIF, etc.) from a multi-page PDF

Convert a multi-page PDF file into multiple image files

The first one is important for you because it explains the download and installation of GM and discusses its various versions. The other articles I show just as reference material in case you are interested in seeing some of its features in action, such as the "fancy" formatting options on the montage subcommand of -frame, -mattecolor, -shadow, etc. However, for what you want, you need just two options, namely, -bordercolor and -border. For example, here are GM and IM commands that do what you want:

gm.exe convert input.jpg -bordercolor black -border 10x10 output.jpg
magick.exe convert input.jpg -bordercolor black -border 10x10 output.jpg

Open in new window

A few comments about the parameters:

(1) -bordercolor must appear on the command line before -border.

(2) "black" is from a standard list of colors. You may see all the colors available with these commands:
gm.exe convert -list color
magick.exe convert -list color

You may also use RGB parameters in that field, such as -bordercolor #000000 for black, #FFFFFF for white, #FF0000 for red, etc.

(3) "10x10" are the dimensions of the border in pixels.

(4) The convert subcommand creates a new output image. If you want to overwrite the source images, change convert to mogrify (which is shown in my first article in the list above). Of course, be careful when overwriting the original images — I suggest making a backup of the originals first. In this case, the file name goes after the options, such as:

gm.exe mogrify -bordercolor black -border 10x10 input.jpg
magick.exe mogrify -bordercolor black -border 10x10 input.jpg

Open in new window

In terms of being able to select pictures and apply the black border to them, I would recommend a simple front-end GUI that would allow you to select multiple individual files or an entire folder or a folder and all of its subfolders (which I would personally do with AutoHotkey). Regards, Joe
0
Shaun VermaakTechnical Specialist/DeveloperCommented:
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
0
HTML5 and CSS3 Fundamentals

Build a website from the ground up by first learning the fundamentals of HTML5 and CSS3, the two popular programming languages used to present content online. HTML deals with fonts, colors, graphics, and hyperlinks, while CSS describes how HTML elements are to be displayed.

Lionel MMSmall Business IT ConsultantAuthor Commented:
@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.
0
Joe Winograd, Fellow&MVEDeveloperCommented:
Lionel,
What file types are your pictures — GIF? JPG? JPEG? PNG? TIF? TIFF? Others? Please let me know all that apply. Thanks, Joe
0
Shaun VermaakTechnical Specialist/DeveloperCommented:
Have a look at this article. Basically you add this to Style.css
https://css-tricks.com/forums/topic/border-around-products-wordpress-woocommerce/
.woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img {
    position: relative;
    display: block;
    border: 1px solid red; /* or whatever */
}

Open in new window

0
Lionel MMSmall Business IT ConsultantAuthor Commented:
@ 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.
0
Shaun VermaakTechnical Specialist/DeveloperCommented:
Can you post your site?
0
Lionel MMSmall Business IT ConsultantAuthor Commented:
it is still a mess of learning and testing but here goes (don't judge me too harshly) caladiums.net
0
Joe Winograd, Fellow&MVEDeveloperCommented:
> 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 )

Open 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"

Open 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-no-border
Original with 10x10 black border:

original-border
Enhanced no border:

enhanced-no-border
Enhanced with 10x10 black border:

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

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

Open 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
0
Shaun VermaakTechnical Specialist/DeveloperCommented:
You can add it to a global custom CSS
.product-image-wrapper {
    padding: 10px;
    background: #fff;
    border: 1px solid #BCBCBC;
}

Open 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
0
Lionel MMSmall Business IT ConsultantAuthor Commented:
@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.
0
Paul SauvéRetiredCommented:
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.
0
Lionel MMSmall Business IT ConsultantAuthor Commented:
hey guys I am working on this but have life getting in the way of fat progress; I ahven't given all the provided solution adequate attention and have focused on adding it directly to my website for auto-adding the borders but will get abck with you once I have done that and tested the others
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Lionel MMSmall Business IT ConsultantAuthor Commented:
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.
0
Joe Winograd, Fellow&MVEDeveloperCommented:
You're welcome, Lionel, and thanks back at you for explaining the situation in your closing comment — very helpful! Regards, Joe
0
Lionel MMSmall Business IT ConsultantAuthor Commented:
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.
0
Joe Winograd, Fellow&MVEDeveloperCommented:
Thanks for the update, Lionel. Great to get feedback like that. Regards, Joe
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Images and Photos

From novice to tech pro — start learning today.