dynamic image scaling/cropping script?

squaredeye · 2006-01-04 02:24:47

I am redesigning my wife’s blog. Moving from blogger to txp.
minismith.com
I got a photo section going for her where I installed simple viewer
I was ALSO hoping to let her post photos relavent to each post in the home/default section.
Easy enough, but at this point it requires two separate uploads of photos to two separate directories.

Solution one: a script that dynamically copies images from one directory to the other as they are uploaded?
I don’t know if this even exists. I googled and found only local versions of such a script.

Solution two: I can combine the two folders and let simple viewer “get” its photos from the same folder as txp’s image folder,
but I will not be able to have Amy create thumbnails, as those would be used by simple viewer also and would be redundant.

The current design calls for thumbnails at 200px by 200px, (cropped from the original sizes) and they are placed in the sidebar
with a bottom link to the “photos” (simple viewer) section. I don’t NEED to use thumbnails, but I don’t know of a way to
Dynamically resize (proportionally) images in a given div. (to be no wider than 200px for instance) CSS can’t do this proportionally, or cross browser
(min and max width/height don’t work in IE).

So: is there a PHP or JS solution?

Ideas?

Matthew

running with scissors · 2006-01-04 03:08:41

phpthumb might do the trick. pretty easy to use and very powerful.

Last edited by running with scissors (2006-01-04 03:09:02)

hakjoon · 2006-01-04 04:23:19

I use this little js function to mimic max-width for images in IE. Pass it the div you want to resize the images in and the pixel width. example maxImage("imgal","200"); You can then set a corresponding CSS rule using max-width for browsers that support it.

<pre><code>
function maxImage(containerId,width) { if (document.all&&document.getElementById) { var theContainer = document.getElementById(containerId); var theImages = theContainer.getElementsByTagName(“IMG”); for(var i=0; i < theImages.length; i++) { if (theImages[i].offsetWidth > width) { theImages[i].style.width = width + “px”; } } }
}
</code></pre>

Last edited by hakjoon (2006-01-04 14:27:57)

squaredeye · 2006-01-04 13:44:11

Hakjoon,
Does this resize the image proportionally?
Also, how do I “pass” it to the div? Sorry :) I’m new to scripting languages.

Thanks,

Matthew

ps. Running with Scissors : Thanks, I will take another look at it, but at first it seems to advanced for me, and also I would need to edit the image files, which would need all kinds of hacking since textpattern rewrites the image files itself.

hakjoon · 2006-01-04 14:29:16

If you don’t specify a height for the image it will resize it propertionally. It doesn’t look amazing mind you since it’s just an html resize, so teh larger the original the crummier the thumbnail will look. To call create a div with a certain id and put the images you want to resize in that. You then pass the id to the function which you can call onload.

so if you have

<div id="blah"><img src="my_image.jpg" /></div>

You can do

<pre><code>
window.onload = function() { maxImage(“blah”,300);
}
</code></pre>

Which would make all images in Div “Blah” have a width of 300px. It will affect all images in that div.

It could be modified to look for a specific class too. The fanciest way would be to just use something like Behaviour which would allow you to do

<pre><code>
var myrules = { ‘img.maxsize’ : function(element){ var width = 300; if (document.all&&document.getElementById) { if (element.offsetWidth > width) { element.style.width = width + “px”; } } }, };

Behaviour.register(myrules);
</code></pre>

All you need to do is attach the class “maxsize” to an image and set the width variable to whatever width you want. (you will need to also load the behaviour JS file)

Last edited by hakjoon (2006-01-04 14:37:43)

hakjoon · 2006-01-04 14:40:10

Also textpattern has as thumbnailing class that comes along with it that you could probably tap into.

Last edited by hakjoon (2006-01-04 14:40:25)

squaredeye · 2006-01-04 17:33:08

Hakjoon,
Thanks. I wonder if Robert (wet) might be into making another thumb plugin :) one can wish upon a star. (err that was dumb.)

Thanks a lot for your thoughts, I ‘ll try those out.

Matthew

squaredeye · 2006-01-05 04:01:43

hakjoon,
Briefly, what happens if a user has JS turned off? what is the degradation like?
Not that I expect most of the folks to read my wife’s blog to have JS turned off, but…

Thanks,

matthew

