Printable View
Hi,
I'm wondering how to scale or resize image to given dimension? I have catalog where user are adding their picture to website and when he upload image from (catalog edit) I would like that image are resized/scaled to dimensions.
And idea/tip how can this be achived?
Best regards.
Assuming this is in a template file, you have 2 options:
1. Use an insert tag: (http://www.contao.org/en/insert-tags.html)
2. Skip the insert-tag and call a method directly: (http://api.contao.org/#getImage)Code:{{image::path/to/img.jpg?width=100&height=100&mode=crop}}
The above returns a path to your resized image, so you place it inside your img "src" tag.Code:<?php echo $this->getImage('path/to/img.jpg', 100, 100, 'crop'); ?>
Both also have additional options so you may want to consult those links...
EDIT: Ok, so you can't get to the second link directly. But click "Controller" on the left, and then look for "getImage".
Hi Medianomaly as I can understand your post you are talking about croping the "visual effect" but I need that when you upload it that is resized to given dimensions (like avatar resizer). Because page will have xxxxxxx pictures and I don't want to "mess" the server.
Example: If the member upload his image which original size is 2000x2000, I want that durning uploading the image is resized to 800xXXX (the high is propotional).
THE ABOVE TEXT IS IRRELEVANT
I tought that dimensions (type-filed) is only <img height="" width=""> so I didn't even tryed that...well that save my day :)
Medianomaly thank you for time....you lighted my lamp :)
These 2 ways are better (they're basically the same thing, the first one is a shortcut).
They don't just shrink the image in the browser, they physically resize the image on the server and store a "cached" copy in a folder for every use after that. So this only happens once per image (the first time it's loaded) unless you clear the cache. Nothing will mess the server.
What makes this better is that you can have one copy of an image, and reuse it multiple times at different sizes (without forcing the browser to resize it). If you have a catalog list with a little thumbnail, and then a details page with a larger image, you can use the same source image instead of making your client upload multiple copies of the same image.
If you try and implement something where it resizes when uploaded, now you're stuck at that one size.
Jap I agree with you. But if you need only one image size than this easy solution is the best and fastes.
Best regards.
Ok, i've used the getImage for thumbnails because the pages has thousands of images, so the previus solution wasn't optimal. So insted of 6MB of thumbnails per page I've optimized to less then 1MB, which is great.
So everyone who will try this, i've used it like this:
141=widthCode:[img]<?php echo $this->getImage($entry['data']['picture']['meta']['0']['src'], 141, null, 'crop'); ?>[/img]" />
null=height, i've used null, because I wanted that the crop works propotional.
This is used in catalog template.
p.s. Medianomaly thank you ;)