Techsquirrel's Blogspot: blogger

Showing posts with label blogger. Show all posts

October 6, 2013

Reducing Image File Sizes in Blogger Posts

It was recently called to my attention (Thanks, Alan!) that Blogger has a 1MB page size limit when I was asked if there was any way to get around it, especially when including lots of pictures and video.

My first reaction was "Probably not" since Blogger likely imposed the limit to constrain server load and/or so blog viewers don't get the impression that the Blogger service is slow. I still think there's no way around the limit. But, assuming that the size of linked content loaded with the page counts against the limit, it should be possible to fit more on a page than Blogger's simple controls sometimes directly allow. In particular, the file size of image thumbnails can be changed.

I had originally intended to explain how one can create their own thumbnail images smaller in both dimension and file size, upload them, and change URLs in posts to point to the smaller images rather than the large ones that are just programmatically sized by the visitor's browser. However, it seems there's a much easier way.

As far as I've been able to tell, Blogger has a bug of sorts with the addition of images to a post. I don't know at this point whether it's related to the browser and/or operating system used while adding the image, to the template used, or to something else. But an easy hack will get around the problem.

The following block shows code similar to that added to a post by Blogger when an image is added to the post. The second block shows the same code reformatted to be a bit more "human readable."

<div class="separator" style="clear: both; text-align: center;">
<a href="http://.../8DWceGrCEqI/s1600/VL_dmesg_comparison.png" ... >
   <img border="0" height="150" src="http://.../8DWceGrCEqI/s1600/VL_dmesg_comparison.png" width="200" /> 
</a>
</div>

The URL between "<img" and ">" specifies the image to be displayed. The "height=" and "width=" attributes specify the size that the image is scaled to. But the highlighted bit can be adjusted to change the actual size of the image. This bit specifies the width of the image. The height is adjusted accordingly.

In some cases, if the a different size (e.g. "Small") is selected using Blogger's controls, the highlighted bit will be changed to s200. The actual image, and thus it's file size, will then be much smaller. In other cases, though, only the "height=" and "width=" values are changed. In the situation shown above, the full-size image happens to be 1600x1200, and the image was only scaled to be displayed smaller.

To change the actual image size while editing a post, all that's needed to to switch from "Compose" to "HTML" mode, find the code for the image of interest, find the "s" value in that code, and change it to the desired size. Assuming that a "width=" value is specified, you can use that value for the "s" value.

Incidentally, an image of the specified size is apparently generated on-the-fly. I tested for a weird size (s212) from an original 1600x1200 just to see, and it actually generated a 212x159 image! Note that the image is still scaled to whatever "height=" and "width=" values are specified.

To verify that the image actually is smaller, right click on the image on the post page after you've updated the post and select View Image Info, Image Properties, or the like.

September 25, 2012

Hiding Blog Post Rearrangement

Changing the order of Blogger blog posts using JavaScript, such as with the Post Reversal Script, has the drawback that the posts need to be loaded before they can be rearranged. The result is an unsightly load of posts in one order followed by a delayed apparent reload of the posts in the intended order.

The reloading effect can be masked by hacking the template to hide the widget containing the blog posts and only display it after the posts have been rearranged. The code for accomplishing this is simple but, unfortunately, must be placed at two remote positions in a blog's template.

To hide the posts, add the following to the stylesheet code toward the top of the template, such as before the line "/* Content" or some other line beginning with "/*":

/* Start Post Rearrangement Hiding CSS */
#Blog1 {visibility:hidden;}
/* End Post Rearrangement Hiding CSS */

Then to show the posts after they have been rearranged, add the following script just after whatever post reordering script you have added to your template and just before the closing BODY tag:

<!-- Start Post Rearrangement Hiding Code -->
<script type='text/javascript'>
//<![CDATA[
  document.getElementById("Blog1").style.visibility = "visible";
//]]>
</script>
<!-- End Post Rearrangement Hiding Code -->

Viewing the blog, you should initially see an empty area where the posts normally appear followed by the posts appearing in the intended order.

An alternative to the empty area is to add a background image to the container underlying the blog post widget. The image could be, for example, a TV test pattern or a "Please wait..." message. The CSS code for this is shown below, where url-to-an-image-file is the URL to an image you have uploaded to Blogger or that is located elsewhere on the net.

/* Start Post Rearrangement Hiding CSS */
#main {
  background-image: url( url-to-an-image-file );
  background-repeat: no-repeat;
}
#Blog1 {
  visibility:hidden;
}
/* End Post Rearrangement Hiding CSS */

Then to show the posts, use the following script. The background image is removed here in case the blog post container is transparent, in which case the underlying container's background image would be visible behind the blog posts.

<!-- Start Post Rearrangement Hiding Code -->
<script type='text/javascript'>
//<![CDATA[
  document.getElementById("main").style.backgroundImage = "none";
  document.getElementById("Blog1").style.visibility = "visible";
//]]>
</script>
<!-- End Post Rearrangement Hiding Code -->

Depending on the speed of a viewer's browser, the selected image will be displayed while the posts are being rearranged, followed by the posts appearing in the intended order.

April 19, 2012

Swapping to Reverse Post Order on Blogger

Sometimes an oldest-to-newest order of blog posts would be better than Blogger's standard newest-to-oldest arrangement. A blog about a project is an example. The posts would proceed from oldest to newest so a visitor to the blog could start reading at the project introduction and proceed from there. Unfortunately, Blogger doesn't provide this as an option.

