Forum Image Resize

**Devon** · Posted: Sun Jan 23, 2011 11:47 pm

There is a ridiculously simple way to resize forum images. This will only work for images posted into a forum topic. It will not resize images that are uploaded as attachments.

add to style.css

Code:

.postbody img {
max-width: 630px;
width: expression(this.width > 630 ? 630: true);
}

It uses Dragonfly's existing postbody CSS class. Any image within the postbody body class that it outside your max-width property will be resized to the max-width property.

I posted this because a lot of CMS's not just DragonflyCMS, have these long winded resizing scripts that mostly involve javascript. There's no need to make it that complicated. Hopefully in the future HTML5 or above will introduce a way to resize images while keeping the aspect ratio on the fly. Until then, this CSS should suit most forum posting situations. It's not a perfect solution because it won't keep the aspect ratio but it's certainly good enough for 99% of forums out there, especially DragonflyCMS powered forums.

**Zero** · Posted: Fri Feb 11, 2011 10:21 pm

Also here is the News Image Resize with forums to.
Add this to your style.css

Code:

.postbody img, .newsindex img {
max-width: 630px;
width: expression(this.width > 630 ? 630: true);
}

.news_index_content img{
max-width: 400px;
width: expression(this.width > 400 ? 400: true);
}
.news_article_content img{
max-width: 525px;
width: expression(this.width > 525 ? 525: true);
}

**Devon** · Posted: Fri Feb 11, 2011 11:48 pm

news_index_content and news_article_content are custom classes that must be added into the news/index.html and news/article.html templates. You can name it anything you want and add it anywhere you want in your site to limit image sizes.

It's a nice little feature that CSS has which can offset a more complicated javascript include. Use sparingly, it's not meant to replace javascript resizing completely, it's only useful in specific situations.

**Zero** · Posted: Sat Feb 12, 2011 12:56 pm

Devon wrote:

news_index_content and news_article_content are custom classes that must be added into the news/index.html and news/article.html templates. You can name it anything you want and add it anywhere you want in your site to limit image sizes.

It's a nice little feature that CSS has which can offset a more complicated javascript include. Use sparingly, it's not meant to replace javascript resizing completely, it's only useful in specific situations.

Ah yes i forgot that part, thanks for mentioning it. If you just added to CSS, i am sure nothing would happen.