Possible to automatically resize post images?

unfortunate · August 2005

Is it possible? Is there a snippet of CSS code that can be added to the global.css that will automatically resize user posted images? That's one of my major pet peeves is browsing through a forum and seeing someones huge image spanning past the border of the forem.

ChrisGwynne · August 2005

Just a guess...

.CommentBody img {
height: 100px;
width: 100px;
}

Now what you also want to do, requires an extension or modifying the code, is to add an anchor around images that will link to the full size image.

Egglet · August 2005

You'll also need some case-specific code to stop it resizing pictures within the bounds of the page. A further feature would be, if you're taking the thumbnail route, to hook into an image library (if present) and properly resample the source image, because non-photographic browser scaled images look like cancerous goats.

unfortunate · August 2005

Well OK then.. sounds a little bit over my head right now. I'll start reading up on the tips you guys posted.

ichigo · August 2005

id say...try to set only max-width so that images arent wider than a certain amount of pixels the height will then be adjusted automatically. and pics that are smaller than the certain width wont be resized (bloated)

jonezy · August 2005

you could also set the comment body to overflow:scroll...

ichigo · August 2005

jonzey thats a really nice suggestion! thanks for the hint

unfortunate · August 2005

So I'll just throw that overflow:scroll into the stylesheet.

adrian. · August 2005

you could always write a plugin that detects the size of an image when the post is posted that checks the image is below certain dimensions.

Mark · August 2005

I've already written code to do this in the filebrowser (automatically size an image to fit the window) - feel free to dig through it and use it.

See an example here

unfortunate · August 2005

mark would that require that I have the filebrowser loaded on servers?

Mark · August 2005

No no no - I mean that if you want to write an extension for vanilla and you don't want to have to write the resizing logic, I've already done that kind of logic, so you can dig through the filebrowser to get it and use it in your extension.

unfortunate · August 2005

Hmm I guess I'll have to look into writing an extension? Would it be better to have an extension for this or would css work fine? The max-width: 400px sounds like a good idea.

But then I guess I would have to deal with the original if people wanted to view it.

Mark · August 2005

Well, max-width doesn't work in all browsers. And using a fixed width would really piss off a lot of people. If it were me and it really bugged me that much, and I wanted a simple solution, I'd probably follow jonezy's suggestion and put an overflow: scroll on the comment so that anything within it just scrolls.

unfortunate · August 2005

Ok. I'll mess around with a local copy and see if I can figure it out. I'll obviously post back if I run into any roadblocks.. ie if and when I realize that I don't know what I'm doing.

laurent107 · March 2007

what can I do with this ???


<script language="Javascript" type="text/javascript">
      //<![CDATA[
      var BodyLoaded = 0;
      if (document.all && !document.getElementById) {
          document.getElementById = function(id) {
               return document.all[id];
          }
      }
      function copy(inElement) {
         if (inElement.createTextRange) {
            var range = inElement.createTextRange();
            if (range && BodyLoaded==1) range.execCommand('Copy');
         } else {
            var flashcopier = 'flashcopier';
            if(!document.getElementById(flashcopier)) {
               var divholder = document.createElement('div');
               divholder.id = flashcopier;
               document.body.appendChild(divholder);
            }
            document.getElementById(flashcopier).innerHTML = '';
            var divinfo = '<embed src="_clipboard.swf" FlashVars="clipboard='+escape(inElement.value)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
            document.getElementById(flashcopier).innerHTML = divinfo;
         }
      }
      function writeImage(imageName, imageWidth, imageHeight, imageID) {
         var windowWidth = getWindowWidth();
         if (windowWidth < imageWidth) {
            var newWidth = windowWidth - 40;
            var newHeight = Math.round((newWidth*imageHeight)/(imageWidth+40));

            document.write('<span id="sm'+imageID+'">'
               +'<div class="Notice">Note: this image has been shrunk to fit on your screen. <a href="Javascript:resizeImage('+imageID+');">Click here to view the image at actual size.</a></div>'
               +'<img src="'+imageName+'" height="'+newHeight+'" width="'+newWidth+'" />'
            +'</span>'
            +'<span id="lg'+imageID+'" style="display: none;">'
               +'<div class="Notice">Note: this image does not fit on your screen. <a href="Javascript:resizeImage('+imageID+');">Click here to fit the image to your screen.</a></div>'
               +'<img src="'+imageName+'" height="'+imageHeight+'" width="'+imageWidth+'" />'
            +'</span>');
         } else {
            document.write('<img src="'+imageName+'" height="'+imageHeight+'" width="'+imageWidth+'" />');
         }
      }
      function getWindowWidth() {
         var myWidth = 0;
         if( typeof( window.innerWidth ) == 'number' ) {
            myWidth = window.innerWidth - 20;
         } else if (document.documentElement && document.documentElement.clientWidth) {
            myWidth = document.documentElement.clientWidth;
         } else if (document.body && document.body.clientWidth) {
            myWidth = document.body.clientWidth;
         } else {
            myWidth = screen.width;
         }
         return myWidth;
      }
      function resizeImage(imageID, link) {
         var lg = document.getElementById('lg'+imageID);
         var sm = document.getElementById('sm'+imageID);
         if (lg && sm) {
            switchVisibility(lg);
            switchVisibility(sm);
         }
      }
      function switchVisibility(object) {
         if (object.style.display == 'none') {
            object.style.display = 'block';
         } else {
            object.style.display = 'none';
         }
      }
      //]]>
   </script>

laurent107 · March 2007

hello mark I paste the code (the one just up) in a .js file that I call imageresizer.js and after I Ad this line in Vanilla/comments.php $Head->AddString('<script type="text/javascript" src="http://laurent.gandhi.free.fr/imageresizer.js"></script>'); and nothing is working I see in the .js that there is a .swf (_clipboard.swf) do I need it do I need to delete some line in the .js wath to do in fact ?

laurent107 · March 2007

Help, I need somebody, Help, not just anybody, Help, you know I need someone, help. When I was younger, so much younger than today, I never needed anybody's help in any way. But now these days are gone, I'm not so self assured, Now I find I've changed my mind and opened up the doors. Help me if you can, I'm feeling down And I do appreciate you being round. Help me, get my feet back on the ground, Won't you please, please help me. And now my life has changed in oh so many ways, My independence seems to vanish in the haze. But every now and then I feel so insecure, I know that I just need you like I've never done before. Help me if you can, I'm feeling down And I do appreciate you being round. Help me, get my feet back on the ground, Won't you please, please help me. When I was younger, so much younger than today, I never needed anybody's help in any way. But now these daya are gone, I'm not so self assured, Now I find I've changed my mind and opened up the doors. Help me if you can, I'm feeling down And I do appreciate you being round. Help me, get my feet back on the ground, Won't you please, please help me, help me, help me, oh.

Stash · March 2007

I don't know about your problem, but you may want to use this code instead for inserting the JS file:$Head->AddScript('imageresizer.js');

laurent107 · March 2007

thanks [-Stash-] It could help for now I'm still loking for the .js

MichaelPierce · January 2008

this would be a great extentions

Possible to automatically resize post images?

Comments