Image Wrapping margin problems

  • Hi all,

    I’ve read the codex file on this issue, and I’ve looked at a bunch of other posts and followed the instructions in several of them, but I still can’t get this to work.

    What I want to do is have it so that when I put an image in a post and align it left or right, the text wraps nicely around the image — and this is the important part — has a space of 5px between the text and the image. I want to be able to do this without having to insert a style=”whatever” tag every time I put an image in a post. Right now I can just do this using the html command hspace=”5″, so to have to put in a style=”whatever” tag is just as much effort. Ideally I just want this to happen automatically every time I put in an image. Any ideas? My style.css file reads as follows: 

    img.alignright {
	padding: 4px;
	margin: 5px 5px 5px 5px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 5px 5px 5px 5px;
	display: inline;
	}

.alignright {
	float: right;
        border: 0;
        padding: 2px;
        margin: 0 5px 0 5px;
	}

.alignleft {
	float: left
        border: 0;
        padding: 2px;
        margin: 0 5px 0 5px;
	}

    My site is: https://www.metalsucks.net

    Thanks very much in advance for your help!

    -ben

Viewing 9 replies - 1 through 9 (of 9 total)

  • The solution isn’t as easy as last time. The CSS code you pasted above isn’t being used by your site at the moment. When you set an image to have align="left", you’re not activating that CSS.

    Note this comment in your theme’s CSS:

    /*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

    The theme’s author (and I agree) was suggesting that rather than set align="right" that you instead set class="alignright". I think that will have the intended effect, and it’s easier than using the style=... tags that you rightly wish to avoid.

    Thread Starter krez

    (@krez)

    Adam — thanks for that, and I do understand the difference between the class and align tags. However I’m trying to avoid having to use either. In other words, as it is now, I can enter in “align” or the hspace=”5″ tag to the same effect. Both require manual editing.

    What I really want to do is somehow set up my CSS file, or some other file, to AUTOMATICALLY insert the class tag every time I pop an image in a post using the rich text editor. Know what I mean? There’s got to be a way to have it insert that code.

    Any ideas?

    -ben

    Ahh… What you want is a plugin. You could do this yourself pretty easily. This might work, but I haven’t tried it. Create a file and put this inside:

    <?php
/*
Plugin Name: Images Hack
Description: All images in posts will be given class='alignleft'
Author: Me
Version: 0.1
*/

// you need the above to make it show up in your plugins menu

function align_all_images_left($content){
  $content = str_replace( '<img', '<img class="alignleft"', $content );
  return $content;
}

add_filter('the_content', 'align_all_images_left');
?>

    That should probably do the trick. But it will align ALL images left.

    Save the file as whatever.php and upload to your plugins directory. Then activate it from the plugins menu.

    Come to think of it, this plugin might have funny effects on images you have uploaded in the past, since you have already given them class, align, or hspace attributes. But there should be no problem with newly uploaded images.

    Thread Starter krez

    (@krez)

    Let me clarify further:

    Really all I want is so that EVERY IMAGE on my site has a margin of 5px around it on all sides.

    Thread Starter krez

    (@krez)

    Oops, my above reply was before I saw your most recent post.

    The plugin idea is an interesting fix. I am a little concerned about it having a funny effect on past images, but I may have to deal with that no matter what solution I employ.

    Also, I don’t want all images to be aligned left (gotta have a little variety…).

    You could also make the plugin add the hspace attribute instead of the class attribute. That would probably prevent any odd problems with older images.

    Note that the plugin affects only images in posts, not in the sidebar or anything.

    Thread Starter krez

    (@krez)

    I just tried implementing this with the hspace=”5″ code instead of the alignleft bit. It worked!! Thank you!

    This is a GREAT plugin, but how would it be modified to use the hspace=”5″ instead of the align left?

    Is there anything else that needs to change?

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Image Wrapping margin problems’ is closed to new replies.