CODEWITHSUNDEEP
htmlcss
Sea
Sea

Reputation: 23

HTML/CSS How do I mass edit URLs used on a web page to shorten them LOCALLY

Essentially I need to remove /small from multiple URLs on a web page to view the higher quality image of all shown images. The issue is there are over 300 images.

<img src="https://images.cdn.manheim.com/20200601173044-0caa4ff1-471f-4a93-ab3d-a387e912fe70/small.jpg" width="60" height="45">

I'm not sure if this is possible with my almost non-existent experience with HTML. I've tried CSS live editors, overwrites with inspect element to change the element style with no success other than resizing the images with the same low resolution.

Any point in the right direction would be appreciated.

Upvotes: 1

Views: 138

Answers (1)

Run_Script
Run_Script

Reputation: 2548

To start with, here is a code snippet of your current code, with width and height attributes removed so that you can see the difference between the sizes.

When you run the snippet below, it will display the small version of your image:

<img src="https://images.cdn.manheim.com/20200601173044-0caa4ff1-471f-4a93-ab3d-a387e912fe70/small.jpg">

The second snippet has exactly the same HTML, but with some javascript added to it. The javascript goes through all images and removes the string /small from their src attribute.

To do this, the replace() function is used. Its first parameter is the string to be replaced, which in your case is the "/small", and the second parameter is the string which should replace this, which in your case is "" (empty string) because you want to delete that part of the string and not write any new text into it.

As you can see, the large version of the image is now displayed:

var allImages = document.getElementsByTagName("img");

for (var i = 0; i < allImages.length; i++) {
  var newSource = allImages[i].src.replace("/small", "");
  allImages[i].src = newSource;
}
<img src="https://images.cdn.manheim.com/20200601173044-0caa4ff1-471f-4a93-ab3d-a387e912fe70/small.jpg">

If there are several, or even 300 images on a page, this javascript will go through all of them and change their src attributes accordingly.

Upvotes: 1

Related Questions