Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Friday, September 30, 2011

Obtaining Direct Links from Blogger Uploaded Images


This is not a full-featured tutorial by itself. Rather, the tutorial in this post will serve as a useful tool for many applications. In many instances, you will find yourself needing to upload an image to an image-hosting site and get its direct link. While it is perfectly okay to upload your image to famous image-hosting sites such us imageshack and photobucket, you will find it useful if you upload your images to Blogger's post editor instead. Yes, the next time someone asks you to take a screenshot of your computer and upload to an image-hosting site, you can use Blogger's post editor to do so. On top of that, you get to resize your image easily by changing it's address, if you upload your image to Blogger.

Step 1: 

Go create a new post, and upload an image like you normally would. You don't have to publish this post.


Step 2: 

Once you've uploaded and inserted your image to the post editor, click on 'Edit HTML' (as opposed to 'Compose' mode). You will see some HTML lines like the one shown below:
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-92dKzJAK6ac/ToCpkIUsmdI/AAAAAAAADoI/aGz4gdnNvG8/s1600/autobot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="http://3.bp.blogspot.com/-92dKzJAK6ac/ToCpkIUsmdI/AAAAAAAADoI/aGz4gdnNvG8/s1600/autobot.png" />
</a></div>

Step 3: 

If you look closely at the HTML lines, you will notice two set of addresses. The first one is next to the 'href' tag, and the second is next to the 'src' tag. All you have to do is copy the address next to the 'href' tag. I've highlighted the address that you need to copy in the example below:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-dyOiQpo23vE/ToC9yKNJ2YI/AAAAAAAADoM/VyR2emKNstE/s1600/autobot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-dyOiQpo23vE/ToC9yKNJ2YI/AAAAAAAADoM/VyR2emKNstE/s1600/autobot.png" /></a></div>

And that's it. You've gotten the direct link to your Blogger uploaded image. But wait, check out the bonus section below to see why Blogger uploaded image is special.

Bonus

This is the extracted direct link that we've gotten from the previous step.

http://3.bp.blogspot.com/-92dKzJAK6ac/ToCpkIUsmdI/AAAAAAAADoI/aGz4gdnNvG8/s1600/autobot.png

This direct link is special because Blogger allows you to resize your image by simply altering this link. All you have to do is change the '1600' in the line above, to a smaller number, and your image will resize accordingly. For example, if you open the link above in your browser, you will see a (relatively) large image. And if you open the same altered link below, you will see a down-scaled version of the same image.

http://3.bp.blogspot.com/-92dKzJAK6ac/ToCpkIUsmdI/AAAAAAAADoI/aGz4gdnNvG8/s40/autobot.png

Hope you will find this trick useful.. Cheers and God bless.

14 comments:

  1. What's the difference between the two urls in the code?

    ReplyDelete
  2. @Ayelet: The one next to href is the target address of a link. Href can be used with any element if you want to link them. The one next to src is the source address of an image. You use src when you wanna include an image in your HTML.

    ReplyDelete
  3. friend i have one ques??

    ...feed burnar display my page ....

    that only title and discription

    how show pic in feed burner ......


    pls tell brother

    ReplyDelete
  4. @stalin: I don't know much about feedburner and its settings. When I try my feed on feedburner, it does come with my pictures and posts. But I do know where you can shoot question. Try the Feedburner Help Group. I'm sure they have something useful to share with you.

    ReplyDelete
  5. Hey! Just commenting to say hi and that your tutorials are amazing!!!

    I can't, for the life of me, figure out the image replacement deal. I took the url after "href" and put it in for line 9 but nothing seems to change. Could you help me? :)

    ReplyDelete
    Replies
    1. Hi Name.

      Line 9... Hmmm.. I assume you're referring to the gadget icon change tutorial?

      Yeah sure, I could help. Let's have a look at your code. Send me the code that you have at the moment, and I'll see if there's anything wrong with it. BTW, just to be sure. Are you trying this on a Dynamic View template?

      Delete
    2. Hey, sorry I left you hanging here I forgot what topic i asked this on...

      Here is the code (you can see I started adding ones from photobucket):

      #views{
      display: none !important;
      }

      #header #pages, #header #pages:before{
      border-left: 0px !important;
      }


      .ss, #gadget-dock>div:nth-of-type(1) .gadget-icons img,
      .ss, #gadget-dock>div:nth-of-type(2) .gadget-icons img,
      .ss, #gadget-dock>div:nth-of-type(3) .gadget-icons img,
      .ss, #gadget-dock>div:nth-of-type(4) .gadget-icons img{
      display: none !important;
      }

      #gadget-dock>div:nth-of-type(1) .gadget-icons{
      background: url(https://lh6.googleusercontent.com/-3_aVIlnWwcA/T19uvyUvECI/AAAAAAAAADQ/r2t7d7xUFo4/s150-c/photo.jpg) no-repeat center !important;
      }

      #gadget-dock>div:nth-of-type(2) .gadget-icons{
      background: url(http://i429.photobucket.com/albums/qq13/zach277/twitter-icon50x50.jpg) no-repeat center !important;
      }

      #gadget-dock>div:nth-of-type(3) .gadget-icons{
      background: url(https://lh5.googleusercontent.com/-vxylmZD5KZk/T19uEE4F3II/AAAAAAAAAC4/JtPgJGh7Jqw/s150-c/photo.jpg) no-repeat center !important;
      }


      #gadget-dock>div:nth-of-type(4) .gadget-icons{
      background: url(https://lh5.googleusercontent.com/-NKf7XUAVJDQ/T1eNKg-zTiI/AAAAAAAAABg/hmNT4lcLqLw/s150-c/photo.jpg) no-repeat center !important;
      }



      END OF CODE~~~~~~~~

      Yes, its on Dynamic Views and here is the link
      http://fearlesseddie.blogspot.com/

      Oh yea and call me Eddie haha

      Delete
    3. Hi Eddie,

      Your code seems just fine. In fact, I can see the icons in your blog right now. Have you got this sorted?

      Delete
  6. Love all your tutorials. Thanks!
    Barb

    ReplyDelete
  7. I am compeltley lost sorry might be a stupid question but where do i paste the copied URL?

    ReplyDelete
    Replies
    1. Hi Jess,

      That depends on what you're trying to do. This tweak is just meant to show you how you can obtain an images direct link. If you could describe what you're trying to do I might be able to point you in the right direction :)

      Delete
  8. Paylaşımınız için teşekkürler. Paylaşımlarınızın devamını dilerim yazılarınızı takip ediyorum teşekkürler.

    ReplyDelete
    Replies
    1. Thanks for the wishes Corlu, truly appreciate it! :)

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.