TV for image: How do i find out image height and width?

10 Posts

philhippos Reply #1, 15 years, 1 month ago

Hello,

on my website each page has a certain image in the sidebar. I solved this by creating a TV for the image (input-type: file), the alt-text (input-type: text) and the title (input-type: text). For the output i created a tag-attribute "title" that outputs the title.

The sourcecode now looks something like this:

<img src="assets/images/image.jpg" alt="the alt-text " title="the image-title" />

What i am missing are the image-properties width=" " and height=" ".

The output shold then f.ex. look like this:

<img src="assets/images/image.jpg" alt="the alt-text " title="the image-title" width="123" height="321" />

Of course i could create a new TV and enter the image-dimensions by hand to archieve this - but i am sure there is a way to enter these values automatically.

I guess what it takes would be a snippet and then refence to that snippet in the output-options tag-attributes. But i am too noob in Modx to figure out how this snippet might look like.

I'd be glad i you could help me to find out what to do.

Thanks in advance,

Phil

This question has been answered by multiple community members. See the first response.

1,624 Posts

cipa Reply #2, 15 years, 1 month ago

Try this for evolution

Responsive CSS Grid: cipalabs.com/projects/metal/
Blog: MODX Tutorials & Articles

10 Posts

philhippos Reply #3, 15 years, 1 month ago

Sorry, i forgott to mention that i am looking for a solution for revolution.

But thanks alot, cipa!

Phil

discuss.answer

863 Posts

Lucas Reply #4, 15 years, 1 month ago

You can do exactly the same for Revo, but using a custom output modifier.

Paste the following into a snippet named imgsize:

<?php
list ($width, $height, $type, $attr) = getimagesize($input);
switch ($options) {
    case 'w' :
        return $width;
        break;
    case 'h' :
        return $height;
        break;
    default :
        return '';
        break;
}

Then in your template do this:

<img src="[[*imagetv]]" width="[[*imagetv:imgsize=`w`]]" height="[[*imagetv:imgsize=`h`]]" />

Not tested, but pretty confident wink

[ed. note: okyanet last edited this post 15 years, 1 month ago.]

discuss.answer

10 Posts

philhippos Reply #5, 15 years, 1 month ago

Hi Lucas,

thank you very much!

That nearly hit the spot. I had to make three little changes.

Obvious: Replace the 2nd "width" with "height"
Replace all + with *
Change the output-type of my TV from "image to text"

If you don't mind i would like to write a little tutorial on this subject here in the how-to-forum, mentioning your solution. This way i can give something back to the community and other Modx-beginners may not need to ask the same question again.

The tutorial is here: http://ttyl.modx.com/thread/69941/how-to-add-width-and-hight-to-an-image-in-revo#dis-post-392056

Thanks! [ed. note: philhippos last edited this post 15 years, 1 month ago.]

Answered TV for image: How do i find out image height and width?