FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Easy handling for over-wide posts





ocalhoun
I'll probably be doing this on my own forum soon, but here's an idea...

Sometimes when people post over-wide images or really long non-breaking strings of text, it will break the layout of the page because it makes the post so wide.

There is, however, a simple solution I came up with.

In the style templates, find the table cell that each post gets put inside.
Encapsulate the post body in a <div> tag, with the width set to the standard width of a post, height not set, and the scroll option set to only make scroll bars when the content is larger than the div. (scroll=auto, I think.)

Then, anytime (and only when) a post is too wide, a horizontal scroll bar will appear inside the body of the post, rather than at the bottom of the page, and the page layout will be preserved intact.


Not quite as big a deal for Frihost as for my forum, since Frihost isn't as big into image-posting, but I thought I'd just drop the idea in. It's very easy to do, and would make certain forum topics look a lot better (and be easier to navigate).
deanhills
That's an admin setting isn't it, or can we do it? I usually adjust the sizing of my images, however sometimes the images are graphs or tables that may not be as legible. I very rarely go wide, but I think that with some of the discussions it cannot be helped.

I can definitely understand however that your site would need it given that it is image intensive. In one way it would be nice as I would then not need to reduce the images, but in an other, may lose legibility of written details.
ocalhoun
Yes, that's admin stuff... not really a setting though, a small edit in the code.
Ankhanu
I'm not sure what the coding is, but a forum I use frequently, shortscale.org, has an image resize feature where it will shrink oversized images, and the image in the post links to a full size version. This prevents board resizing...

If there's admin interest, I could ask the admins over there what they did to implement it. (I'm pretty certain it's still running phpbb2 as well)
truespeed
I have been on forums where they have normal img tags aswell as bigimg tags that when used resize overised images to fit the page,i have been googling for the codes and found this, i am not sure if it will work or not or if there are better solutions out there.
deanhills
Ankhanu wrote:
I'm not sure what the coding is, but a forum I use frequently, shortscale.org, has an image resize feature where it will shrink oversized images, and the image in the post links to a full size version. This prevents board resizing...

If there's admin interest, I could ask the admins over there what they did to implement it. (I'm pretty certain it's still running phpbb2 as well)
Awesome idea. I'm very much interested to hear how it is done. Cool
ocalhoun
Ankhanu wrote:
I'm not sure what the coding is, but a forum I use frequently, shortscale.org, has an image resize feature where it will shrink oversized images, and the image in the post links to a full size version. This prevents board resizing...

If there's admin interest, I could ask the admins over there what they did to implement it. (I'm pretty certain it's still running phpbb2 as well)

Actually found and installed a phpbb3 mod that does this very well, automatically resizes only oversize images, and provides a little icon over the image to zoom in.
It works mainly through java.

Might still do the div thing for over-long text though.
Hogwarts
I'd go down a different path and instead use simple CSS like

Code:
.posts { word-wrap: break-word }
.posts img { max-width: 50%; max-height: 600px; }


(and, if possible, stick some JS on top of it to make it integrate more sleekly, i.e. clicking images enlarges them and so on, though that could potentially interfere with images that are links)
deanhills
Hogwarts wrote:
I'd go down a different path and instead use simple CSS like

Code:
.posts { word-wrap: break-word }
.posts img { max-width: 50%; max-height: 600px; }


(and, if possible, stick some JS on top of it to make it integrate more sleekly, i.e. clicking images enlarges them and so on, though that could potentially interfere with images that are links)
Thanks for that code Hogwarts. Looks great. What JS would you stick on top of it?
amagard
On forums or blog platforms supporting HTML I usually use some code like this to embed large images:
Code:

<div style="overflow: scroll; width: 600px;"><img src="http://SOME IMAGE HERE"></div>

Unfortunately our forum here doesn't seem to support HTML or attributes for images; the latter would be a way to downsize images.
sonam
If I good understand question you need max-width for image and div. This will make trick and smaller images will stay in normal format. Bigger images will be fixed in div width. Example:

Code:
<div style="max-width: 500px; "><img src="images/someimage.jpg" style="max-width: 100%;" /></div>   


Sonam
Related topics
Points system in Php-Nuke
[RESOLVED] Is it possible to put up a music page
Dems: these are merely the facts
Bondings Read
the things to do in order to successfully launch a website
How to get a site
Hello, Banwidth question.
Where can i spend Frih$?
Win xp handling over 2gb of memory
UNSTABLE
Unknown variable "character_set_results"?
Block posting of links for users with < 5 posts
500 posts!
God exists - and here's the proof
Reply to topic    Frihost Forum Index -> General -> Suggestions

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.