• The problem I’m having has to do with the insertion of images into posts or pages using the Visual Editor. The problem started about a week or two ago, possibly corresponding to my installation of the TinyMCE plugin (I deactivated the plugin as a test, but the problem persisted). Originally, images that were inserted from the Media Library with the Upload/Insert button–either while using the Visual Editor or the HTML Editor–were properly styled. A nice light gray frame appears around the image with the caption inside the frame at the bottom. Now, if you insert while in the Visual Editor, the image has no frame, it appears at the left of the space, and the text does not wrap around it even though the left or right align options are selected when inserting. If you insert the image, however, while in the HTML Editor, it displays properly.

    I compared the code that was being created by WordPress in both situations.

    While in the Visual Editor, it inserts this code:

    [caption id="attachment_1254" align="alignright" width="300"]<a href="https://the_original_image_URL"><img class="size-medium wp-image-1254" title="The Image Title Here" src="https://theoriginalimageURL-300x180.jpg" alt="The Alt Label Here" width="300" height="180" /></a> The caption here.[/caption]

    While in the HTML Editor, it inserts this code:

    [caption id="attachment_1254" align="alignright" width="300" caption="The caption here."]<a href="https://the_original_image_URL"><img src="https://the_original_image_URL-300x180.jpg" alt="The Alt Label Here" title="The Image Title Here" width="300" height="180" class="size-medium wp-image-1254" /></a>[/caption]

    Clearly, there is a difference in how the code information is written. In the second–the one that displays the image correctly–the Caption Attribute is inside the opening shortcode tag. In the other, it is not. Everything else seems to be the same–attributes are in a different order, but that shouldn’t change anything.

    Not only is the whacky code created while inserting images in the Visual Editor, but if the Visual Editor is used at ANY time to edit an existing post with images already in it, it will change the code there, too, and none of the images will display properly.

    What the heck is going on???

    I can easily go in and adjust the code to make the images display the way they are supposed to, but the clients I set the theme up for are not code-saavy. They need these WYSIWYG functions to work properly. That’s the whole point of creating a WordPress site for them—ease of editing without a great deal of code knowledge.

    Here’s a link to a sample page, showing the problem:
    https://www.serehd.org/test-post/

    Any ideas anyone?

    [Moderator Note: Please post code or markup snippets between backticks or use the code button. As it stands, your code may now have been permanently damaged/corrupted by the forum’s parser.]

  • The topic ‘Styling Error Occurs with Images Inserted While in Visual Editor’ is closed to new replies.