Prevent Oversized Images Breaking Message Tables & Sigs 2.1

Description: Using the CSS "overflow" attribute you can prevent large images from breaking your message column. This helps extremely for the people who use fixed widths. Images that display larger than the message column width will show a horizontal bar.

But it has already been done: Yes, but the other (non) CSS methods affect the overall performance of the forum. The CSS method previously provided required editing a .php file. Plus, in Internet Explorer both the horizontal and vertical scrollbar displayed. This method eliminates the vertical scrollbar. The modification only requires editing the postbit and/or postbit_legacy template and Main CSS.

What else to expect: The horizontal scrollbar will affect the entire post of the oversized image. That's the nature of the modification. No biggie.

Targeted Layout Type: Fixed width layout

Browsers tested: Internet Explorer and Firefox

Compatible vB versions: 3.5.3, 3.5.4, 3.5.5 and 3.6+

Thank yous: CyberAlien (Correction on ID to Class); kennn (PM resize - conditional code below)



Optional Modifications Added (3.14.06)!:
A) Signature (Cuts off oversized signatures in message bits by width & height.)

B) vBadvanced Newsbit (Same like the original, just with vBadvanced.)

C) vBadvanced Newsbit Signatures (Same like the original signature mod, just with vBadvanced.)

D) Private Message conditional posted by kennn (click here to post)

-----------------

Finally, let's edit!
(Or you can download the .txt file for the installation instructions)

1. Back up your templates!

2. In your postbit or postbit_legacy template find this or something similar to:

  <!-- message -->
  <div id="post_message_$post[postid]">$post[message]</div>
  <!-- / message -->

Replace it with:

  <!-- message -->
  <div id="post_message_$post[postid]" class="hidemsg">$post[message]</div>
  <!-- / message -->

3. Click "Save".

4. In Main CSS go to the bottom at Additional CSS Definitions and add code bit:

.hidemsg  {
  width:700px;
  padding-bottom:20px;
  overflow:auto;
  overflow-x:auto;
  overflow-y:hidden;
  }

5. Change the width "700px" to whatever you want. All other settings keep.

6. Click "Save".

7. Click if you use it.

Finished!


*For those of you who use a fluid layout take a look at this post. Thanks 007 for sharing.


=====================

Optional Modifications (Below)!!!:

*The 3 (A, B & C) optional modifications below follow the same steps as above with the exception of #2, #4 and #5.

A) For Signatures (Hide Oversized Images width & height):

2. In your postbit or postbit_legacy template find this or something similar to:

  <!-- sig -->
   <div>
    __________________<br />
    $post[signature]
   </div>
  <!-- / sig -->

Replace it with:

  <!-- sig -->
   <div class="hidesig">
    __________________<br />
    $post[signature]
   </div>
  <!-- / sig -->

4. In Main CSS go to the bottom at Additional CSS Definitions and add code bit:

.hidesig  {
  width:700px;
  height:400px;
  overflow:hidden;
  }

5. Change the width "700px" and height "400px" to whatever you want. Signatures (text or image) that exceed either width or height limit will be cut off. This code does not affect the message Table. Keep the remaining codes the same.

*If the center tag doesn't work in the signature after implementing the code above see this post for the solution.

---------------------------------

B) For vBAdvanced Newsbits:

2. In your vBadvanced CMPS Templates --> adv_portal_newsbits template find this or something similar to:

  $news[message]

Replace it with:

  <!-- message -->
                <div class="hideadvnews">
  $news[message]
                </div>
  <!-- / message -->

4. In Main CSS go to the bottom at Additional CSS Definitions and add code bit:

.hideadvnews {
  width:700px;
  padding-bottom:20px;
  overflow:auto;
  overflow-x:auto;
  overflow-y:hidden;
  }

5. Change the width "700px" to whatever you want. All other settings keep.

---------------------------------

C) For vBAdvanced Newsbits (Signature):

2. In your vBadvanced CMPS Templates --> adv_portal_newsbits template find this or something similar to:

  <if condition="$show['signature']">
  <div>__________________<br />
  $news[signature]</div>
  </if>

