rewrite image source URL with javascript

Question

I stuck when experimenting with blogger thumbnails. I don't want to use blogger default thumbnails since the size just 72px, it's very small. So, I found a method by rewriting the URL of the image source (the image hosted by google blogger service). For example, I have an image in this URL http://4.bp.blogspot.com/-XfeUAQMRZnk/VBw8Gv0tZvI/AAAAAAAAAXM/DnmxYqUROVc/s1600/home%2Bthumbs.jpg, the image will loaded with max-width 1600px, indicated by the /s1600/ in the URL. I want to load the image at 300px width, then the URL will be http://4.bp.blogspot.com/-XfeUAQMRZnk/VBw8Gv0tZvI/AAAAAAAAAXM/DnmxYqUROVc/s300/home%2Bthumbs.jpg. Also, the image served in HTTP protocol by default, but it's possible to served in HTTPS just by adding https:// as the protocol.

This is my thumbnail markup:

<div class="thumbnail">
    <a class="thumbTooltip" href="#" title="Flat Design Sample">
        <img alt="Flat Design Sample" src="http://4.bp.blogspot.com/-XfeUAQMRZnk/VBw8Gv0tZvI/AAAAAAAAAXM/DnmxYqUROVc/s1600/home%2Bthumbs.jpg">
    </a>
</div>

The question is, how I can rewrite the default image URL by using javascript method? I want to force the image served in HTTPS by rewriting http:// to https://, and served in 300px width by rewriting s1600 to s300. The final URL will look like this: https://4.bp.blogspot.com/-XfeUAQMRZnk/VBw8Gv0tZvI/AAAAAAAAAXM/DnmxYqUROVc/s300/home%2Bthumbs.jpg

Martin Ernst · Accepted Answer · 2014-10-18 17:04:00Z

1

The code is inside an window.onload to ensure that all elements are there. Then in the url-string the first replace() changes the protocol. The second uses a regular expression to find the segment where the size is defined and changes it to s300. It will work even when the images comes from another directory.

window.onload = function() {
    var img = document.querySelector('.thumbnail img');
    img.src = img.src.replace('http', 'https').replace(/\/s\d+(?=\/)/, '/s300');
};

Instead of the window.onload wrap you also can put the code in <script>-tags just before </body>.

edited Oct 18, 2014 at 17:04

answered Oct 18, 2014 at 16:48

Martin Ernst

3,2891 gold badge15 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ander Morales Over a year ago

it works for me. in my document, the url are re-written after the original image fully loaded. is it possible to load the image only after the source re-written? so the browser not load the image twice.

Martin Ernst Over a year ago

@AnderMorales As long as the url is hardcoded in html it's not possible. To get and change the src the script must wait until the image tags are parsed, but in the moment they are parsed the browser starts loading.

Martin Ernst Over a year ago

@AnderMorales It prevents the original image from loading if you place the code (without window.onload) in a <script> direct after the <img>. But if you can do that you can also change the url directly.

Ander Morales Over a year ago

It's ok. The main point is you just solve my problem. thanks!

Chris S. · Accepted Answer · 2014-10-18 16:18:10Z

0

Simple replacement of a token.

function getThumbnailUrl (element)
{
    $url = element.href.split("/");
    $url[7] = "s300"; 
    return $url.join("/");
}

answered Oct 18, 2014 at 16:18

Chris S.

1,25712 silver badges25 bronze badges

4 Comments

Martin Ernst Over a year ago

OP want to change the protocol too.

Chris S. Over a year ago

simply set $url[0] = "https:"; but that should have been self explaining

Ander Morales Over a year ago

btw why there is no selector inside the script? such as .thumbnail. I'm sorry, I'm not very fluent in javascript.

Chris S. Over a year ago

selector, .thumbnail - you are refeering to jQuery there. I told you how to rewrite a GIVEN element. you can combine it with jQuery as jQuery is simply a javascript framework. e.g. call it like $(".thumbnail").each(function(obj){ $(obj).attr({"href":getThumbnailUrl(obj)}); }); - you really should look up the documentation of jQuery to understand how it works. I'm not going to write your entire website.

Collectives™ on Stack Overflow

rewrite image source URL with javascript

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related