How To Post Tall Pictures On Blogspot

August 03, 2016

Image Source: usnews.com
I have always find difficulties to upload tall pictures in my blogpost, particularly fantastic infographics that I have found while I was surfing the internet. No matter what I did, I was never satisfied with the end results of the pictures that appeared in the post. They will be either too narrow, automatically resized down, or the pictures will come up blurry. Of course I was aware that I could simply choose the default sizes available for the post: small (200px), medium (320px), large (400px), x-large (640px) and original (full size with the cap of 1600px). However, being a perfectionist, I wanted a more customised size of the pictures that I wanted to upload so that it would fit the size of the blogpost perfectly. Then, I tried various methods and did numerous research through Google to find the available solution, but to no avail.

Nonetheless, with a sheer determination and lots of time spent, I finally found a way to solve this issue once and for all. I came across a site called Bloggersentral with a post written by Greenlava that teach us how to resize images or infographics to our preferred sizes. Below are the steps to change the size of the images and infographics that you want to upload. In all seriousness, it is as easy as ABC. No joke.
  1. Upload an image/infographic and set it to "Original Size"
  2. Switch the post editor from "Compose" to "HTML" and locate the code of the image. The code should look something like this;

  3. As you can see, the second URL is the source URL for the in-post image. This means that it is the URL for the image that appears in your post. On the other hand, the first URL is the hyperlink to another version of the same image (which means the image that appear on a new tab/window when you click the image).

    In addition, notice that both URLs are exactly the same as they are resized to 1600px tall ( highlighted in red).
  4. Replace the "s1600" with "s0" in the first URL so that it links to the original full size image. Regardless of the size of the image you are uploading, setting the size figure to "s0" will get you the full size of it.

    The width will be adjusted automatically according to the height of the image. Hence it would be useful to use an aspect ratio calculator to obtain the desired height and width. I find the ARC by Andrew.Hedges.Names really easy to be used.
  5. Now we shall fix the in-post image. In order to increase the height (thus making the image larger), replace the size variable with a larger value. While most of the proposed solutions mention that you can only resize the image up to 1600px, you can actually resize it up to 2560px (s2560). Foe example, if you want to resize the in-post image to 2000px, then replace the "s1600" in the second URL with "s2000"\

    (Normally you would not want to put "s0" for in-post image most of the time as a full size image might be wider than your post size. Also, it will take a longer time for a full size infographic to load.)

    Your final adjusted image code should look like this:

  6. Remember to preview the post before you publish it.

Share This Story

Tags: ,
Tan

You Might Also Like

0 comments