BatFix is pretty much the simplest theme ever. All it does is add a single CSS file to your WordPress site. The CSS file contains a handful of useful classes. If you already know CSS, you can probably do far more than this with less effort, so you don’t need BatFix. On the other hand, if you don’t feel like learning CSS, you can use this and save some trouble.
Usage
Once the plugin is installed and active, any time you want to apply its features to an image in the body of a page, just edit the image, click the Pencil icon and put one or more of the BatFix class names into the Image CSS Class option. After you click Update you’ll see the class taking effect.
The classes you can use are:
max-NN | where NN is one of 5, 10, 15, 20, … 85, 90, 100. Limit the image so it’s never larger than NN% of the content area, regardless of how large the image file is. |
---|---|
wide-gap-DDD | where DD is top, bottom, left or right. Increase the gap (padding) between image and text slightly. |
narrow-gap-DDD | Decrease the gap. |
no-gap-DDD | Remove the gap completely. Text will be right flush up against the image. |
pair-left and pair-right | Used in pairs. Makes sure the two images you specify each take up 50% of the width and are side-by-side. |
You can use more than one of these in a single image, though obviously not all combinations make sense. But if you want an image to be no more than 30% of the page width and to have a wide padding around it, you would generally use either the left or right alignment buttons (see the first and third icons in the image above) and then add classes of max-30 wide-gap-right (if it’s a left-aligned image) or max-30 wide-gap-left (if it’s a right-aligned image).
As an example, the right-aligned image above has classes of max-45 wide-gap-left. Try resizing the page to see how that works. It’s a small image, so on a large screen it’s already less than 45% of the width so it won’t change, but it you narrow the window it will shrink accordingly.
Here’s a demonstration of pair-left and pair-right. The images are just pasted in with no alignment and given the appropriate classes.