Sunday, April 10, 2011

Auto Pagination Being Triggered By Post Images Encoded In Base64

Auto Pagination has been an accepted part of Blogger life now for just over a year. Almost all blog owners are used to it, and complaints about its interference are rare. Recently, we've seen a new scenario where it is involved.

The best way to look for a problem with auto pagination is from looking at the source code, for the blog page being displayed. Recently, we see very odd code, using the browser View - Source menu option. Note the " ... " snippet, in the example below, represents several hundred lines of similar content, intentionally removed just so this post can be displayed, without triggering auto pagination.

<div class='post-body entry-content' id='post-body-4264362262036694355'>
<div class="separator" style="clear: both; text-align: center;"><img alt="" border="0" height="320" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAIAAAAP3aGbAAAgAElEQVR4nOy991McyfLuff/uN96433tPnHWS8EYgJDzIgATCSHgz3sMw3g8DY9t3j2tTlfeH6h4GhLSglXbFqp/ ... Bgv9ZBgs9CB3U7WL3IbBQg+EwUIPsns8tcv3/Xhg/N51KwwWeggMFnqQ+4J1HwwWeggMFkIoNTBYCKHUwGAhhFIDg4UQSg0MFkIoNTBYCKHUwGAhhFIDg4UQSg0MFkIoNTBYCKHUwGAhhFIDg4UQSg0MFkIoNTBYCKHUwGAhhFIDg4UQSg0MFkIoNTBYCKHUwGAhhFIDg4UQSg0MFkIoNTBYCKHUwGAhhFIDg4UQSo3/Awmz0KzZb0OtAAAAAElFTkSuQmCC" width="320" /></div>

This problem is similar to the effect of post content being formatted by Microsoft Word. The blog post, when normally viewed, appears quite reasonable in size - the problem can only be seen when the post source code is examined.

Base64 encoding lets the content of a graphic file be hosted in the HTML code, rather than having the image stored separately, as a file in an image hosting server, like Picasa. A blog post containing one or more Base64 encoded images is going to be excruciatingly large, and is going to trigger auto pagination.

If you are reading this post because your blog has this problem, please help us diagnose this problem. If you have a forum discussion, in Blogger Help Forum: Something Is Broken, where we are diagnosing your problem, please provide these details, as best possible, in the discussion.
  1. Do you add these images to your posts using Post Editor?
  2. If so, how are you adding the images? Do you upload them, from your computer, using an image picker? Or do you add them directly from the web, using a web URL? Or do you drag and drop the images from a web page into the post editor window?
  3. Do you use "Old editor" or "Updated editor" (specified in Settings - Basic - Global Settings)?
  4. Do you use Compose, or "Edit HTML", to compose your posts?
  5. Are you using Draft Blogger (blue "B" logo), or production Blogger (orange "B" logo)?
  6. When you edit your posts, what brand and version browser do you use?
  7. What format are the images, when added? "bmp", "jpg", "png"?
  8. If the images come from your computer, are you using any image editor, to create or alter the images?
These answers may help Blogger Support identify a problem - so be generous, and be precise.


(Update 2011/06): General feedback suggests that most people whose blogs show this problem uploaded the images in question by dragging and dropping them from another browser window, into the Blogger post editor window - or by use of the "From the web" option in the "Insert image" wizard. That being the case, the resolution per post is reasonably simple.


>> Top

5 comments:

pctricks-tips said...

Thanks its work. I remove some screen shots and again uploaded them, after that this error fix. Thanks buddy.

Gail said...

Looks like that is what is happening for me. I do not normally grab (copy and paste) pictures from other sites, but did the 2 times it has happened, now I will know. Thank you.

Hilary Kacser, Actor-Manager said...

Hey, thanks for your help, and I'm not sure how to fix problem. One of my images with tons of HTML IDing it is one I created using old MS software corel. Lots of code. How to alleviate so my posts all show?

Wanted to answer your questions as stated in this post, but link to blogger's "Something is Broken" didn't seem to have this discussion in that forum.

Here goes:

Do you add these images to your posts using Post Editor?
I use this blogger page, don't know if that's called "Post Editor":

http://www.blogger.com/post-create.g?blogID=4688546032251718499

If so, how are you adding the images? Do you upload them, from your computer, using an image picker? Or do you add them directly from the web, using a web URL? Or do you drag and drop the images from a web page into the post editor window?
I think I just copied the image and pasted it using the "Compose" tab.

Do you use "Old editor" or "Updated editor" (specified in Settings - Basic - Global Settings)?

"Old editor" (thanks for telling me how to find out)

Do you use Compose, or "Edit HTML", to compose your posts?

both, but to paste these pix I just used Comose


Are you using Draft Blogger (blue "B" logo), or production Blogger (orange "B" logo)?
production

When you edit your posts, what brand and version browser do you use?
usually mozilla firefox. i think it's the most recent (6-24-'11)

What format are the images, when added? "bmp", "jpg", "png"?

jpgs

If the images come from your computer, are you using any image editor, to create or alter the images?
yeah, as i said, i think the one that's giving me the hardest time is a complexly created one i made myself using old MS software corel. Lots of code.

wanna see the code??
:-)

Thank you,
~~Hilary

Lindsey said...

Finally, I did what this article said... THANK YOU SO VERY MUCH!

Prayag Verma said...

Was looking for this, When I saw the source code of one of my post, it was pretty long indeed and I couldn't understand what it was,thanks for sharing