CODEWITHSUNDEEP
javascriptjqueryimage
Preben
Preben

Reputation: 1277

How to add an image's size to the image URL using javascript? Using resize on the fly: w=400&h=153

I have a CMS that I am developing, and I would like it to be dead easy to use it.

The next hurdle is the image use:

I'd like for the not tech savvy users to just upload their image via TinyMCE's Moximanager and then just add the image whereever they'd like. Then set the image size in the dialogue box (thay can even drag the size bigger or smaller in the TinyMCE interface)

enter image description here

Is there an easy way to add a javascript that rewrites all images' HTML on the site like this:

<img src="web_images/dscf7280.jpg" alt="" width="400" height="300" />

to:

<img src="web_images/dscf7280.jpg?w=400&h=300" alt="" style="max-width:400px;" />

Then I can add a script to resize and cache the image with the user's wanted size, and also add a style max-width that will allow the image to be responsive when forced smaller.

Using a resize.php or may be this script I then can add an image resizer and image cacher.

(Or is it another solution I should look at to make this more easy?)

Upvotes: 0

Views: 80

Answers (1)

David Woodfield
David Woodfield

Reputation: 96

Using jQuery...

$('img').each(function() {

var $this = $(this);

$this
.attr('src', $this.attr('src') + '?w=' + $this.attr('width') + '&h=' + $this.attr('height'))
.attr('style', 'max-width:' + $this.attr('width') + 'px')
.removeAttr('width')
.removeAttr('height');

});

Upvotes: 1

Related Questions