Forums

Confused about text wrapping around images (6 posts)

  1. jenbaldwin
    Member
    Posted 2 years ago #

    Hi everyone,

    I've read through all of the forum topics relating to text wrapping and I'm unable to find a solution to my problem. I'm using the Mimbo theme in WP 2.8.2. I am creating custom category pages. I borrowed coding from the main index php to pull in recent posts for a specific category. However, even though the text wraps around the image on the homepage (all my images are set to align left), the text is appearing below the image on the category page. Does anyone know why this might be or how I can change the coding to wrap that text to the right of the image on my custom pages? Thanks so much.

  2. stvwlf
    Member
    Posted 2 years ago #

    Without knowing a URL I can't give you specifics, but this issue is generally related to the need to have a float: left or float: right applied to the image, in the CSS. If it works on the homepage most likely there is a css class assigned on the homepage that is not assigned on your category page.

  3. jenbaldwin
    Member
    Posted 2 years ago #

    Hi stvwif,

    The site is not live yet, but here's the php that's pulling in the photo:

    " rel="bookmark" title="<?php the_title(); ?>">
    <?php echo get_post_image (get_the_id(), '', '', '' .get_bloginfo('template_url') .'/scripts/timthumb.php?zc=1&w=300&h=225&src='); ?>

    I tried adding in the image alignment like this, but it didn't make a difference:

    " rel="bookmark" title="<?php the_title(); ?>">
    <p class="img.alignleft"><?php echo get_post_image (get_the_id(), '', '', '' .get_bloginfo('template_url') .'/scripts/timthumb.php?zc=1&w=300&h=225&src='); ?></p>

    The theme did not come with a category page (there was no category.php in my theme editor) so I'm having to build my own. I have one css file: stylesheet.css. It lists the following classes for images:

    img.alignleft {
    margin:5px 15px 10px 0;
    float:left
    }

    img.alignright {
    margin:5px 0 10px 15px;
    float:right
    }

    But actually when I upload a photo from the post page, I am able to select an alignment (none, left, center, right). I am choosing "left" for my photos.

    Does this information help determine what I'm missing or doing wrong? Thanks so much.

  4. jenbaldwin
    Member
    Posted 2 years ago #

    Also, one of my guesses is that it has something to do with the default parameters with get_post_image. But a) I don't know where to find those default parameters to know what they are and b) why would the same coding wrap the text on the home page but not when I copy the code to a category page?

  5. stvwlf
    Member
    Posted 2 years ago #

    Hi

    this is not correct
    <p class="img.alignleft">

    img.alignleft means that if the class "alignleft" is assigned to an <img> tag, it will be floated left.

    You can not assign that to a <p> tag. what might work is this css

    p.alignleft img {
      margin:5px 15px 10px 0;
      float:left
    }

    That would cause all img tags within a p tag of class alignleft to float left.

    the way to assign it is
    <p class="alignleft">

    I am assuming that get_post_image is creating an img tag - the above CSS would cause that img to float left.

  6. Martian Art Slave
    Member
    Posted 2 years ago #

    How could this be applied to avatars?
    Here's where my site calls for the avatars:

    `<?php foreach ($comments as $comment) : ?>
    <li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>">
    <?php echo get_avatar( $comment, 50 ); ?>
    <?php comment_text() ?>
    <p><cite><?php comment_type(_c('Comment|noun'), __('Trackback'), __('Pingback')); ?> <?php _e('by'); ?> <?php comment_author_link() ?> — <?php comment_date() ?> @ "><?php comment_time() ?></cite> <?php edit_comment_link(__("Edit This"), ' |'); ?></p>
    '

    As you can see at: http://www.martianartslave.com/blog
    The avatars are not embedded in the comments, which is the lay out I wish to effect.

Topic Closed

This topic has been closed to new replies.

About this Topic