WordPress.org

Ready to get started?Download WordPress

Forums

Anarcho Notepad
[closed] Still have a problem with wrapping text around an image (27 posts)

  1. William Bowles
    Member
    Posted 5 months ago #

    The issue of how the theme deals with images is still not resolved. Arthur, I sent you screenshots/code but you never replied. The issue has not been resolved.

  2. Arthur Gareginyan
    Member
    Theme Author

    Posted 5 months ago #

    Hi, William!
    You create again the same topic.
    I replied to you repeatedly.

    You wrote:

    I've never had this problem before with image wrap so it definitely has something to do with your coding.

    No error in the template! No error in the my code!
    You make mistakes when writing articles!
    Example:

    <div id="yiv1034764464">
    <p><img class="attachment-single-post-thumbnail wp-post-image alignleft" style="margin-left: 10px; margin-right: 10px;" title="bostonmanhunt4" alt="bostonmanhunt4" src="http://www.globalresearch.ca/wp-content/uploads/2013/04/bostonmanhunt4-400x266.jpg" width="240" height="160"><em>In recent developments, US Attorney General Eric Holder has announced that federal authorities will “seek the death penalty for Dzhokhar Tsarnaev if he is found guilty of the Boston Marathon bombing last April.” </em></p>
    <p><em>This article by professor James Tracy first published in the week following the bombings, sheds light on the nature of this tragic event. <span id="more-74066"></span></em></p>
    <p style="text-align: center;">*    *    *</p>

    This code from your website:
    http://williambowles.info/2014/04/02/media-narrative-witnessing-bostons-mass-casualty-event-by-james-f-tracy/

    The image is placed in a paragraph and the second paragraph is outside! Therefore, the text does not wrap around the image!

  3. William Bowles
    Member
    Posted 5 months ago #

    Arthur,
    I never received a single response aside from the one about embedding code in this forum.

    You say:

    The image is placed in a paragraph and the second paragraph is outside! Therefore, the text does not wrap around the image!

    I have never, I repeat never had this happen before and I've been using WP for over five years. When an image is set to the left or the right, all text, including paragraphs wraps around the image. It's the way it's displayed in the WordPress editor and it's the way it should look on the page.

    BEfore installing your theme I ran WordPress's P2 and never had this happen.

  4. esmi
    Forum Moderator
    Posted 5 months ago #

  5. Arthur Gareginyan
    Member
    Theme Author

    Posted 5 months ago #

    What do you think about the example that I showed?
    You understand that the second paragraph is out of the first paragraph, and the image is in the first paragraph?

    <p>
       <img></img>Text...
    </p>
    <p>
       Text...
    </p>

    And should be something like:

    <img></img>
    <p>
       Text...
    </p>
    <p>
       Text...
    </p>
  6. William Bowles
    Member
    Posted 5 months ago #

    Arthur,
    Yes, I understand but as I said, wrap around an image has always worked regardless of the number of paragraphs.

    So for example, with your theme I have to remove </p> and <p> from even one paragraph before the text wraps let alone two or more paragraphs, it's not the way HTML works. I never had to do this before and I've been using HTML since 1994!

  7. William Bowles
    Member
    Posted 5 months ago #

    Esme: Why exactly did you add the link?

  8. esmi
    Forum Moderator
    Posted 5 months ago #

    Why exactly did you add the link?

    That's your previous topic on this subject. The one you said you had never seen a response to?

  9. esmi
    Forum Moderator
    Posted 5 months ago #

    it's not the way HTML works. I never had to do this before and I've been using HTML since 1994!

    Then I assume you know the difference between block level and inline elements as these were part of the W3C specifications as far back as HTML 3.2? Did you ever get around to learning about CSS?

  10. William Bowles
    Member
    Posted 5 months ago #

    ESme: Nope, not really. I know how CSS works tho but this has nothing to do with CSS, this is basic hmtl, align an image left or right and the text wraps regardless of the number of paragraphs around the image.

    B

  11. esmi
    Forum Moderator
    Posted 5 months ago #

    this has nothing to do with CSS

    Actually, it has everything to do with CSS. HTML marks up your page contents but CSS defines how it is displayed. That said, the theme author is correct - your HTML markup logic is flawed. If you want the image to float to one side of the text, then you should place it within the same paragraph (block level) section as the text that you wish to wrap. It should not be within its own <p></p> tags.

  12. William Bowles
    Member
    Posted 5 months ago #

    Esme, well it's a new one on me!!! Even the WP editor displays an image wrapped eg left, with all the paragraphs adjacent to the image wrapped! In all the years I've been using WordPress until I switched to this theme (that otherwise I really like) I've never had this problem. Surely, that was the entire point of having text around image?

  13. esmi
    Forum Moderator
    Posted 5 months ago #

    Even the WP editor displays an image wrapped eg left

    The Visual editor should not really be relied upon. It's WYSIWYG is crude at best. Have you checked to see what CSS is being applied to paragraph tags by default in this theme?

  14. William Bowles
    Member
    Posted 5 months ago #

    Crude it may be but it wraps text around images regardless of the number of paras. I mean it's so basic I don't understand all this stuff about CSS, I'm not a programmer, I'm a writer.

    and no I haven't checked the style sheet (for this).

  15. esmi
    Forum Moderator
    Posted 5 months ago #

    no I haven't checked the style sheet (for this)

    I'd suggest checking the CSS rules that are impacting on <p> tags. Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

  16. William Bowles
    Member
    Posted 5 months ago #

    I wouldn't know where to start

  17. William Bowles
    Member
    Posted 5 months ago #

    Here is the code generated by the WordPress editor, with an image inserted from the WP library:

    <p>4 April 2014 -- <a href="http://www.thecockpit.org.uk/show/economics_burlesque"><em><strong>Cockpit Theatre</strong></em></a></p>
    <p><a href="http://williambowles.info/?attachment_id=74161" rel="attachment wp-att-74161"><img class="alignleft  wp-image-74161" style="margin-left: 10px; margin-right: 10px;" alt="EcoBurl" src="http://williambowles.info/wp-content/uploads/2014/04/EcoBurl.jpg" width="150" height="119" /></a>The Cockpit presents Stripped down Economics with Timandra Harkness and The New Economics Foundation.</p>
    <p>Economics Burlesque</p>
    <p>Every month from Monday March 24th</p>

    and here's how it renders in my browser (Firefox 28.0, Mac OSX 10.9.2)

    <p>4 April 2014 — <a href="http://www.thecockpit.org.uk/show/economics_burlesque"><em><strong>Cockpit Theatre</strong></em></a></p>
    <p><a href="http://williambowles.info/2014/04/04/economics-burlesque/ecoburl/" rel="attachment wp-att-74161"><img class="alignleft  wp-image-74161" style="margin-left: 10px; margin-right: 10px;" alt="EcoBurl" src="http://williambowles.info/wp-content/uploads/2014/04/EcoBurl.jpg" width="150" height="119" /></a>The Cockpit presents Stripped down Economics with Timandra Harkness and The New Economics Foundation.</p>
    <p>Economics Burlesque</p>
    <p>Every month from Monday March 24th</p>

    Actually this not quite true as pasting the code into this editor has changed some the code, once more.

  18. William Bowles
    Member
    Posted 5 months ago #

    Ok, this is the relevant code I think that controls how images are displayed:

    /* Image style
    -------------------------------------------------------------- */
    img { }
    
    /* Image handling
    -------------------------------------------------------------- */
    img.centered {
    	display: block;
    	margin-left: auto;
    	margin-right: auto; }
    img.alignright {
    	padding: 4px;
    	margin: 0 0 2px 7px;
    	display: inline; }
    img.alignleft {
    	padding: 4px;
    	margin: 0 7px 2px 0;
    	display: inline; }
    .alignright { float: right; }
    .alignleft { float: left }

    And I think it's the function 'inline', am I correct?

  19. esmi
    Forum Moderator
    Posted 5 months ago #

    No. You need to look at the CSS for the p tags.

  20. William Bowles
    Member
    Posted 5 months ago #

    Hi Esme,
    You've lost me now completely. I found a ref to #content .col01 .post-inner p { but as I've no idea what I'm looking for...

  21. esmi
    Forum Moderator
    Posted 5 months ago #

    Are you using Firebug?

  22. William Bowles
    Member
    Posted 5 months ago #

    Well I've installed it and had a look at page of code off my site with it, but that's about it.

    BTW, I use Taco HTML Edit to view and modify ccs.

  23. esmi
    Forum Moderator
    Posted 5 months ago #

    Try right-clicking on a paragraph and selecting "Inspect Element with Firebug".

  24. William Bowles
    Member
    Posted 5 months ago #

    done that but I'm not clear on the relationship with the actual page. In other words, what am I looking for and what do I do when/if I find it?

  25. wittonline
    Member
    Posted 2 months ago #

    What in the sam-hell happened to clicking the image and going to the advanced setting with a 3rd click to justify the text wrap around the left or the right of the image!?!? That worked just fine.

  26. trafichosting
    Member
    Posted 2 months ago #

    Same problem here. I use this template on 2 sites. I have problems wrapping text around images. Help.

  27. esmi
    Forum Moderator
    Posted 2 months ago #

    If you require assistance then, as per the Forum Welcome, please post your own topic instead of tagging onto someone else's topic.

    I am now closing this 2 month old topic as it references an older version of WordPress.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic