0

I'm currently working on a Wordpress-based new version of my website, and there is a function I'd like to add without knowing how to.

So maybe you could help me... I hope so!

I'd like to add a filter on the_content, that works for each <img ...> within. This function would get the width and height attributes (e.g. <img src="image.jpg" **height="120" width="300**" alt="test" />) in variables ($thisWidth, $thisHeight).

Then I'd compare width & height of each image to know if it's a landscape or portait format, and add a corresponding class. Easy: if($width > $height) { ... } else { ... }

I'm not used to work with regex and so, so this is why I need your help. My skills allows me to write the base of the function, but no more:

function imgClass($content) {

   /* for each '<img ....>' Loop ? */
   $thisWidth = /* get html width attribute */;
   $thisHeight = /* get html height attribute */;
   if($width > $height) { /* add class='landscape' */ } else { /* add class='portrait' */ }
   return $content;
}
add_filter('the_content','imgClass');

I'd be so thankful to anybody being able to help me... Thanks in advance!

Bud Damyanov
  • 30,171
  • 6
  • 44
  • 52
user3240470
  • 45
  • 8
  • 1
    This might be helpful for you http://stackoverflow.com/questions/20861875/need-to-get-all-img-from-the-content-in-wordpress – Mindeater May 15 '14 at 06:16
  • A side note - when you define your own function in theme's `functions.php` file (or if you develop a plugin), *ALWAYS* give a unique name to it and wrap the function in `if(!function_exists('your_function_name'))` in order to avoid function names conflicts with other plugins/Wordpress. – Bud Damyanov May 15 '14 at 06:39
  • Thanks a lot for your help guys! Mindreater > It is! Didn't find it when I searched before posting my question. But I don't understand how I can add a class to the after the comparison. And there is not need to do a loop for each image? The function is applied as a loop to each image, one by one? Bodi0 > Didn't know it, very helpful to avoid internal conflicts! – user3240470 May 15 '14 at 07:40

1 Answers1

0

here is a good example, using javascript

    <!DOCTYPE html>
<html>
<body>

<img id="planets" src="planets.gif" width="145" height="126" usemap="#planetmap">



<p>Click the button to display the coordinates for the "planets.gif" area.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("planets").width;
    var y = document.getElementById("planets").height;
}
</script>

</body>
</html>
user3629249
  • 16,402
  • 1
  • 16
  • 17