How can I make all post image uploads have data-width and data-height attributes automatically by default?

Question

Right now all my images automatically have width= and height= when someone adds an image to a blog post. But what if I also want every image to have a data-width= and data-height= and have it equal to what ever the size of the image actually is? Is this possible?

I want to use this: http://davidecalignano.it/project/?medium-lightbox on a website but it seems to need those attributes and it won't work if I have to manually add them to each image for every blog post.

Answer 1

Yes you can. See my working fiddle here:

http://jsfiddle.net/MonkimoE/0wtgm8a1/

1. You need to add an id.

example: <img class="img" id="imageid".....

2. Delete all atribute "data-width" and "data-height". because it will added automatically.

3. Add this javascript:

(you may change the '$' to 'jQuery' if doesn't work with your theme)

<script> var img = document.getElementById('imageid');  var width = img.naturalWidth; var height = img.naturalHeight;

$( document ).ready(function() {
    $('div.aspectRatioPlaceholder').find('*').attr('data-width', width);
    $('div.aspectRatioPlaceholder').find('*').attr('data-height', height); }); </script>

Better is using javascript like example above. But if you want to process with php. you can modify your themes/plugin using this:

<?php list($width, $height) = getimagesize("image URL here"); ?>

it will produce $width as real image width, $height as real image height.

Good luck!