Is it possible to globally move images within posts?

[Gemini23]

With many hundred posts... if an image is posted before the first line within a post - is it possible to move ALL of these images to be after, say the first sentence?

[not2easy]

IF your image is contained within a clas or ID container, then editing the relevant css can change positioning, yes. If it is not you could see if your css supports a change in padding or margin for <div> or <p> (whichever is containing the images) that might give you what you want. Bear in mind that IF you edit the css for a base element such as <p> it is going to change them all, everywhere.

Different themes allow different levels of templates to be edited which may be another way to do that.

[Gemini23]

Thanks not2easy - any suggestions as to which css to use?
I have tried padding but that just squeezes the image smaller with the padding... but doesn't move the image as such in relation to the text.

[not2easy]

Image margins can be looked at. If padding makes the image smaller, there is some default size for its container. See if you can use developer tools to view the part of the page where you want to control that spacing. It could be that increasing the margin-bottom of the text container above the image could help. If you want the image to be visually separated you need to know what element are around the image that could be adjusted. Look for the presence of such things as class="alignleft" for example, that could be edited to apply the spacing.

Most developer tools allow you to do some trial changes that are not permanent so you can sort of play with it until you can work out what helps. Just take notes, save a backup of the css you edit and see if that helps on the live page.

I prefer to download the source code and work with a copy in a text editor, but developer tools can do the same thing and are easier, more visually oriented for many people.

[NickMNS]

It will be nearly impossible to move the image as desired we CSS alone. It is possible to move the image, but given the many possible screen sizes and other factors, any solution would be unreliable.

Ideally one would need to move the position of the image tag in the dom. Now your page looks something like:

<div>
 <img>
 <p>First sentence. Text</p>
</div>

This would need to to be changed to:

<div>
 <p>First sentence</p>
 <img>
 <p>Text</p>
</div>

This could be done with Javascript. Or I guess with PHP on the server.

[lammert]

Is the <img> tag hardcoded in each post body, or is the <img> tag added in the template? The solution differs for both situations. If it is the template, you can just create a child theme of your current theme and make the changes there. (A child theme is needed, otherwise the edit is reversed after the next theme update). If the image tag is in the file body, the only reliable way I see is to edit each post.

There is a CSS trick if you certainly know that the location where you want the image to move to is empty, by marking the image as relative positioned and set a top value. For example if your image has the class "movedown", the following CSS will move the image 100px down. But the text does not wrap around the new location of the image and the result is highly dependent on the screen size.

.movedown {float:left;position:relative; top:100px;}