Welcome Guest [Log In] [Register]
Search Members Calendar | Rules ZB Code Index IF Code Index
ZBCode
  • Navigation
  • ZBCode
  • Coding Resources
  • Other Forum Systems
  • [smf] Automatically Resize Large Images
Hey, welcome to ZBCode, the new coding forum for ZB. Unfortunately, you're sorta hovering around in guest mode at the moment; why not join in on the fun? Register an account and you can start accessing the wealth of resources we have available here. Enjoy your stay at ZBCode, and remember to tell all your friends about us; the more members, the more codes available. ;)

Interested in joining? Click here.


If you've already experienced the wonders of becoming a part of this illustrious community, just enter your details and log in here:

Username:   Password:
Add Reply
  • Pages:
  • 1
  • 2
[smf] Automatically Resize Large Images
Topic Started: May 28 2009, 08:33 AM (352 Views)
Celebrus May 28 2009, 08:33 AM Post #1
Member Avatar
Artificially Conscious

Posts:
15
Group:
Members
Member
#300
Joined:
Jul 26, 2008
Coding language
Everything
I've tweaked that code a bit to get it to fit in a bit and display a message. You can find a preview of it here.

You can put this in either you headers or your footers. You may have to edit the colors in the CSS on top if you are using a custom theme.

Also note that the icon that is displayed is from the silk icon set from famfamfam.com which is licensed under a Creative Commons Attribution 2.5 License.

Code:
 

<style type="text/css">
div.resized_image p {
margin: 2px;
margin-top: 0;
font-size: 8px;
/* Awesome icon from here: http://www.famfamfam.com/lab/icons/silk/ */
background: url(http://i242.photobucket.com/albums/ff244/9861_omikron/error.png) no-repeat;
padding-left: 20px;
color: #333;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
(
function(maxht, maxwt, minht, minwt) {
var imgs = document.getElementsByTagName('img');
// Image resizing function
var resize_image = function(img, newht, newwt) {
img.height = newht;
img.width = newwt;
$(img).wrap('<table><tr><td class="tborder"><div class="resized_image"><a href="' + img.src + '" target="_blank"></a></div></td></tr></table>');
$(img).parent().before('<p>NOTE: This image was resized. To view it full-size, click on the image.</p>');
$(img).parent().after('<p style="text-align:right;background:none;margin:0;padding-right:3px">Image resizing script by <a href="http://aetus.net/217/programming/automatically-resize-large-images-with-javascript/">Aetus Designs</a>.</p>');
};

for (var i = 0; i < imgs.length; i++) {
// Set a variable for the current image to make the code make more sense.
var img = imgs[i];
if (img.height > maxht || img.width > maxwt) {
// Use Ratios to constraint proportions.
var old_ratio = img.height / img.width;
var min_ratio = minht / minwt;
// If it can scale perfectly.
if (old_ratio === min_ratio) {
resize_image(img, minht, minwt);
}
// We need to do some magic now.
else {
var newdim = [img.height, img.width];
// Sort out the height first.
newdim[0] = minht;
// The logic behind this is that if ratio = ht / wt, then wt = ht / ratio.
newdim[1] = newdim[0] / old_ratio;
// Do we still have to sort out the width?
if (newdim[1] > maxwt) {
// Just do what we did with the height
newdim[1] = minwt;
newdim[0] = newdim[1] * old_ratio;
}
// So yeah, resize the image
resize_image(img, newdim[0], newdim[1]);
}
}
}
}
)(500, 500, 500, 500);
});
</script>


If you want to adapt this to fit with another forum system, you might want to look here: Image Resizing Script.
Edited by Celebrus, May 28 2009, 08:34 AM.
Posted Image
Offline Profile Quote Post Goto Top
 
Caelum May 31 2009, 05:17 PM Post #2


Posts:
7
Group:
Members
Member
#2,220
Joined:
Feb 4, 2009
Coding language
None
Oooh, nice one. This'll be useful for my SMF forum.

