Way to Make Images Happier from Forum-to-Frontpage

[Seebs]

The pictures on the article are all cut in half. The pictures on the forum thread show up properly, but on the article page they get cropped down the middle due to the width restriction of the content column.

Adding this to the html code for each image would fix that problem


style= "max-width: 475px;"


Put that before the </img> tags for each picture and the images will resize to fit the content column.

:D

[hokiealumnus]

I'd love to, but that would require rewriting the front page template. It's not perfect unfortunately, but it's what we've got for now. Thanks very much for the help though. Were it in an article, that would work perfectly.

[Seebs]

I'd love to, but that would require rewriting the front page template. It's not perfect unfortunately, but it's what we've got for now. Thanks very much for the help though. Were it in an article, that would work perfectly.

Hokie...

There is another way; and this way ensures that all future posts that match this new format will always conform to the site's layout. You would need to have someone with server access to go in and edit the main style.css file for the site.

Just add this to that file and save


.commentBlock img {
max-width: 475px;
}


Maybe ask Matt if he can go in and make that addition. Once that is done and the new stylesheet is loaded; all images that are posted in the new format will resize to fit the width of the comments column.

:D

[hokiealumnus]

Awesome, thanks Sebas. I copied our posts here to a new thread (to keep windwithme's clean) and will bring it to IMOG's attention. :thup:

[macklin01]

That's awesome, but won't it be more future-proof if you specify in a physical unit, like mm / cm / inches?

475 pixels = 6.60 inches on an old 72 dpi monitor
475 pixels = 4.85 inches on moderate 98 dpi screens
475 pixels = 3.96 inches on fairly high-end 120 dpi monitors
475 pixels = 1.46 inches (326 dpi) on an iphone

Generally, I think it's more future-proof to target physical sizes, since resolutions presumably go up over time. Any professional CSS developers' thoughts?

[I.M.O.G.]

I believe the template uses a static 800px width for the main column, which the comments fit within... Due to the current architecture, I think stating a px width would be suitable in this instance.

There is a pretty standard layout sites use with a 3 column layout - typically its a 25%-50%-25% layout that ends up something like 200px-450px-200px. When we designed, we made a conscious choice based on our analytics to target higher resolutions than what is typically found on many sites - our main column is much wider, and our sidebars are sligthly larger.

Thx for the tip, we'll see if we can make it happen.

[macklin01]

Ah, that makes sense. It'll grow with resolution for a while, then. Thanks for explaining it to me!

I'm not sure if I'm just being anal-retentive about px vs. physical dimensions. I'd love to hear from other designers out there. I've seen other people emphasize percentages rather than fixed pixels. I guess then you could just define one length in a containing field, like div.page, and everything else is a percentage of that our other parent elements.

In any event, the site is beautiful, so there's little sense in messing with something that works. Maybe Version 3.0 can look into this minor issue. ;)

[CompuTamer]

Wouldn't a percentage size work best? Say 50%? I usually use percentages when i'm doing something like that, in case i decide that i want the entire page wider for some reason. (Say we go to a full width page homepage or something?)

[MattNo5ss]

Depending on the original pic sizes, 50% (or any %) could still be wider than the middle column. So, I think a predefined size would work better. It's not like the "resolution norm" changes often and the predefined size would need changing all the time, it might need changing, what?, once every 5+ years :shrug:

[I.M.O.G.]

I think it may depend on percentages - I believe there are cross browser issues in the way they handle percentages with certain elements.

I don't really know what I am talking about very well though. Like Paul, it would be good to have an answer from a real designer about "best practice".

I am going to put in a request to have the comment thing fixed, so we'll see what the inet take is on how it should be done.

[turbohans]

I thought you guys had a light-box popup for large images on the front page?

[hokiealumnus]

We do. This is for images posted on the forum that appear in comments on the frontpage. Check out the forum highlight on the frontpage right now and scroll down.

[turbohans]

We do. This is for images posted on the forum that appear in comments on the frontpage. Check out the forum highlight on the frontpage right now and scroll down.

Ahhh, that makes sense, yea I already checked that article out. Hmmm

[macklin01]

Wouldn't a percentage size work best? Say 50%? I usually use percentages when i'm doing something like that, in case i decide that i want the entire page wider for some reason. (Say we go to a full width page homepage or something?)

It's funny, because what you describe is actually very similar to something we do in science (particularly mathematics) called nondimensionalization. Everything is expressed as a multiple (or percentage) of a reference quantity. So for example, in a chemical transport process, all lengths might be expressed as a percentage of a diffusion length scale. In web design, the reference length may be the width of the overall page.

[turbohans]

Could maybe add a BBcode to trigger that code (that is already present in native front page posts) in a forum post.

ex.