Replace it with:

  <if condition="$show['signature']">
  <div class="hideadvsig">__________________<br />
  $news[signature]</div>
  </if>

4. In Main CSS go to the bottom at Additional CSS Definitions and add code bit:

.hideadvsig  {
  width:700px;
  height:400px;
  overflow:hidden;
  }

5. Change the width "700px" and height "400px" to whatever you want. Signatures (text or image) that exceed either width or height limit will be cut off. This code does not affect the vBadvanced message Table. Keep the remaining codes the same.

*If the center tag doesn't work in the signature after implementing the code above see this post for the solution.

Finished (Once More)!

7. Click if you use it.

[COBRAws]

Is there a way so scrollbars wont apear, and just resize the images? Thank you

[Freesteyelz]

COBRAws: Not with this mod. You can find what you're looking for in the Code Modifications.

tonym: NP.

[Xplorer4x4]

This is great, thanks

[beano33]

Is it possible to have a vertical scrollbar as well? It's annoying when someone posts a 1000px image.

[Freesteyelz]

beano33: Sure, the mod is quite flexible. As in the example of the sig mod, just add the "height" attribute and remove "overflow-x" and "overflow-y" such as:

Replace:

.hidemsg  {
  width:700px;
  padding-bottom:20px;
  overflow:auto;
  overflow-x:auto;
  overflow-y:hidden;
  }

With:

.hidemsg  {
  width:700px;
  height:700px;
  padding-bottom:20px;
  overflow:auto;
  }

Just change the width and height values of "700px" to whatever you want.

*The only reason I did not set a height limit is because there will be some posts that will be extensively long which are valid such as articles, tutorials and reviews. See, both image and text will be affected in the post that is being enforced.



Xplorer4x4: Thanks for the support.

[dbembibre]

Sorry to say that this dont work if you have more that one image oversized in the same post only the last image has scrollbar

[beano33]

Originally Posted by Freesteyelz

[b]
*The only reason I did not set a height limit is because there will be some posts that will be extensively long which are valid such as articles, tutorials and reviews. See, both image and text will be affected in the post that is being enforced.



Xplorer4x4: Thanks for the support.

I gave it a shot but it enlarged the body of the post to whatever I set to its minimum height, so one line would still end up occupying the space of a 400px image. I also wasn't able to overcome the problems others have encountered with IE to use it on auto. I looked into ways to solve that, but it involves adding javascript to trick IE into using CSS max-width settings. Obviously that's something people interested in a simple template hack would like to avoid.

Anyway, I ended up creating a new bbcode based on this thread to deal with oversized images:
https://vborg.vbsupport.ru/showthread.php?t=94250

[Freesteyelz]

Originally Posted by dbembibre

Sorry to say that this dont work if you have more that one image oversized in the same post only the last image has scrollbar

It should work as indicated in the second post. The code is designed to wrap the entire post and display properly in IE and Firefox.

Can you please send a screenshot, the codes and the browser so I can try and duplicate your problem?

[Freesteyelz]

Originally Posted by beano33

I gave it a shot but it enlarged the body of the post to whatever I set to its minimum height, so one line would still end up occupying the space of a 400px image. I also wasn't able to overcome the problems others have encountered with IE to use it on auto. I looked into ways to solve that, but it involves adding javascript to trick IE into using CSS max-width settings. Obviously that's something people interested in a simple template hack would like to avoid.

Anyway, I ended up creating a new bbcode based on this thread to deal with oversized images:
https://vborg.vbsupport.ru/showthread.php?t=94250

Hmm. I'll look into it and post back with an update. My test will be exclusive to fluid width layouts.

[Dennis B]

Originally Posted by Freesteyelz

In post #27 it was suggested to use "auto" for width. See if "100%" works instead.

No, unfortunately "100%" does not work in IE either.
Also, a fixed width of "700px" messes up my PMs.

For now I'm using "100%", at least my FF users are happy and the IE users still get the same as before.