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.

[Freesteyelz]

The "700px" needs to be adjusted accordingly. I only used that number as an example.

I had in mind fixed width layouts when I did this mod but I'll run some tests with fluid layouts.

[Hemanth]

Hi,

What is this "MAin CSS". Which file?

[Freesteyelz]

In your Admin CP go to:

Styles & Templates --> Style Manager --> All Style Options (select the style you're using) --> Main CSS

[Hemanth]

In your Admin CP go to:

Styles & Templates --> Style Manager --> All Style Options (select the style you're using) --> Main CSS

Oh.. Tha k you.. I think it was a file in the clientscripts folder

[Freesteyelz]

Nah. If that were the case I wouldn't be able to place this as a template mod. :classic:

[SHOBizzy]

Nice job! Thank you!

But I do have a little issue with the sig area stretching. (screenshot below) The in-post part works flawlessly.

Right now my "additional CSS" for signatures reads:

.hidesig {
width:700px;
height:310px;
overflow:auto;
}

And what happens is the sig area seems to be extended to the set size whether or not there is enough characters to actually fill it. On some people's sigs this is ok, but others it's quite obvious and ever so slightly annoying.



Maybe I missed something in my code that made it mess up. Thanks for any help you can give me.

[Freesteyelz]

You didn't miss anything, actually. By defining the height the affected area automatically adjusts to the size, which in your case is 310px. That's just the natural behavior for the value set. The width value was the primary focus for this mod; I added the height upon request.

CSS Conditionals and hacks won't work across browsers so it's better to avoid them as I did for the mod. I'm constantly experimenting so if (or when) I come across something of value I'll update this mod or possibly release a new one.

[SHOBizzy]

I didn't miss anything. It's a first, mark your calendars.

Thanks for the info and the hack. :up:

[Freesteyelz]

Hehe. Not a problem and thank you for clicking "Install".

[kennn]

I realize I'm a little late to the party on this but I wanted to point out that what was said in a post a couple pages back (and quoted below) is only half correct. You can have multiple classes on an element - it is perfectly legal to do this. The first example in the quote is incorrect as Freesteyelz points out. The second example is okay but adds an unnecessary DIV and extra code. The solution is this:

<div id="something" class="whatever1 whatever2">$post[message]</div>

Both classes will be used and this is completely acceptable CSS.

Originally Posted by Freesteyelz

You cannot place 2 "class" attributes in a a single div tag. This is what you currently have:

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

If anything replace it with:

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