CODEWITHSUNDEEP
javascripthtml
ejner
ejner

Reputation: 13

Is it possible to add a variable to an image filename?

Noob here. It’s probably not even possible, but I would like something like this:

$variable=[today’s date]

img src=“0001.jpg?$variable”

Explanation: my homepage has a lot of images that i often change. But filenames stay the same, so iPhones don’t refresh them, but use old cached images. Adding a new filename extension every day should ensure that iPhones load the new images.

I’m using Noteoad to write my homepage, so changing all the filename extensions manually would take hours.

Tried google, but apparently variables are not possible in HTML, so…

Upvotes: 1

Views: 254

Answers (2)

Philipp Sengelmann
Philipp Sengelmann

Reputation: 130

You could try this approach with javascript. The code should be put in a script-tag as element after the body-tag, so all image-tags are rendered before the script starts running.

In your page add the script tag like this:

<html>
   <body>
     ...your stuff
   </body>
   <script>
       allImages = document.getElementsByTagName('img')
       allImagesArray = Array.prototype.slice.call(allImages);
       urlParam = new Date().toJSON().slice(0,10);
       for(i=0; i<allImagesArray.length; i++){
          allImagesArray[i].setAttribute('src', allImagesArray[i].src+'?'+urlParam)
       };
   </script>
</html>

Explanation:

// This will collect all of the images by their tag (img)
// and assign the result to the variable allImages

allImages = document.getElementsByTagName('img')

// 'allImages' now contains something called 'HTMLCollection'
// and here we convert it to an 'Array'

allImagesArray = Array.prototype.slice.call(allImages);

// Get the date today (will only change every 24 hours!)

urlParam = new Date().toJSON().slice(0,10);

// Now we iterate over each element in the 'allImagesArray'
// and add the current date to the url in every images src-attribute

for(i=0; i<allImagesArray.length; i++){
    allImagesArray[i].setAttribute('src', allImagesArray[i].src+'?'+urlParam)
};

However this approach is very simple and has its downsides. And I am not sure it will work in every targeted browser.

Also when you uploaded new images you will have to wait till the next day to see them when you are testing. If you want to see the changes immediately you have to change the urlParam to the value of Date.now() this will change every reload because it returns current milliseconds (microtime).

Just change the line where the urlParam is initialized like this:

urlParam = Date.now()

that would look like this

<html>
   <body>
     ...your stuff
   </body>
   <script>
       allImages = document.getElementsByTagName('img')
       allImagesArray = Array.prototype.slice.call(allImages);
       urlParam = Date.now();
       for(i=0; i<allImagesArray.length; i++){
          allImagesArray[i].setAttribute('src', allImagesArray[i].src+'?'+urlParam)
       };
   </script>
</html>

I guess that's it. Let me know if you have any questions.

Cheers

Phil

Upvotes: 3

Walsharoo
Walsharoo

Reputation: 76

You shouldn't need to update the variable at all, if a browser sees there is a variable it will reload the image.

<img src=“0001.jpg?v=1”/>

should do it.

Upvotes: -1

Related Questions