Need help? Check out our Support site, then


WordPress.com Forums » Support

image spacing and caption issues

  1. davidajr
    Member

    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.

    http://galleryd.net/images/duplin

    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>   <br />   <br />   <br />  " but of course, wordpress filters out by non-breaking spaces.

    If I stagger my image alignments, like I did on this page http://galleryd.net/images/49th-avenue , then my caption boxes get distorted, travel under and around multiple images and just look sloppy.

    Any experience with either of these issues?

    Thanks.

    The blog I need help with is galleryd.net.

  2. thesacredpath
    Member

    @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;"> </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.

  3. davidajr
    Member

    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 http://www.galleryd.net/images/duplin with your tip so you can see the results.
    Thanks!

    --David

  4. thesacredpath
    Member

    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.

  5. 1tess
    Moderator

    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">
<tbody>
<tr>
<td>IMAGE_CODE_HERE</td>
</tr>
<tr>
<td>CAPTION_HERE</td>
</tr>
</tbody></table>

  6. ellaella
    Member

    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.

  7. davidajr
    Member

    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
    <br /> <pre><code><table border="0" cellpadding="0" cellspacing="0"> <tr><td> "IMAGE WITH WP CAPTION" </td></tr><tr><td><div style="line-height:4em;"> </div></td></tr> </table>

    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.

  8. panaghiotisadam
    Member

    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;">

  9. davidajr
    Member

    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.

    Thanks.

    --David

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags