WordPress.org

Ready to get started?Download WordPress

Forums

Floating part time with images, and text (6 posts)

  1. ventrilqstman
    Inactive
    Posted 7 years ago #

    Ok I'm new to WP, over from blogger, and just got things set up. I'm pulling my hair out trying to get control over my formatting.

    I'm using the Mandigo theme, and I can's control where my text is in relation to my images.

    In the options of Mandigo I can turn floating on, or off. When it's left on it's great for when I want the text wrapped around the images, but it I want to have the text typed under or over an image it will just wrap, and there seems to be no way to stop it.

    Alternately if I turn floating off, I can get text directly under an image, but then I have no way to wrap text around an image if I want to.

    Is it just one or the other. If I want to allow wrapping will everything just wrap and I have no control???

    Here's the post I'm fighting with. As you can see in this case I want the text caption under the photo. To do it I had to turn off float.

    Any help would be appreciated. WordPress is so much nicer than blogger in many ways, but it sure is complex.

    Gav

  2. Brigitte
    Member
    Posted 7 years ago #

    When you want text under an image give the image a new class, such as clear. In the css make a
    .clear { clear: both;}

    And then you should use

    <img src="" class="clear" />

    Not sure, but might this force the text to go below the image? I would have to try it on a layout to see, but try it.

  3. vkaryl
    Member
    Posted 7 years ago #

    Many themes come with the classes "alignleft" and "alignright" already set in the css. When you want to wrap text around graphics in a post, you simply use the appropriate class within the post to move the img link where you want it.

    If your css doesn't have those classes natively, add them:

    .alignright {
    float:right;
    }
    .alignleft {
    float:left;
    }

    Try that, let us know how it goes (and in general, you shouldn't need to use "clear" anywhere for that....)

  4. reemixxed
    Member
    Posted 6 years ago #

    I know this is an old discussion, but I'd like an answer to this as well.

    With the mandigo theme, neither of the above 'fixes' seem to work. The stylesheet includes the .alignright and .alignleft classes, but when used in the code for an image (as in <img class="alignleft" src="..." /> it does not work. The text refuses to wrap around the image.

    I've also tried the opposite fix, with having text wrap enabled, and using the .clear class for an image. This doesn't work either.

    Does anyone else have a solution? I just want to be able to decide when I want my text wrapped around images in a post, and when I don't.

    Here is all the code for images in style.css.php:

    /* Begin Images */
    .png { behavior: url(<?php echo $stylesheet_directory; ?>/js/iepngfix.htc.php?blank=<?php echo $stylesheet_directory; ?>/images/1x1.gif); }
    
    p img { max-width: 95%; }
    
    .entry img {
      float: <?php echo ($mandigo_nofloat ? 'none' : ($mandigo_floatright ? 'right' : 'left')); ?>;
      margin: 3px <?php echo ($mandigo_floatright ? 0 : 10); ?>px 3px <?php echo ($mandigo_floatright ? 10 : 0); ?>px;
      <?php if (!$mandigo_noborder): ?>
      background: #fff;
      border: 1px solid #333;
      padding: 3px;
      <?php endif; ?>
    }
    
    img.nofloat, img.nowrap, .nofloat img, .nowrap img, .smallattachment img, .attachment img, .entry img.wp-smiley { float: none; }
    
    .entry img.wp-smiley {
      border: 0;
      padding: 0;
      margin: 0;
      background: transparent;
    }
    
    img.noborder {
      background: inherit;
      border: 0;
      padding: inherit;
    }
    
    img.centered {
      display: block;
      margin-left: auto;
      margin-right: auto;
      float: none;
    }
    
    img.alignright, img.alignleft {
      display: inline;
    }
    
    .alignright {
      float: right;
    }
    
    .alignleft {
      float: left;
    }
    
    /* End Images */
  5. reemixxed
    Member
    Posted 6 years ago #

    Bump.
    No-one has an answer to this?

  6. CDernbach
    Member
    Posted 6 years ago #

    I asked Tom, the author of Mandigo.
    This is his answer:

    Hi Christoph,

    You sure can! The best way to do this is to have text wrapping turned on by
    default, and selectively apply the nowrap class to the images around which
    you do not want text to wrap, eg: <img src="" alt="" class="nowrap" />

    Hope this helps,

    Thanks for choosing Mandigo!

    tom

Topic Closed

This topic has been closed to new replies.

About this Topic