• Resolved goviwan

    (@goviwan)


    I have an ordered list (tips for specific software packages) and I need to show screen capture images between the bullets, without text wrapping. In other words, I have bullet ‘1. text text’ with an image below it, followed by bullet ‘2. text text’

    Every post may have multiple bullets with relevant images, so I need to consistently show the images within that post. I don’t want text wrapping. I’ve tried placing a paragraph tag at the beginning and end of the image tag (based on a suggestion in another forum topic). This doesn’t seem to do anything. Any help would be appreciated. Thanks!

    goviwan

Viewing 9 replies - 1 through 9 (of 9 total)
  • I’ve got a couple of ideas, though without testing them, I can’t guarantee they’ll work.

    If you’ve got a fixed-width theme, you could try making the images the same width as the content area you’re putting them in, or even put them on a background if you have to in order to make them occupy the entire space.

    Or, you could put the entire post in a “div” element with a class like “bullets_and_images” and then add something like this to your CSS to try to prevent the text from wrapping:

    .bullets_and_images img {
      clear: both;
    }

    I wish I had a better solution, but part of my motivation for posting is so I’ll be notified if there are answers with better solutions. : )

    Thread Starter goviwan

    (@goviwan)

    Thanks for the input. Not having any familiarity with CSS, and the fact that there are dozens of CSS/PHP files in the blog directories, I have no idea what to modify, or where.

    I’m sure the theme is fixed-width, since it is one of the pre-constructed, multi-column themes available in the WordPress store (free area, not paid). As far as placing them in the background, I need to be able to show screen captures at each step at times, so showing them in the background isn’t really going to solve the issue.

    Fortunately I don’t have any readers yet… 🙂

    Would you mind sharing a link to the page that you are referencing?

    Okay, I didn’t realize what level you were at in terms of developer skills. Let me take a step back.

    With the cursor at the end of the line of your bulleted text (list item), when you click Add Media to add the screenshots, what happens if you select “None” as the alignment for the image? Doesn’t that accomplish what you’re asking for without any text wrapping?

    Thread Starter goviwan

    (@goviwan)

    It almost did what I needed it to do. I did figure it out though. Here’s what I used:

    1. Try to hatch the entire thing (ignoring islands) by selecting the entire object.
    2. If that works, select the hatch and zoom in to an area where you want to add an island.
    3. Under the ‘Hatch Editor’ tab, in the ‘Boundaries’ group, click the ‘Select’ button.

    <img class=”alignnone size-full wp-image-196″ src=”http://www.govihines.info/wp-content/uploads/2014/07/image1.png&#8221; alt=”HatchError1″ width=”145″ height=”97″ />
    <ol start=”4″>

    Thread Starter goviwan

    (@goviwan)

    You can see the final post here:

    Thanks for your help!

    Awesome!!!

    Looks good to me. I’m glad you got it figured out.

    Thread Starter goviwan

    (@goviwan)

    Thanks. I unintentionally made it sound like I figured it out on my own, when in fact, your tip RE the “none” alignment was the nudge I needed to figure the rest out. I had a feeling it would be something simple, but am not familiar enough with the language to know what would work or not.

    Thanks again!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Text wrapping and images in ordered lists’ is closed to new replies.