Hello!
I am new to Modx and currently i try to switch my website from plain HTML/PHP to Modx REVO. So here is one thing i got stuck with and didn't find any help on the web:
Every page of my website contains one corresponding image in the sidebar.
This image shall contain the image source,
image width and
image hight.
For some strange reason REVO doesn't come with an option to automatically add image-with and image-height to an image.
Since i couldn't figure out how to do this i send a post to the forum. (
http://ttyl.modx.com/thread/69930/tv-for-image-how-do-i-find-out-image-height-and-width#dis-post-392049)
Finally Lucas (
http://ttyl.modx.com/u/okyanet) came up with a solution for it. So all the honour for this goes to him.
The reason i am writing this little tutorial is because there are some minor twists that didn't get mentioned in the thread - and to have the whole thing in one place.
1) Create a template-variable called tv.image for your image.
Dont forget to give this template-variable access to your current template.
2) Set the input-type of this template-variable to FILE
3) Set the output-type of this template-variable to TEXT!
This is important! If you set it to IMAGE, you will recieve the full html-code for an image, but we only want the filepath.
4) Create a snipped called imgsize
<?php
list ($width, $height, $type, $attr) = getimagesize($input);
switch ($options) {
case 'w' :
return $width;
break;
case 'h' :
return $height;
break;
default :
return '';
break;
}<img src="[[*tv.image]]" width="[[*tv.image:imgsize=`w`]]" height="[[*tv.image:imgsize=`h`]]" />
You can later put this i a seperate chunk.
That's it! Don't forget to add an alt-text for your image! (Just create a TV called alt-text and reverence to it.) I also use a TV for the image-title. So my chunk looks like this:
<img src="[[*tv.image]]" alt="[[*alt]]" title="[[*title]]" width="[[*tv.image:imgsize=`w`]]" height="[[*tv.image:imgsize=`h`]]" />
Thanks again to Lucas!
- Phil
