WordPress.org

1. purenaturaldiva
   Member
   Posted 2 years ago #

   I'm having ongoing trouble controlling how images impact the look of my post.
   I don't need to get fancy - I'd like to know what code I need to put in that tells the darn thing to start on a new line!!

   This is what I'm getting now... no matter how many times I change it and save... it goes back to this mess. It will look good in my Visual... then preview and the changes go away... or I get faint lines everywhere in the post... oye.
   This is a link to a screenshot of what my problem looks like, in the event I'm not describing it well.
   http://www.purenaturaldiva.com/wp-content/uploads/2009/11/DogsBreakfast.png

2. equalmark
   Member
   Posted 2 years ago #

   Creating floated elements like this is always a problem as it depends on the amount of text that you include as to where the item appears.

   By choosing to 'align right' or 'alignleft' when inserting the image into the post all you are doing is floating the image with CSS. This means it will float to the left of the content that there already is in your post.

   Perhaps the easiest way to fix this is to install the TinyMCE advanced plugin. With it there is an option to retain line breaks. This means that if you get it looking right in the WYSYWG editor there is more chance it will look right on the page!

3. purenaturaldiva
   Member
   Posted 2 years ago #

   I'm looking for it now! I sure hope it works... this has been a headache I've dealt with for a while, but with this gift guide it's a big problem!

4. purenaturaldiva
   Member
   Posted 2 years ago #

   EqualMark you know which button allows you to retain the line breaks... when setting this up?

5. equalmark
   Member
   Posted 2 years ago #

   In the settings back there is something that says:

   Stop removing the <p> and
   tags when saving and show them in the HTML editor

   Make sure that its ticked. It will allow you to enter down and keep the line breaks in the code. Not very CSS correct but it should work.

6. aquanelle
   Member
   Posted 2 years ago #

   im not sure if you want to display those images in a vertical stack or a horizontal row but if you want them aligned vertically, you can use the following "float:left; clear:left;", which will force the left cleared element to fall below the one that is floated left above

7. purenaturaldiva
   Member
   Posted 2 years ago #

   Aquanelle - I do want a vertical stack... where do I insert that code?

8. purenaturaldiva
   Member
   Posted 2 years ago #

   Here is a sample of one of the image codes..

   <img class="alignleft size-full wp-image-2855" title="GreenToys" src="http://www.purenaturaldiva.com/wp-content/uploads/2009/11/GreenToys.jpg" alt="GreenToys" width="229" height="91" />

9. purenaturaldiva
   Member
   Posted 2 years ago #

   Equalmark - I love all the stuff in the Plug In, but I still haven't found the spot where I can check the Stop removing <p>... so that's still not working out.

10. aquanelle
    Member
    Posted 2 years ago #

    purenaturaldiva,

    the "Stop removing <p> tags ..." option can be found at the bottom of the page under Settings > TinyMCE Advanced. i use it too and it is a great plugin. not sure how much you know, but float:left; clear:left; are CSS properties and there are a number of ways you can insert them into your posts, see which one you see fit.

    one does not require any setup but is most mundane as it needs to be done per each image. if you go to the html view of your post, within your image tag you write style="clear:left" if you have floated left or style="clear:right" if you have floated right. so your image tag would look like so:

    <img class="alignleft size-full wp-image-2855" style="clear:left" title="GreenToys" src="http://www.purenaturaldiva.com/wp-content/uploads/2009/11/GreenToys.jpg" alt="GreenToys" width="229" height="91" />

    i would suggest doing this first to test that the clearing will fix your problem.

11. aquanelle
    Member
    Posted 2 years ago #

    the second option is to add the following two lines to your style.css in your wordpress theme ...

    `.clearleft {clear:left;}
    .clearright {clear:right;}'

    ... and add these classes to the floated images (or any other elemenst) when you want them to drop below the ones floated above.

    third option is that TinyMCE has ability to import classes from a designated stylesheet and you can apply those styled classes to the elements in the preview mode and the styling will be applied in your preview window, please see the tickbox just above where the "Stop removing <p> tags ..." option or go to the plugin website.

12. purenaturaldiva
    Member
    Posted 2 years ago #

    Aquanelle - I know just enough to get me in trouble... translation.... cut and paste, but not thoughts of my own!

    I tried the option for each image with no success. I'm worried about doing it in the style.css because I know I have back posts where I've worked hard to make the pictures line up in the rights spots and I don't want all that empty space - if I write it in my style css it will all look that way, vs having the option. I'd really like the option.

    Equalmark & Aguanelle - found the TinyMCE remove <P>. Above that it asks if I want to import the current theme css classes - Do I?

13. aquanelle
    Member
    Posted 2 years ago #

    no you dont have to import the styles in the Tiny options. importing the styles is the third option i decribed earlier.

    hmm, its weird for the clearing not to work if the images are in line with the rest of the body. post a link to your page, i'll take a quick look if you like :)

14. purenaturaldiva
    Member
    Posted 2 years ago #

    As you can imagine - it's making me crazy!
    Here's the link to the draft:
    http://www.purenaturaldiva.com/?p=2775

    Thank you!

15. aquanelle
    Member
    Posted 2 years ago #

    i am not able to see unpublished pages as wordpress does not allow it anymore by default. either publish the post for 5 minutes as im online for next hour or so or install http://wordpress.org/extend/plugins/public-post-preview/ and post the new link again please :)

16. purenaturaldiva
    Member
    Posted 2 years ago #

    email me at tania at purenaturaldiva dot com

Topic Closed

This topic has been closed to new replies.