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.

  • Do you want to add theses attributes to the new images being added or also to all the images you have allready added. And are you talking about adding images to gallery or just the simple add media
    – terminator
    Jul 13, 2015 at 21:54

1 Answer 1


Yes you can. See my working fiddle here:


  1. You need to add an id.

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

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

  2. 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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.