There are a number of existing approaches to this problem but, for various reasons, none of those exactly fit my needs. So I decided to roll my own.

David Merriman's script served as the starting point in locating post container nodes in Blogger's template. From there, the idea was to create a script that locates the blog's post container and then searches concurrently for posts from both the top and bottom of that container. When a post is reached at each end, those posts would be swapped. The concurrent search would then continue on toward the center of the container. The search would end once the center is reached, at which point the contained posts would have been reversed by the preceding swaps. The process is then repeated for each day of posts to reorder multiple posts within days.

The resulting drop-in hack is shown below. To use it, copy and paste the entire script into your Blogger template just before the </body> tag and then save the template. View your blog, reloading if needed, and your posts should be displayed in reverse order. Take a look at http://diyreader.blogspot.com to see it in use.

<!-- Start Post Reversal Code -->
<script type='text/javascript'>
//<![CDATA[
  // -----------------------------------------------------------------------------------------
  // Name   : PRS - Post Reversal Script for Blogger - Version 1.0
  // Author : David Yockey
  // URL    : http://techsquirrels.blogspot.com/2012/04/swapping-to-reverse-post-order-on.html
  // -----------------------------------------------------------------------------------------

  // Temp variable used to shorten classname references
  var cn;

  // This function is called as needed in the main program below.
  function ReversePosts(BlogPostContainer,PostClass) {

    // Arguments:
    //    BlogPostContainer -- The node containing the posts to be reversed.
    //    PostClass -- The className of each of the posts in the container to be reversed.
    //                 (may be a single name from among names in the class attribute of the posts)

    // Flag for checking whether any posts are found
    var found=false;

    var BlogPosts = BlogPostContainer.childNodes;  // May include text-nodes containing
                                                   // whitespace in addition to post-nodes

    // Set index variables to top and bottom of BlogPosts list
    var i=0;
    var j=BlogPosts.length-1;

    for( ; ; ) {     // Start Endless Loop

      // Find next Post from the top
      while( (i < j) && (!(cn=BlogPosts[i].className) || !(cn.match(PostClass))) )
        ++i;

      // Find next Post from the bottom
      while( (i < j) && (!(cn=BlogPosts[j].className) || !(found=cn.match(PostClass))) ) // (see Footnote 1)
        --j;

      if( found && i < j ) {
        // Swap Posts (see Footnote 2)
        var tempi = BlogPosts[i].cloneNode(true);           // Store a copy of Post i in tempi
        var tempj = BlogPosts[j].cloneNode(true);           // Store a copy of Post j in tempj
        BlogPostContainer.replaceChild(tempi,BlogPosts[j]); // Replace Post j with Post i in tempi
        BlogPostContainer.replaceChild(tempj,BlogPosts[i]); // Replace Post i with Post j in tempj
      } else {
        // Done
        break;        // Break out of Endless Loop
      }

      ++i; --j;
    }
  }
  // Footnote 1:
  //   If a post is found from one end, then a post must necessarily be found from the other.
  //   So, recording and later checking for a post from one end is sufficient to ensure that
  //   one was found from both.
  //
  // Footnote 2:
  //   At least in Firefox 11.0 on Fedora Linux, replacing a child directly with another child
  //   causes some text-nodes containing whitespace to be deleted. That node deletion messes up
  //   the positions of the posts in the BlogPosts list. This is avoided by cloning both posts
  //   rather than just one and replacing both posts from the cloned copies.


  // *** MAIN POST REVERSAL PROGRAM ***

  // Magic Words
  var BlogWidget             = 'Blog1';
  var BlogPostContainerClass = 'blog-posts';
  var BlogPostClass          = 'date-outer';
  var DatePostContainerClass = 'date-posts';
  var DatePostClass          = 'post-outer';

  var Blog1 = document.getElementById(BlogWidget);

  // Find the node containing the blog posts
  var BlogPostContainer;
  var x=0;
  do {
    BlogPostContainer = Blog1.childNodes[x++];
  } while ( !(cn=BlogPostContainer.className) || !(cn.match(BlogPostContainerClass)) );

  // Reverse different day posts
  ReversePosts(BlogPostContainer,BlogPostClass);

  // Reverse same day posts - Loop thru contents of BlogPostContainer to find each day's posts
  var BlogPosts = BlogPostContainer.childNodes;
  for ( i = 0; i < BlogPosts.length; ++i ) {

    // Check for an actual post-node rather than a text-node or such
    if ( (cn=BlogPosts[i].className) && cn.match(BlogPostClass) ) {
      var DatePostContainer;
      x=0;

      // Find the node containing the posts to be reversed for the current day being processed
      do {
        DatePostContainer = BlogPosts[i].childNodes[x++];
      } while ( !(cn=DatePostContainer.className) || !(cn.match(DatePostContainerClass)) );

      ReversePosts(DatePostContainer,DatePostClass);
    }
  }
//]]>
</script>
<!-- End Post Reversal Code -->

Code highlighting (if your browser displays it...) powered by google-code-prettify.

The script doesn't include an option to select whether or not to reverse the order. If you need this option, you might want to try MS-potilas's script, although I haven't tried it myself.

My thanks go to David Merriman and MS-potilas for their prior work on this problem and the guidance it provided.

09/25/2012 -- You may also be interested in: Hiding Blog Post Manipulation