Edit multiple images at once

Question

I've got 25 images in one article and I want to make them all have a margin of 20px. Is there an easier way of doing this than opening the image manager and edit every image one at a time?

I'll have to do this same thing in a couple of other articles as well, so I really need to find an efficient way of doing this.

Answer 1

Sure there is an easier way of doing what you need, and also any other batch change in article...
I've been doing it for ages...

But for that you have to use editor more suitable for programmers than writers.
That editor is RocketTheme RokPad.

Once you install it and set it as default editor (you can also use Editor Switcher if you want to switch editors within article editing screen), among many options, in toolbar there is "Find and Replace" command (see below)

Now comes important and harder part. I cannot tell you exactely what to enter in Find and Replace boxes, that you will have to figure by yourself. I can give you just an example. Find style=" and Replace with style="margin:20px;.

There are some drawbacks though:

• What if you have other style=" parts which don't belong to <img> tag?
• What if <img> tag has no style="" part at all?
• etc...

Exact strings depend of your specific article content, but you got an idea now, right?

EDIT:
To be perfectly honest, before I have discovered this gem of RT RokPad three years ago, I've been using another way of achieving same result:

• I would [Toggle Editor] (JCE of course) to source code
• Ctrl+A then Ctrl+C
• Switch to my favorite Windows editor (IDM UltraEdit of course)
• Ctrl+V and edit it to my liking, by using all powerfull UE commands
• When finished editing I would copy it and paste back to JCE

Same result, just little bit longer, and not as fancy-schmancy as with RokPad. :-)

Answer 2

An alternative way to do this is to apply the margins via a suitable CSS selector in a custom CSS file.

You can limit the styling to a single page if you want by using a page class and including this in your CSS selector.

For example, if you added a page class of "my-page", your CSS might look something like this:

.my-page img {margin: 20px;}

although you'd probably want to be a little more specific so that the styling only applies to the images in the article and not every image on the page. Browser developer tools can be useful in inspecting and finding the best CSS selector(s) to use.

See https://joomla.stackexchange.com/a/3878/120 to learn more about best practice custom CSS files.

See https://joomla.stackexchange.com/a/15361/120 to learn more about page classes.