Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

Possible to automatically resize post images?

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.
«1

Comments

  • Options
    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.
  • Options
    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.
  • Options
    Well OK then.. sounds a little bit over my head right now. I'll start reading up on the tips you guys posted.
  • Options
    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)
  • Options
    you could also set the comment body to overflow:scroll...
  • Options
    jonzey thats a really nice suggestion! thanks for the hint
  • Options
    So I'll just throw that overflow:scroll into the stylesheet.
  • Options
    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.
  • Options
    MarkMark Vanilla Staff
    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
  • Options
    mark would that require that I have the filebrowser loaded on servers?
  • Options
    MarkMark Vanilla Staff
    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.
  • Options
    edited 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.
  • Options
    MarkMark Vanilla Staff
    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.
  • Options
    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.
  • Options
    edited 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>
  • Options
    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 ?
  • Options
    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.
  • Options
    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');
  • Options
    thanks [-Stash-] It could help for now I'm still loking for the .js
  • Options
    this would be a great extentions
This discussion has been closed.