Using A Thumbnail Javascript To Create Galleries? And The New Blogger Revamp Broke Them? Heres My Solution...

I use a javascript to archive/ collect thumbnail images of all my artwork in one portfolio page. I also use it to archive/ collect all my web comic thumbnail images for a specific web comic on one page. This javascript has worked flawlessly until the recent blogger user interface revamp. I played with different code, and different issues to see what was causing it. To much frustration it was not obvious and is still a little mysterious. In this post I want to explain how I fixed this problem. Keep in mind, I'm talking about a javascript to batch thumbnail images. If your using blogger the way blogger probably intends you to use it, then you should be fine and please disregard this entire post!

In the end the problem is the changes to how the code behaves when you add images to your blog post. So heres what I was seeing in my art gallery to new posts. The thumb on the top left I corrected already, and I took a picture of the thumb on the top right before fixing it. My new post uploads were appearing as a crossed out camera icon.

Blogger made the thumbnails not recognizable by the java script

The problem came from the new automatic code blogger inserts when you add a picture. The image inexplicably becomes corrupted when you use these 'user friendly' image aligning/ sizing controls. DON'T USE THESE. 

With the image I added to this post selected, these controls appear. Do not use them!

Even if I tried to take the existing image I had already added to the post and change the html back to bloggers preferred format, it didn't work. The moment I resized or used those controls on the image it corrupted the images ability to be recognized by the java script. So the solution was to delete the image and re upload/ post fresh. When you look at the HTML after adding the image fresh, you can see blogger generates its own html for it. Where it becomes corrupted versus the version that works is a mystery. I find it works, if you take the automatically generated code, and just change the width to a percentage or pixels width that fits the image on your blog design the way you want, and call it done. I recommend changing the images left, right or center alignment in the code as well so as not to corrupt the image. However I find the auto controls that pop up on selecting an image won't even work when you try to hit the left, center or right alignment. If you use the main toolbar at top it seems to work ok without breaking the image.

Just use the auto generated code which doesn't corrupt the image and keeps it visible by javascript. Add an alignment to the image and only change the width.

I noticed that the width=640 is automatically generated for more landscape-oriented images, while blogger generates height=640 instead for portrait-oriented images. Be aware of this as it may throw you off initially. I want all my widths to be the same so I remove the height=640 and make it a width=640 at the end of the .jpg" line just like the wide images. This seems to work without corrupting the image. Thankfully.

So by adding the image and just changing the width in the code and leaving the rest alone the javascript can sniff it out again. I find this strange, unnecessary and a little inexplicable. But whatever, I can live with it. Heres the thumbnails all fixed. So now my artgallery isn't broken anymore like it has for the last couple weeks. 

In the end, sometimes change can be bad. Its worse if your using custom code and creating functions on a platform that they don't intend or support directly. The moment they begin to change things, your modifications may be at risk of becoming broken. But a little time and patience, and lots of trial and error can get you where you need to go. I've never had a great relationship with automatically generated code, whether it be in Microsoft apps, Macromedia apps, adobe apps or website-building sites like blogger. It would be cool if there was an option for raw coding for advanced users. 

Regardless, hope this helps anybody suffering from similar issues!

Update 12/15:

They actually fixed this problem and it works correctly and normal now, ah well was fun to find a work around while it lasted LOL.