How can I pre set pasted image widths and heights ?

Started by XHIBIT911, May 27, 2013, 01:25:40 PM

Previous topic - Next topic

XHIBIT911

Yes...thats because I JUST NOW resized the image from 500 to 600 w to see how much wiggle room I had when I did a 4th test post. You probably saw it as I did it live only seconds afterwards (if that long). I also removed the portal blocks on the left side to see how much additional wiggle room I could play with for post images, and even reduced the avatar dimensions a hair. I now need to check the aeva media to make sure the youtube embeds are fitting correctly. So maybe the issue was the portal blocks and the image sizes I had at the time.

Arantor

So it's actually doing EXACTLY what I said it was >_< So what's the problem: it's resizing them when they're posted, to the maximum size you've set... failing to see what the problem is that you're blaming on SMF...

XHIBIT911

well without being all tech weenie about it that was pretty much the question.
Considering everyone doesnt use the code I needed to find out why the sizing was acting funny, so  to end it all I just removed the left portal blocks and increased the size. Simple solution

Arantor

-sigh- It doesn't matter whether people use the code or not, it tries to force it to resize to fit inside the limits either way...

Chen Zhen

XHIBIT911,

  If I understand you correctly, you simply need to use some javascript to set a max height/width for all image on the page.
Do you use a portal by any chance? I will give you a block code to use although you can also manually add it to files if necessary.

Using a portal create a HTML block and make sure to hide both the title and body of this block...

Block code:

<script type="text/javascript">
window.onload = function()
{
   var maxHeight = 200;
   maxWidth = 200;
   var img = document.images;

   for (var i = 0; i < img.length; i++) {

      if (img[i].height > maxHeight)
         img[i].height = maxHeight;
         
      if (img[i].width > maxWidth)
         img[i].width = maxWidth;
   }
}
</script>


  Adjust the maxWidth and maxHeight to what is desired in the code shown above. This will not adjust any images that are already smaller than those dimensions and will limit them to those max sizes. This goes for bbc and/or direct posted images. You can limit your block to only be active on your topics/posts if so desired.

My SMF Mods & Plug-Ins

WebDev

"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

Arantor

Um, why is this necessary? SMF does it out of the box when configured correctly...

And if you weren't going down that route for some strange reason, CSS max-width will cover it for the vast majority of browsers out there too... even the mobile ones.


EDIT: Your code will also adjust any header images or similar that use actual img tags, it's not constrained to just images in posts/signatures.

XHIBIT911

OK works for me...all I'm saying is that earlier when the images width was set at 500, and both left and right portal blocks were active in the forum...I did some test pastes that stretched the forum out due to the images which I then dragged to 444x330.
This was before I did the edits for the image parameters and the avatar sizes as well as remove the left blocks.
So its all good with me ...I'm gonna see if I can reproduce it later on, but for now Im falling behind on finishing what i was working on. Thanks everyone for the help

Arantor

It would have been nice if you'd mentioned that you were using a portal and trying to fit it in between, because for all the things you said, you were implying fairly heavily that SMF wasn't doing its job and trying to suggest it was an SMF bug.

Antechinus

Y'know you can use custom css to resize images in posts*, regardless of whether they are inside bbc img tags or not, and regardless of when they were posted (ie: css fixes are retroactive). There's no need to play with PHP.

*Or avatars, or any other image.

XHIBIT911

I DID NOT imply anything.
In fact my exact words were "SMF hasnt tackled this yet" so if you're offended...I'm sorry but I'm not gonna go back and forth over something so frivilous as forum coding. Its much more to life than to be all anal about it.
And I'm pretty sure I'm not the only person thats encountered the issue of page stretching at some point.
I'm fairly certain I could reproduce the issue but it defeats the purpose at this point.
So Im basically turning the last word over to you.
Sometimes you people can really be nasty and for the most part people just accept it and dont say anything...but some of yall need a reality check.

On that note for the 3rd time thanks for the help

Arantor

Yes, page stretching is an issue. Which is why you set the option as provided, then there isn't an issue... SMF tackled it years ago by giving you the option in the first place. Not SMF's fault if you don't use the tools given to you...

Antechinus

When you two have quite finished............... :D

Automatic scaling of avatars, no admin settings required (and better without them):

/* Auto resizing of avatars. */
.poster_avatar img, #summary_avatar img {
height: auto;
width: auto;
max-height: 150px;
max-width: 125px;
border-radius: 3px;
}



Automatic scaling of images inside posts, no admin settings required (and better without them):
/* Scale images inside posts. */
.post img, .personalmessage img{
max-width: 100%;
width: auto;
max-height: 640px;
height: auto;
}




Automatic scaling of attached images, no admin settings required (and better without them):
.attachments>img {
width: auto;
height: auto;
max-width: 100%;
max-height: 640px;
margin-top: 1em;
}



Automatic scaling of images inside a shoutbox, no admin settings required (and better without them):
.sbinner img {
height: auto;
width: auto;
max-width: 96%;
max-height: 300px;
}



NOTE: These are for a custom theme, and would need to be adapted slightly for element names if being used for 2.0.x. That is not difficult to do.

Advantages of doing it this way are a) it's retroactive and b) does not rely on image links being in bbc tags and c) handles fluid layouts.

Arantor

Yup, I did actually mention you could use max-width, but I was sticking with the option built into SMF that won't require per-theme changing ;)

Antechinus

Quote from: Arantor on May 27, 2013, 08:16:36 PM
Yup, I did actually mention you could use max-width, but I was sticking with the option built into SMF that won't require per-theme changing ;)

Yup, but this way is more comprehensve and more tolerant of layout. It could be done as a small css block that could be pasted onto the end of any theme's css.

Hmmm. That could be a good one for Tips and Tricks, or even for a mod. I might code it up if I get bored. :)

XHIBIT911

Antechinus that would be a hell'uva great mod, especially if it pulled and displayed random images. Great idea !

And Underdog I concur absolutely

Chen Zhen

#35
XHIBIT911,

  Well I am glad you got it sorted no matter which route you opt to use. Just want to add that with javascript you can also control images in specific parts of the page using id, class name, tags, etc. One would have to adjust for specific theme's (ie. id's) if these are not uniform across various themes available to the end user.

Just an example:

<script type="text/javascript">
window.onload = function()
{
   var maxHeight = 200;
   var maxWidth = 200;
   // var whatid = document.getElementById("portal_main");
   var whatid = document.getElementById("forumposts");
   var img = whatid.getElementsByTagName("img");

   for (var i = 0; i < img.length; i++) {

      if (img[i].height > maxHeight)
         img[i].height = maxHeight;
         
      if (img[i].width > maxWidth)
         img[i].width = maxWidth;
   }
}
</script>


.. in that example for a referenced id it will affect topics/posts shown on the page from the default theme. I left another example id commented out for anything within a simpleportal table id (fyi which actually includes the post/topic area). You can look at your own page code to figure out what is necessary in that scenario or else use the css method Antechinus suggested.. both will work.

Edit ->Fixed var maxWidth line in code.. oops

My SMF Mods & Plug-Ins

WebDev

"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

Antechinus

Quote from: XHIBIT911 on May 27, 2013, 09:14:39 PM
Antechinus that would be a hell'uva great mod, especially if it pulled and displayed random images. Great idea !

And Underdog I concur absolutely

Codes for SMF 2.0.x: Auto resizing of images in posts, etc by CSS.

Can be added to the end of index.css and should work (although this is straight off the top of my head and I'm too lazy to test it at the moment).

Advertisement: