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.

2 Answers 2


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)

RokPad editor

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?

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. :-)

  • 3
    Perfect, and this method can be applied to so much more than image editing! It has always been a nightmare to edit pure html in the standard html-editor
    – TcAcS
    Commented Mar 22, 2016 at 19:54
  • Thanx @TcAcS - You're right about that... I'm glad to see that you got right idea ;-)
    – Mikan
    Commented Mar 22, 2016 at 19:57

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.