Hi Patrick, I thought I might post this here so others may see the solution.
The first thing is to add an ID tag to the image html there. This will allow us to target the image easily with javascript.
<img
id="imgswp" src="images/large-view.jpg"/>
Next, we add some javascript to the page, at the bottom of the page before the closing </body> tag might be a good place.
NOTE - The number there in red is the screen width at which you want to replace the image.
Of course, you need to replace the paths to the images there in the code in green.
<script>
window.addEventListener("load", runimgswap);
function runimgswap() {
var w = window.innerWidth;
if (w <= "425"){
document.getElementById("imgswp").src = "images/small-view.jpg";
} else {
document.getElementById("imgswp").src = "images/large-view.jpg";
}
}
</script>
It's actually quite a simple bit of code, and as a matter of fact, you can accomplish it with less code than that, but the way I written it there allows for real time image swap if a user resizes the window. You can just trigger the function with the following.
On the opening <body> tag for the page, change it like so -
<body onresize="runimgswap()">That will give you the following demo https://www.floridasurpluswarehouse.com/dev/img-change.php although my demo is set to change at 600px.
If you do not want the real time image change, you could just simplify the javascript to
<script>
var w = window.innerWidth;
if (w <= "425"){
document.getElementById("imgswp").src = "images/small-view.jpg";
}
</script>
One last note - This will not work on IE9 and before, and I can add some legacy code to make it friendly to that, but who really uses that these days...
Let me know if you have questions.
Thanks,
David
All Forums
How to use different picture in desktop and mobile
Posted - 06/12/2020 : 11:21:57
