WordPress makes uploading and working with images in posts a fairly straightforward proposition. With the inclusion of the drag-and-drop uploader, things got even easier.
But every once in a while, you’ll run into an issue, as we did when we were developing the Deluxe site. We were rolling along, getting material together for the “About Us” page, working in the visual editor within WordPress and cheerfully writing away about who we are and what we do.
To personalize the page, we decided that having our photos available would be a good idea, clicked on the “Upload Media” button and dragged a couple of photos to the uploader. They uploaded quickly, and in a matter of a very few minutes, I had the images placed where I wanted them in the page.
Or did I?
When I previewed the page, this is what I saw:
Pretty as a picture
Yes, it is a lovely caption, but WHERE IS THE IMAGE?
Hm. I must not have uploaded the file correctly, or so I thought. A double-check of the media library showed the image as being uploaded. I checked the HTML editor from within WordPress, and the image tag and element were there. From a backend standpoint, everything was great.
The code for the missing image as shown in the HTML editor
But when we looked at the source code in the browser, we learned the image wasn’t being called at all.
Strange things were afoot.
I immediately went into crazy-Google-search mode, trying to find out why my images were not visible. I was all over the WP codex, the WordPress forums, and pretty much the entire web. Jean was on the hunt as well, having run into a similar issue — caused by a file permission setting — while working on another site. After a couple of hours of futile searching, Jean did what I was unwilling to do: She called our hosting company’s technical support (hey, I don’t stop and ask for directions, either. Sue me.).
The incredibly patient and understanding support tech on the other end of the line saw what we didn’t: A single space at the end of the image tag.
A single space at the end of the image tag was causing all the fuss.
Jean made quick work of the problem with the backspace key.
All we had to do was delete the extra space from the end of the image tag.
Once that was done, we went back and previewed the page, and viola! Our image reappeared.
Pretty as a picture
So all’s well that ends well? A little judicious use of the delete key, and everything is hunky dory?
Not so much.
The page still required more editing, so I went back into visual mode in WordPress to finish my writing. After saving and previewing, I learned to my chagrin that the images disappeared once more. When I looked back into the HTML, the extra space was reappearing in the image tag. However, when we used the HTML editor alone — without going back to the visual editor — our image tags remained intact.
At this point, we are using the HTML editor almost exclusively with all of our sites. The visual editor is nice and works great for a majority of the users out there, but I want more control — and at this point, it is a necessity to go in a mark the code so our images will appear as designed.
We are still investigating the cause of the additional space — and that will be a topic for another post!