I take it this works with SMF 2.0 RC1-1 too; not just 1.1.9? :)
Offline Profile Quote Post Goto Top
 
God Like Oni Oct 20 2009, 08:36 AM Post #3
Member Avatar


Posts:
299
Group:
Members
Member
#2,786
Joined:
Apr 12, 2009
Very nice code , I was looking for this cause it was annoying having to type in spoiler tags.
Posted Image
Posted Image
Offline Profile Quote Post Goto Top
 
mack Nov 5 2009, 07:29 AM Post #4
Member Avatar


Posts:
1
Group:
Members
Member
#3,557
Joined:
Nov 5, 2009
Coding language
Everything
Hi Celebrus

This code looks very interesting .. I have a couple of questions:

1. I run an smf 1.1.0 forum, using a custom template (the site linked in my sig) - can you tell me where this code should go?

and ..

2. Does this code work for posts already made?

Thanks in advance.

Edited by mack, Nov 5 2009, 07:30 AM.
Mack

Clan4 Multi-Gaming
Offline Profile Quote Post Goto Top
 
Warlock Nov 5 2009, 04:34 PM Post #5
Member Avatar
Wɑɾɹосҡ Ϻᴀᴎ

Posts:
266
Group:
Dedicated Member
Member
#3,556
Joined:
Nov 5, 2009
Coding language
None
Good job on this code... I must add this.

*Quickly Adds*
Posted Image
Offline Profile Quote Post Goto Top
 
Celebrus Nov 24 2009, 07:33 AM Post #6
Member Avatar
Artificially Conscious

Posts:
15
Group:
Members
Member
#300
Joined:
Jul 26, 2008
Coding language
Everything
To Caelum and mack, it should work since it doesn't use anything specific to SMF 1.1.x, but you might have to change this line because the CSS is probably different.

Code:
 

$(img).wrap('<table><tr><td class="tborder"><div class="resized_image"><a href="' + img.src + '" target="_blank"></a></div></td></tr></table>');
Edited by Celebrus, Nov 24 2009, 07:34 AM.
Posted Image
Offline Profile Quote Post Goto Top
 
slayer766 Nov 29 2009, 08:59 PM Post #7
Member Avatar
Hello all

Posts:
1,540
Group:
Former Staff
Member
#12
Joined:
Jul 9, 2008
Coding language
PHP
Just to let you know that this isn't necessary:

Code:
 
$(document).ready(function() {
(
Posted Image
Thanks Helena for the siggah!!!
Offline Profile Quote Post Goto Top
 
kimppa Dec 25 2009, 11:48 AM Post #8


Posts:
2
Group:
Members
Member
#3,622
Joined:
Dec 25, 2009
wow thanks for your coding, I'm looking this code
but can I ask something?? why my banner image in header also resized?
I just want to resize image only in my post. Can you tell me how to fix it??

I am using this for my zb forum
Edited by kimppa, Dec 26 2009, 02:21 AM.
Offline Profile Quote Post Goto Top
 
Vitality Dec 25 2009, 12:21 PM Post #9
Member Avatar
Tabula Rasa

Posts:
778
Group:
Admins
Member
#320
Joined:
Jul 26, 2008
Coding language
JavaScript
EDIT: I'm not at home, so when I return I will test this properly. The computer I'm using isn't exactly up to par with my being able to test anything.
Edited by Vitality, Dec 25 2009, 12:27 PM.
Want to contribute to the ZBCode Community? - Join The Vault!
Offline Profile Quote Post Goto Top
 
kimppa Dec 30 2009, 11:49 AM Post #10


Posts:
2
Group:
Members
Member
#3,622
Joined:
Dec 25, 2009
ok I am waiting, but how long you can fix it??
btw thank you for helping me
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · Other Forum Systems · Next Topic »
Add Reply
  • Pages:
  • 1
  • 2

Track Topic · E-mail Topic Time: 7:30 AM Mar 12
Hosted for free by ZetaBoards