x
Toggle Content    Register or Login  -  June 20, 2018, 3:00 pm  
Toggle Content Commercial Themes
This is an opportunity for you to preview TCD commercial themes. All themes seen here can be purchased from the store.
Toggle Content User Info

Welcome Anonymous

Toggle Content Navigation
Toggle Content Project Status
Support Forums » DragonflyCMS » Tips & Tricks » Forum Image Resize
Please use the forum search before making a post. Your question might have been previously answered.

Forum Image Resize
Some of the best non-standard tricks for your site all in one location.


Post new topic   Reply to topic    Forum Index » Tips & Tricks Printer Friendly Page

View previous topic :: View next topic  
Author Message
Lead Developer


PostPosted: Mon Jan 24, 2011 12:47 am Reply with quote

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.


_________________

Back to top
View user's profile Photo Gallery
Newbie


PostPosted: Fri Feb 11, 2011 11:21 pm Reply with quote

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);
}


Back to top
View user's profile
Lead Developer


PostPosted: Sat Feb 12, 2011 12:48 am Reply with quote

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.


_________________

Back to top
View user's profile Photo Gallery
Newbie


PostPosted: Sat Feb 12, 2011 1:56 pm Reply with quote

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.


Back to top
View user's profile
  Page 1 of 1All times are GMT - 5 Hours

Post new topic   Reply to topic    Forum Index » Tips & Tricks Printer Friendly Page

  
  
  
 

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You can download files in this forum


RSS-News
RSS-Downloads
RSS-Forums
RSS-KnowledgeBase
Valid CSS!
Valid HTML 4.01!

Site Search | Support | Contact | Payments | Link to Us
All TCD logos and trademarks in this site are property of TreasureCoastDesigns.com
Interactive software released under GNU GPL, Code Credits, Privacy Policy
TCD_Natural © T.C.D.