Inserting an image with minimal text.

  • The standard “Edit Post” interface can be made to work fine for inserting an image in cases where the page/post has lots of text – enough text to surround the image in some way. But it fails miserably in cases where one wants to have -for example- four images on a page with each image aligned left or right accompanied by a three or four sentence blurb/explanation adjacent to each image (and positioned such that the block of text is aligned toward the center -horizontally- of the image) .

    So what’s the best way to do this? After some experimentation, it certainly looks to me like it will require some css. But I’m sure that others who work with CSS 365days per year could explain an elegant way to do this.

    WARNING: This is not an easy problem to solve (I note that there are lots of “answers” to posts on inserting images from people who don’t really understand what the issues are)

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

  • I cant only think of floats and clearing after each text. You’ll have to edit in HTML. You could do

    <p><img src="img.jpg" style="float: left;"> Write your text here.</p>
<div style="clear: both;"></div>
<p><img src="img.jpg" style="float: right;"> Write your text here.</p>
<div style="clear: both;"></div>

    You can change left or right to which direction you want the picture to be aligned.

    Thread Starter espressoguy

    (@espressoguy)

    Thanks xxangel; I hadn’t thought of that! However I would like a way to force the first line of text to start at a level below the top of the image rather than being limited to having it start in line with the top of the image.

    Also, the WYSIWYG Editor (TinyMCE) removes empty div’s as soon as one switches from “HTML” to “Visual”. What I’ve found that works, however is this: <br style=”clear: both;” />

    Anyone have any thoughts on making the text start at a level below the top of the image?

    You could do:

    <img src="img.jpg" style="float: left;"><p>Write your text here.</p>
<div style="clear: both;"></div>
<img src="img.jpg" style="float: right;"><p>Write your text here.</p>
<div style="clear: both;"></div>

    The <p> tags should push your text down, if you have it in your CSS (and by default, as well)

    Thread Starter espressoguy

    (@espressoguy)

    Great xxangel !! Thanks alot! I appreciate the help!

    I started another (similar) thread asking for help in making two overlapping images in a post:
    https://www.ads-software.com/support/topic/css-how-to-make-two-overlapping-images-in-post

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Inserting an image with minimal text.’ is closed to new replies.