Photos do not line up

  • Unknown's avatar
    saltandserenity · Member ·

    I do not speak html.
    When I am in the edit mode I can get my pictures to line up properly the way I want them. For example, I want to have 4 thumbnails in a quad pattern. When I go to preview it has unaligned the photos and wrapped the text around everything. Why can’t I get it to stay the way it looks in edit mode, all lined up nicely?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    timethief · Member ·

    I believe the solution to your problem may be found here http://gammagirl.wordpress.com/2008/07/27/not-the-official-wordpresscom-gallery-faq/

    If I am wrong then at least this thread will be on the front page of the forum so another volunteer or Staff can help you.

  • Unknown's avatar
    1tess · Moderator Emeritus ·

    Your pictures may look fine in the visual editor as you are working, but the visual editor is not so much ‘what you see is what you get’ as it is a general editor meant to work with all the themes on wp.com.

    Some themes are very narrow, some are wide, and some are flexible (meaning that when you change the size and shape of your browser window, the size and shape of your posting column will change.). Add to that the fact that different browsers display fonts, images, lines, spaces differently: IE is very different from Safari and both are different from Firefox.

    Also, consider some people browse on iPhones or blackberries, others on hi-res giant flat-screens, and some on older low resolution monitors.

    It would be impossible to make one visual editor that would work in all of these situations.

    What you need to display an array of photos with text is a table. A table can set the relationship each image has with the others and with your text.

    I have to go away right now, but if no one else jumps in to help you set up a basic table, I will be back in the forum mid-day tomorrow.

    PS The gallery feature that timethief mentioned works ok, but it can be difficult to work with, and the caption function at wp.com is primitive to say the least. No links, no formatting, and it’s easy to get one caption trapped inside another picture and caption so you end up with big blocks of grey… Well, that is just my opinion.

  • Unknown's avatar
    timethief · Member ·

    @Tess
    I’m a table lover too but I hesitated to provide that answer because others have such sophisticated image answers … lol :D I use HTML tables frequently and then all my images are exactly where I want them to be.

  • Unknown's avatar
    1tess · Moderator Emeritus ·

    @timethief
    Tables are probably the most efficient way to control lining up 4 pictures in a quad pattern.

    @saltandserenity

    Simple table to learn the names.
    tbody is the table body, tr is table row, td is table data
    tbody, tr, and td have both opening and closing commands: <open> </close>

    <table border="0" cellspacing="0" cellpadding="0" width="100%" align="center">
<tbody>
<tr>
<td>TABLE_WITH_ONE_ROW_ONE_CELL</td>
</tr>
</tbody>
</table>

    table with 4 pictures: 

    <table border="0" cellspacing="0" cellpadding="0" width="100%" align="center">
<tbody>
<tr>
<td style="padding-right: 1em;" valign="middle">LEFT_TOP_CONTENT_HERE</td>
<td style="padding-left: 1em;" valign="middle">RIGHT_TOP__CONTENT_HERE</td>
</tr>
<tr>
<td style="padding-right: 1em;" valign="middle">LEFT_BOTTOM_CONTENT_HERE</td>
<td style="padding-left: 1em;" valign="middle">RIGHT_BOTTOM_CONTENT_HERE</td>
</tr>
</tbody>
</table>

    table with 2 pictures under a line of text: 

    <table border="0" cellspacing="0" cellpadding="0" width="100%" align="center">
<tbody>
<tr>
<td style="text-align: center;" colspan="2">TEXT_ACROSS_THE_TABLE</td>
</tr>
<tr>
<td style="padding-right: 1em;" valign="middle">LEFT_CONTENT_HERE</td>
<td style="padding-left: 1em;" valign="middle">RIGHT_CONTENT_HERE</td>
</tr>
</tbody>
</table>

    Study my code with these simple rules in mind and you will be able to make all sorts of tables:

      HTML markup tags are usually called HTML tags
      HTML tags are keywords surrounded by angle brackets like <html>
      HTML tags normally come in pairs like <b> and </b>
      The first tag in a pair is the start tag, the second tag is the end tag
      Start and end tags are also called opening tags and closing tags
  • Unknown's avatar
    1tess · Moderator Emeritus ·

    A non-table method of putting 2 pictures side by side in the center of your posting column:

    It’s best to work in the html editor so you can see exactly where your cursor is.

      Insert one thumbnail from your library. Set its alignment to none.
      Notice that its code begins with
      Be sure your cursor is right after the > symbol.
      Insert a second picture from your library and set it for align none.
      Now you can switch to the Visual Editor, and edit each picture to add horizontal and vertical space to each.
      Finally, highlight both pictures, and use the “center align” icon to center the two images. (It is more precise if you add code in the html editor, but you can at least check to be sure the code looks like this: <p style=”text-align: center;”></p>

    Now, to put 2 more pictures side by side centered below the first 2, press return after the </p> closing paragraph tag. Repeat the same procedure as above.

  • Unknown's avatar
    1tess · Moderator Emeritus ·

    Another non-table method of aligning pictures into a 2 x 2 array: 

    <div style="float:left;width:50%;">A-LEFT
B-LEFT</div>
<div style="float:right;width:50%;">A-RIGHT
B-RIGHT</div>

    You must use pairs of pictures that are the same height to maintain the grid pattern.
    a-left — a-right
    b-left — b-right
    c-left — c-right

    Unless you edit your pictures in the advanced settings, your pictures won’t have space between them.

    If your left and right columns are not the same length (height), then any text you type under the columns will flow up and fill in the shorter column. or even messier.

  • Unknown's avatar
    1tess · Moderator Emeritus ·

    Correction of https://en.forums.wordpress.com/topic/photos-do-not-line-up?replies=7#post-433179

    A non-table method of putting 2 pictures side by side in the center of your posting column:

    It’s best to work in the html editor so you can see exactly where your cursor is.
    Insert one thumbnail from your library. Set its alignment to none.
    Notice that its code begins with
    Be sure your cursor is right after the > symbol.
    Insert a second picture from your library and set it for align none.
    Now you can switch to the Visual Editor, and edit each picture to add horizontal and vertical space to each.
    Finally, highlight both pictures, and use the “center align” icon to center the two images. (It is more precise if you add code in the html editor, but you can at least check to be sure the code looks like this: <p style=”text-align: center;”></p>
    Now, to put 2 more pictures side by side centered below the first 2, press return after the </p> closing paragraph tag. Repeat the same procedure as above.

  • Unknown's avatar
    1tess · Moderator Emeritus ·

    Correction of https://en.forums.wordpress.com/topic/photos-do-not-line-up?replies=7#post-433179

    Apologize for not getting the code to show up:
    Insert one thumbnail from your library. Set its alignment to none.
    Notice that its code begins with < / a >
    Be sure your cursor is right after the > symbol.
    Insert a second picture from your library and set it for align none.
    Now you can switch to the Visual Editor, and edit each picture to add horizontal and vertical space to each.
    Finally, highlight both pictures, and use the “center align” icon to center the two images. (It is more precise if you add code in the html editor, but you can at least check to be sure the code looks like this: <p s ty le=”text -align: center ;”>LOTS_OF_STUFF< / p >
    with the < p tag > opening and closing < /p >

  • The topic ‘Photos do not line up’ is closed to new replies.