Thumbnail Spacing

  • Author
  • #736056


    Hi! I’m making the thumbnail page for my class members:

    My issue is the space on the fourth row before Pete’s image. All the images were inserted the same way, I don’t understand why that space has appeared. Anyone have ideas for a solution?


    The blog I need help with is


    All the images codes of that page are disrupted, probably because you tried to edit the image captions. Captioned images are preconfigured formulas you cannot directly edit: highlighting the captions and trying to change their formatting via any of the tools of the visual editor will only mess them up. You need to delete everything and re-insert the images.

    After inserting a captioned image, the cursor must be outside the caption area before you continue with the next image. You’ll have difficulty doing this with left aligned images, so I suggest you delete and re-insert them after you switch the editor to HTML.



    Thanks for the tip! I deleted and reinserted all the images without messing with the captions but the space remains. Is there something else I can do?


    Without messing with the captions? So how come they’re all bold and left-aligned now?
    This is what your page would look like if you had done it correctly:
    As I said, if you don’t like the default captions, you cannot change their formatting. If you want them to look different, I can give you a code model and you can use it in the HTML editor to make the captions and everything the way you would prefer. Just tell me how exactly you’d like the captioned images to look: no dash before the names? bold font? different frame size? different background color?



    Hi, thanks again for the help. So I went back and made sure not to mess with the captions, but there’s still a blank space on the second row of pictures. This didn’t seem to happen on your page. Thoughts? Thanks.


    You’re welcome. This time the code of your page is correct.

    Setting the image alignment to left means that the rest of the content will wrap around, that is, start next to the image instead of below it. Since the first image frame is longer than the next two (because of the stupid defaults of 2011 that won’t let the name fit in one line), there’s still some room left next to the first image, so the next row also wraps around it. To override that, you need to switch the editor to HTML and paste this after every three image codes:
    <br style="clear:both;" />
    But to me the dashes are absurd, all that space around the names looks bad, and unequal frames for equally sized images also looks wrong. As I said, I can show you how to change the appearance of these captioned images, if you wish and if you tell me how exactly you’d like them to be.



    Fantastic! Thank you so much for all the help, the code made it work completely. I agree that that dash is unattractive. If I could make the names appear simply without the dash and centered below the image, that would be ideal. Thanks again for the help!

The topic ‘Thumbnail Spacing’ is closed to new replies.