How to change all url images in blogger with custom url images

62
December 02, 2019, at 11:20 PM

how do I replace all the url images in blogger. example bp1.blogspot.com/image.jpg I want to change it to cdn.staticly.io/img/bp1.blogspot.com/image.jpg?format=webp using javascript or jquery

I can't change those pictures one by one ... there are many thanks

Answer 1

Here are some methods, assuming you MUST process your images on the client

Ugly (loads the initial image, then the other image)

window.addEventListener("load", function() { 
  [...document.querySelectorAll("img[src^='https://bp1.blogspot.com']")].forEach(function(img) { 
    let src = img.src; 
    img.src = "https: //cdn.staticly.io/img/"+ src + "?format=webp"; 
  }) 
})
<img src="https://bp1.blogspot.com/image1.jpg" /><br/> 
<img src="divider.jpg" /> 
<img src="https://bp1.blogspot.com/image2.jpg" /><br/> 
<img src="https://bp1.blogspot.com/image3.jpg" /><br/>

Possibly nicer

Loading the content from an html file with images and replaces them before showing

$(function() {
  $.get("imageSnippet.html", function(html) {
    $("#container").html(html);
    [...document.querySelectorAll("#container img[src^='https://bp1.blogspot.com']")]
    .forEach(function(img) {
      let src = img.src;
      img.src = "https: //cdn.staticly.io/img/" + src + "?format=webp";
    })
    $("#container").show();
  })
})
#container {
  display: none
}
<div id="container"></div>
Answer 2

Using jQuery:

$('img').each(function(){
  var $this = $(this);
  $this.attr('src',$this.attr('src').replace(/^(http:|https:)?\/\//,'https://cdn.statically.io/img/') + "?format=webp");
})

Without jQuery:

var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) { 
  var src = imgs[i].src;
  imgs[i].src = src.replace(/^(http:|https:)?\/\//,'https://cdn.statically.io/img/') + "?format=webp";
}

Put the code before the closing body tag </body>.

READ ALSO
Check if xml is different, either whole xml or just &lt;lastBuildDate&gt;

Check if xml is different, either whole xml or just <lastBuildDate>

I'm trying to verify if a XML document got modified after I loaded my page, like maybe every 30 secondsI obtain the xml by making an AJAX request, and preferably, I want to compare the new one and the previous one before calling a function that displays...

81
select attribute of an element inside data-content of a popover

select attribute of an element inside data-content of a popover

I was using Bootstrap 4 popover and suddenly got stuck with this issueThe problem is I can not select the attribute inside data-content of a popover

89
Required property in form inputs not working when registering a click event on submit button

Required property in form inputs not working when registering a click event on submit button

I have a Django form and it has inputs with the required propertyI also have a DWobject inside the form which should have a scanned image before submitting the form

46