Image alignment problem with short text blocks

  • Resolved David Borrink

    (@davidborrink)


    17 years, 1 month ago

    Here’s the link for you to see what’s wrong.

    My client wants product descriptions and images that can be clicked to enlarged.

    The problem is that after the first item, the second item’s text starts close to the end of the first item’s text and to the left of the first item’s image.

    I saw a “solution” here, but it involves going into the HTML editor and adding span tags. My client is not going to want to go into HTML mode, he’ll just want to enter text, price, description, and a picture. So I want to ensure this will be easy for him in the Visual Editor.

    I’ve tried several things in the CSS: floats and clears on the h3 titles, h4 prices and even a custom class for the text and just can’t get the items to work the way I need to. Can anyone think of a way to make this work in the Visual editor that won’t make my client jump through hoops for each item entry?

    Thanks for any help.

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

    (@stvwlf)

    17 years, 1 month ago

    Hi – Instead of having all those entries on one page, if you made each Item/ image pair a separate post, you could wrap wrap them in a Div in your theme code. Float the text left, image right, and clear floats on the next Div. Each post would assign to a single category, and the page would be set up to display those pages in your preferred order. That way the floats can be cleared automatically so everything will line up.

    One way to keep them all on the same page, if its an acceptable approach, is to auto-insert the wrapper Div around each text/image pair using jQuery,

    Thread Starter David Borrink

    (@davidborrink)

    17 years, 1 month ago

    Very intriguing idea! I just started using wrapped divs and they’re very helpful.

    This would allow the products to be maintained using posts, plus, it would allow items to appear on more than one page by using multiple categories on a post. (Ex. a WWII item could appear on the WWII general page AND the WWII American page by assigning multiple categories).

    So if I understand your idea, a typical page could be set up like this?:

    <div>
    Page title (for the category label)
</div>

<div wrap>
    (Loop starts here)
    <div>
    Post of an item the specified category with text floats left, image float right
    </div>

    <div>
    Clear floats
    </div>
    (End of loop)
</div wrap>

    Which would create a succession of post – clear – post – clear – post – clear… until the full number of items are listed on the page?

    I’d like your opinion before I try it.

    stvwlf

    (@stvwlf)

    17 years, 1 month ago

    yes exactly

    You use a query_posts statement before the loop to tell WP which posts you want displayed on the page.
    http://codex.ww.wp.xz.cn/Template_Tags/query_posts

    And Custom Page Templates – you may not need to go this route but if you do
    http://codex.ww.wp.xz.cn/Pages#Creating_Your_Own_Page_Templates

    One issue you are likely to run into with posts is the order in which they display, which is set by the published date/time. It is sometimes a pain to reset those to get everything displaying in the correct order. This plugin
    http://ww.wp.xz.cn/extend/plugins/postmash/
    allows you to set your own post order. The downside with that approach is every time you add a new post you may need to order it. Try it without that first.

    Thread Starter David Borrink

    (@davidborrink)

    17 years, 1 month ago

    Great! And I just had a brainwave about this and you confirmed it. Instead of using pages, I’m going to set it up just in categories and let the categories create the pages. So if they click on a category in the sidebar they get all the items for that category.

    This way, my client will create posts and they’ll get sorted into categories automatically. He won’t have to work with pages at all. Just manage his inventory through posts. And if he adds a category, then a new “page” will automatically be created as a category.php callup.

    Now to experiment with the loop.

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

The topic ‘Image alignment problem with short text blocks’ is closed to new replies.