Need help? Check out our Support site, then


adding thumbnail photos to blog

  1. Hi~
    I'm trying to add 3 thumbnail photos to the bottom of my blog. So, I click one to be added left, one center and one right. When I look at the blog they are not in a straight line, they are stair stepped down to the right. How can I make all 3 photos appear in a straight line?

    thanks in advance.

    Tina

    The blog I need help with is tinascocina.com.

  2. I don't see the 3 photos at the bottom of the blog; can you add them so we can see an example?

  3. Do you mean the bottom of a blog post or in the footer of your site?

    If in a blog post, you can use the Gallery feature to do this.
    http://en.support.wordpress.com/images/gallery/

    If in the footer, you can use three image widgets depending on whether your theme supports this in the footer.
    http://en.support.wordpress.com/widgets/image-widget/

  4. I tried to put them in the bottom of the blog post and could not get three of them in a straight line. So I scattered the among the post. See: http://tinascocina.com/2013/06/13/low-fat-fruit-tart/ (they are medium size here instead of thumbnail).

    I will try your suggestion of using the gallery feature.

    Thank you both for your suggestions!

    Tina

  5. Align left/center/right doesn't mean place at the left/center/right part of the main column.
    Align left/right means place at the left/right part of the available space, and make the rest of the content wrap around, i.e. start next to instead of below the image (except if the content that follows overrides this). Align center means place at the center of the main column, and display as a block, i.e. nothing in the remaining space left and right of the image. That's why you got the "stair stepped down to the right" effect.
    To display three thumbnails in a row, you need to set the alignment of all three to left. Then you need to switch the editor to Text (=code) and add something to prevent any further wrap around. One way to do it is paste this after the third image code:
    <div style="clear:both;"></div>

  6. Thanks I will try this!

Topic Closed

This topic has been closed to new replies.

About this Topic