image code appears beneath images

  • I have a weird problem with image attributes appearing beneath my images. The weirdest is that it varies where the code appears when I view the post/page.
    This happens on posts where I’ve picked the contents from a html site (which I’m converting to WP). So of course I checked the code, but it seems to be the same as when I insert the images in WP – using the upload/insert feature.
    Now, the attributes first appear under the first image, nowhere else. Then I edit the code, removing all attributes, and it looks fine – except that now attributes show up under the second image. Cleaning that one, I get code under the third image and so on.
    The code showing is just a part of the image’s attributes, like
    ‘Basilicata Diana ” width=”180″ height=”270″ />’
    while the image’s complete code would be
    ‘<img src=”https://www.dolcevita.no/fig/bilder/italia/basilicata/maratea_acquafredda/DSC_8593_270.jpg&#8221; alt=”Maratea Basilicata Diana ” width=”180″ height=”270″ />’
    If I wipe all attributes, and save, I MIGHT reinsert new attributes using the Advanced TinyMCEs Edit image feature – without any code showing up when I view the page afterwards. Maybe.
    So what’s the difference? Something I’ve missed? Does it matter if I paste the code or if I insert it using WP? Does it matter for instance how many letters I use in the alt text?
    And how can I avoid having to clean about 1400 images in the site?
    Thanks a lot for any hints,
    Kjetil
    PS: A typical page is here – the first little image with wiped code, the next with pasted code intact.

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

  • For your typical page example, the problem seems to be broken html: An <a> tag is inside of an <image> tag.

    <td><img src="https://www.dolcevita.no/fig/bilder/italia/basilicata/maratea_acquafredda/DSC_8593_270.jpg" alt="Maratea <a href="https://www.dolcevita.no/wp/basilicata/basilicata/" class="kblinker" title="More about Basilicata &raquo;">Basilicata</a> Italia” width=”180″ height=”270″ /></td>

    Note how the quote-marks in the code have been converted to ” and ″ — This means that either WordPress is treating that section as normal text or the code was entered in the normal TinyMCE window.

    So what’s the difference? Something I’ve missed? Does it matter if I paste the code or if I insert it using WP? Does it matter for instance how many letters I use in the alt text?

    If you’re talking about the <img> code, then I don’t think it matters, as long as you are inputting the code using the code view of TinyMCE and not the WYSIWYG version. (I have the visual editor turned off, so I don’t have any real experience switching between the visual and code editors).

    I’m not sure what is going on, but here’s my suggestions (if they don’t fix the problem, they’ll at least help narrow down the potential causes):
    1. Download a plug-in that disables WP’s automatic formatting, such as the TextControl plug-in. Install it and activate it. Then see if the extra code goes away.
    2. Follow your normal steps to add images on a new, blank page and see what happens (perhaps the old code, if any, is conflicting with the code WP/TinyMCE is adding).
    3. If the problem is still not resolved, please post here the list of steps you are taking to add these images to your posts, so we can have a better idea what’s causing the broken code.

    Thread Starter Kjetil

    (@kjetilgf)

    Thanks for bringing me in the right direction.
    It turns out that the KB linker plugin (which automatically generates links from a list of keywords) also generates links from words inside the images’ attributes (alt and title).
    I’ve posted a warning with more details here.
    Now looking for an alternative plugin…
    Kjetil

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘image code appears beneath images’ is closed to new replies.