Placing images in wordpress post

  • Hi,
    On my blog posts I usually place a some photos and have noticed that my blog posts do not always render the same each time it is viewed depending on what the viewer is viewing it on.

    For example, after preparing the post in wordpress, it will render correctly when I view it on my browser, but sometime wheen I view it later on Google Reader it won’t.

    The problem usually is a large gap between images. Usually my images have a longest edge across of 625 pixels and I always align them to the left. After placing the image in the post, the cursor usually appears at the top right hand side of the image. I press return numerous times to bring the cursor down below the image so as I can keep typing. I assue the problems that I see are with this.

    Sometimes when i preview the post in wordpress, I will see the gap that corresponds to the number of times I pressed return, but sometimes not.

    I have been playing around with new themes of late, just testing them out and also see this problem.

    Is what I am doing, te incorrect way to do it? Can anyone recommend the proper way to do it, or give me any advise?

    Many thanks for the help

Viewing 5 replies - 1 through 5 (of 5 total)

  • Yes, it sounds like you are creating spaces – when you align an image to left or right it automatically puts text to the side of it. See:

    https://codex.www.ads-software.com/Wrapping_Text_Around_Images

    On other devices, the same CSS doesn’t apply, so then you will see many spaces if you’ve put those in.

    There are ways around this, but you’ll need to post a specific page for us to look at.

    Google Reader isn’t a web browser. It’s a feed reader. WordPress cannot control how feed readers display your posts.

    Thread Starter frankie_82

    (@frankie_82)

    Thanaks a lot for getting back to me.
    Please take a look at https://www.thestrayphotographer.com/kyushu-summer-rains-and-volcanoes/ here you can see the problem that I am having, where the gaps appear between the images. As I said it doesn’t happen on all themes.

    Thanks for the help

    Yes, you have all these empty paragraph tags – that’s what’s making space:

    <div id="attachment_1397" class="wp-caption alignleft" style="width: 610px">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<h2>Mount Aso</h2>

    When you set the alignment to the left – it actuall “floats” the image – and that puts the text/cursor to the right side of it – it’s supposed to (see that link I posted above about wrapping text around images). If you don’t set any alignment (i.e. None), images will stick to the left side, but your text won’t go around on the right side. I know that sounds kind of weird, but that’s how the CSS works.

    So try using None for the alignment – that should avoid having to move the cursor (and making all those spaces).

    Or if you want the picture to be centered, use Center – and that too should then put your text below it without extra spaces.

    Thread Starter frankie_82

    (@frankie_82)

    Hi WPyogi, thanks for the quick response.

    That seems to have done the trick. Thanks for the tip.

    Just a couple of further questions though;

    1) Now that I don’t specify the alignment, does this mean that different browsers could interpret the code differently? Could I see diffferent alignments when using different browser?

    2) In the case of the first image on the link that I gave you, I notice that I must still select the alingment if I want the etxt to wrap around it, so I have specified left alignment there. One thing I do notice is that it always leaves a large gap of about 3 lines below the image before the text returns to the left of the screen. How can I reduce this gap so that the text fits better?

    Thanks again for the help

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Placing images in wordpress post’ is closed to new replies.