WordPress.com

1. kevanp
   Member
   Feb 24, 2012, 6:42 PM

   I have been struggling for hours, trying simply to create a row of small images (200px wide) on a page. I've read the instructions about aligning each image to the left, but the problem is where the second and subsequent images go, relative to the first one. Sometimes the second image appears to the left of the first one (which is not what I want), sometimes it even infiltrates the caption of the first image, so that all I see on previewing is one image with two captions!

   And on the subject of captions, although all of mine fit in one line beneath their respective images, the vertical space that each caption occupies varies, so that some captions are closer to the image than others.

   I'm happy to set all this up using HTML, if someone could tell me what to code. I'm using Nishita, with custom design, which I've so far only used to specify fonts.

   Thanks.

   The blog I need help with is kevanpegley.com.

2. justpi
   Member
   Feb 24, 2012, 6:51 PM

   Link to the page in question please.

3. kevanp
   Member
   Feb 25, 2012, 12:51 AM

   Here's the link.

   http://kevanpegley.com/work/

   But be aware that I'm still in the process of setting the site up, so I haven't put it into the public domain yet. You'll probably need to get authorization from me before you access it. Also, there are currently just two pictures on the page in question -- I plan for there to be about 20.

4. 1tess
   Moderator
   Feb 25, 2012, 12:59 AM

   Without access to the page or post with the problems, we volunteers will have an impossible time to understand exactly what your problem is about.

   Perhaps you could set your blog/site to public but not searchable?

   There are several suggestions about using tables, various formatting techniques, or even help you with basic image alignment, but without specifics, it is a guessing game about what you want to accomplish.

   may could be this will be useful:
   http://wpbtips.wordpress.com/2009/06/10/formatting-text-pt-1/

5. kevanp
   Member
   Feb 25, 2012, 1:08 AM

   Understood -- though I think my query is more of a general nature than specific to my site. Anyway, I've just reset the privacy setting, so anyone with the link will be able to access my site. Thanks.

6. 1tess
   Moderator
   Feb 25, 2012, 2:55 AM

   While I'm not sure which page you are asking about, I'll tell you what I see on this page:
   http://kevanpegley.com/work/
   where you have so far inserted 2 images, side by side. They are both uploaded as full sized 1024 wide but set to display at 210px wide.

   My first thought is that each image is too wide to display 4 pictures across the width of your theme:

   Nishita
   FAQ:—
   Uploader: 768/1024
   Actually: 518/768/774/1024
   Remarks: quadruple number = narrow layout with sidebar / narrow layout without sidebar / wide layout with sidebar / wide layout without sidebar

   http://wpbtips.wordpress.com/2009/07/23/maximum-image-width/

   Each image is too wide to fit four across your column width. And that does not even take into account padding which the theme's CSS may incorporate into image display.
   wide layout with sidebar max width = 774
   divide by 4 and that is the maximum width per image, without padding.

   The more accurate way to insert images 4 across the column, once you determine the size (width) you need, is to work in the html editor. Insert one image after the other without linebreaks between them. It is very possible to do it in the visual editor as well, aligning all to the left, and making certain that you don't press return between any of them, but the visual editor does not allow you to see precisely where your cursor is.

   I do see the difference in the way the captions display. I'm not sure, but that could be caused by different ways you placed the images or perhaps by switching from the visual to the html editor?

   It is best to place your images and text and once you get that looking the way you like, place captions in the image editor at the very end. The reason is that with the visual editor, you cannot be absolutely precise and certain about where your cursor is.

   If it were me placing 4 pictures in a row, then I would probably opt for making a table. If you want more information about that, then let us know.

7. justpi
   Member
   Feb 25, 2012, 3:09 AM

   As for captions, if they're all one line they should all look the same. The second thumbnail on the page you linked to looks different because its code is messed up. Captioned images are pre-configured formulas you cannot modify once you have inserted them: you cannot select the caption and try to edit it using any of the tools of the editor. If a captioned image looks wrong, just delete it and re-insert it.

8. kevanp
   Member
   Feb 26, 2012, 3:16 PM

   Many thanks for the observations and suggestions. The images on my /work page were definitely not uploaded 1024 wide. I created them specially as thumbnails: they are in fact just 200px wide. And I realized that I couldn't fit four across -- it would have to be three.

   But, I've reconsidered the layout, and I think your assumption that I wanted four across makes sense, so I've resized the images to 160px.

   So the issue was not to do with image size. Neither was it anything to do with switching between visual and html: so far I haven't touched the html. But your suggestion to place the images, then add captions later has resolved the problem. I have just inserted four, one after the other, sized to 160 wide, then added captions to them afterwards, and finally they all line up as they should. Apparently the way that the captions are coded interferes with image placement, and that in turn interferes with the depth of the caption panel.

   I would very much like to know how to make a table though, if you say that's how you would create the layout I want: which is a grid of thumbnail images, each of which links to a page about that particular job.

   Thanks in anticipation, Kevan

9. justpi
   Member
   Feb 26, 2012, 11:00 PM

   "Apparently the way that the captions are coded interferes with image placement".
   No. Captions or no captions, placement depends on the size of the inserted version, on the alignment you set, and on whether you add a line or paragraph break after each image.

   For four similar images in a row you don't need a table. If you select the right size, then you just need to insert them the one after the other, setting the alignment of all of them to left, and without a line or paragraph break after each one. After you insert all of them successfully, you can change the space between them, if necessary.

   The difficulty with captioned images is that after you insert a captioned image you must make sure the cursor is outside the caption area before doing anything else (otherwise you get the "one image with two captions" side-effect you mentioned in your first post above). In general it's easier/safer to add captioned images in the HTML editor.

10. maidiebike
    Member
    Feb 27, 2012, 12:05 AM

    Wow, in reading these problems, I realize I tend to deal with image alignment problems more intuitively:

    I try to avoid outwitting the embedded html code by checking the original code by flipping out of Visual Editor.

    Then I delete whole lines of code and tetx, at times.
    Save each new change.

    Then flip back to Visual Editor for the "look" on screen.

    If all else fails (and I have to be pretty desperate by then with 1-2 time-sucking hours), I delete the post. And restart fresh. Usually that fixes whatever horrible screw-ups.

Topic Closed

This topic has been closed to new replies.