image spacing and caption issues

  • Author
  • #356842


    Hey guys.

    I have a few different photo pages on my blog I tried to create using the basic “caption” feature in the image profiles.

    When I align all of my captioned images on to the left, the captions load fine, but I cannot control the spacing between the images and all text just wraps around the first image that doesn’t fill up the full width of the frame.

    If you visit this page, scroll down to the fourth image and you will see what I mean. The link and text “Back to Gallery” is coded for the bottom of the page, but it wraps up around this image. Also, I want to have about four blank lines of space between each image, but the only way I know to do this is a code like "<p>  
    but of course, wordpress filters out by non-breaking spaces.

    If I stagger my image alignments, like I did on this page , then my caption boxes get distorted, travel under and around multiple images and just look sloppy.

    Any experience with either of these issues?


    The blog I need help with is


    @david, my suggestion is to NOT use the gallery function since it does not give you any spacing options. You get what you see. My suggestion is to put your images in one at a time, and my suggestion is to do this in the HTML tab rather than the visual tab when you are wanting to add additional spacing between the images. Then after inserting each image, put the following after it and then hit return once after adding the code below and insert another image. Repeat with each image, inserting the code below between images.

    <div style="line-height:5em;">&nbsp;</div>

    I put in 5em as a value just as an example. em spacing means loosely, times the height of a normal capital “M” (as defined in the CSS) and is now becoming the standard spacing for web stuff. You can adjust that number as you see fit, and it also takes decimal values, so you could use 3.4 or 6.1 as an example.



    Thanks for the tip. That spaces out my full-width images fine, but once again, as soon as the page hits an image that doesn’t fill the frame, the text, spaces and all begin to clog.

    Also, I didn’t use the “Gallery” function. I have just posted each image, one at a time, through the HTML editor.

    I updated with your tip so you can see the results.



    Go back into the editor, edit each image and change it from “left align” to “none.” With “none” the images will left align, but any text will not wrap the image. Also, on the “back to image gallery” link you have put in, put your cursor right before it (after changing things to align “none” and hit return to move it down below the image.


    Moderator Emeritus

    If you don’t want the text to wrap around the images, use align none or align center.
    Captions can be messy if any other code gets mixed into them and the best way to do them is to insert all the pictures sans caption, write and format your post, then go back to add the captions.

    In my opinion, the captions feature leaves a lot to be desired. Tables give you a lot more control over how the pictures and captions look:

    <table style="border:1px solid #cdcdcd;background-color:#eeeeee;padding:2px;" border="0">



    I agree it leaves a lot to be desired, tess, and so does the gallery feature. To be honest, the few times I’ve needed a caption I’ve taken my usual PoLR and added it in the photo editor when optimizing the image. Quick, done, no surprises.



    Thanks for all the tips guys.

    Whenever I would set my image alignments to “center” or “none” my captions would absolutely go crazy. The images would be in the right place, and the caption text would be there, but I would get random gray shadow boxes (the type that normally just surrounds an image and its caption) running all over my page. It is like there is no top or bottom constraint on the shadow boxes generated by the caption function.

    I don’t know if this was just a problem for my computer’s settings or what.

    Anyways, to take care of it I ended up creating a table and putting each image and it’s caption in a cell.
    To get my spacing right, I used the tip TSP gave me, so my table ended up looking like

    <table border="0" cellpadding="0" cellspacing="0">
    </td></tr><tr><td><div style="line-height:4em;">&nbsp;</div></td></tr>

    This protects my layout for now, at least for my browsers. It would just be nice if captions worked easily on their own, or if there was a java script photo gallery option (just like the script that launches when you add an image to a post).

    This is my first time posting, and my second week “blogging” so I appreciate all the feedback.


    The div/line-height code has no place in the table code; the “natural” way is to start the table with this:
    <table style="padding-bottom:2em;">



    Awesome. That’s what I was hoping to do, but I couldn’t find the code to just pad the bottom of the cells. I was worried that padding the sides might screw up my blog, sidebar, etc. since I had “full-width” images in it.



The topic ‘image spacing and caption issues’ is closed to new replies.