hakjoon · 2006-01-05 05:12:16

In IE they will see the full size image, which isn’t ideal. I kind of use this as a last resort to keep people from blowing out our templates at work when inserting improperly large images in certain areas.

I was looking through class.thumb.php and it has a method that seems to return the thumbnail as an image tag which could maybe be turned into a plugin. I might have to play with that.

wet · 2006-01-05 05:41:20

Basically, class.thumb.php contains two essential methods:

wet_thumb::write() resizes a file based image into another file based image
and, as mentioned, wet_thumb::asTag() returns a HTML tag for that thumbnail image file.

So one could ponder over a plugin which takes the final image dimensions as attributes, e.g. <txp:foo_article_image width="100" [crop="0"] />, <txp:foo_article_image xscale="0.25" yscale="1" />, etc.

That plugin would then

calculate a hash value from the image’s id, file modification time and attribute values which would be used as an unique image file name (see zem_ir).
check the existence of this resized image file.
create a cropped image on fly whenever it does not exist.
return this as a tag.

I would strongly discourage the use of browser side resizing methods, the results are just too ugly.

Things to be clarified:

Need for multiple images per article, and thus a standard set of wraptag, break and label attributes?
Need for random images or just article images?

Hakjoon, as you have already volunteered to accept the heritage of upm_img_popper: Wouldn’t that fit into this plugin?

Last edited by wet (2006-01-05 14:26:37)

hakjoon · 2006-01-05 13:58:21

wet wrote:
I would strongly discourage the use of browser side resizing methods, the results are just too ugly.

They definitely don’t look particularly good. I kind of use that to my advantage because the bad results cause the lazy user to double check his images or call me about why the image looks crummy at which point I can explain that their images are just too big. It’s better then it breaking the whole layout IMHO

Hakjoon, as you have already volunteered to accept the heritage of upm_img_popper: Wouldn’t that fit into this plugin?

It definitely would make sense as part of the upm_image tagset. I’ll see about incorporating it after i get a chance to digest Mary’s code this weekend.

wet_thumb::asTag() assumes the file was written out using wet_thumb::write() right? I didn’t see anyway of it taking a file as an input. It seemed to just use $this->_DST['file'] which seemed to only be set in wet_thumb::write(), I’ll have to check out zem_ir too.

wet · 2006-01-05 14:06:20

You will have to separate two cases:

1. Image file exists: Just return the proper HTML tag.

2. Image file does not exist: Create it with those four steps sketched above. wet_thumb is only envolved in the rescaling step #3, all other proceedings are part of the new plugin’s logic. All methods of wet_thumb and the derived class txp_thumb assume a properly constructed object, which gets most of its properties during object construction either by default or by explicit constructor arguments.

Fo sample use see include/txp_image.php, esp.:

bc..function thumbnail_create()
{
[…] $t = new txp_thumb( $id ); $t->crop = ($crop == ‘1’); $t->hint = ‘0’; if ( is_numeric ($width)) $t->width = $width; if ( is_numeric ($height)) $t->height = $height;

if ($t->write()) { […]

Got it? Otherwise, keep on asking. I’ll be happy to help.

Last edited by wet (2006-01-05 14:23:14)

Textpattern CMS

Textpattern CMS support forum

#1 2006-01-04 02:24:47

dynamic image scaling/cropping script?

#2 2006-01-04 03:08:41

Re: dynamic image scaling/cropping script?

#3 2006-01-04 04:23:19

Re: dynamic image scaling/cropping script?

#4 2006-01-04 13:44:11

Re: dynamic image scaling/cropping script?

#5 2006-01-04 14:29:16

Re: dynamic image scaling/cropping script?

#6 2006-01-04 14:40:10

Re: dynamic image scaling/cropping script?

#7 2006-01-04 17:33:08

Re: dynamic image scaling/cropping script?

#8 2006-01-05 04:01:43

Re: dynamic image scaling/cropping script?

#9 2006-01-05 05:12:16

Re: dynamic image scaling/cropping script?

#10 2006-01-05 05:41:20

Re: dynamic image scaling/cropping script?

#11 2006-01-05 13:58:21

Re: dynamic image scaling/cropping script?

#12 2006-01-05 14:06:20

Re: dynamic image scaling/cropping script?

Board footer