DIR Return Create A Forum - Home
---------------------------------------------------------
Create A Forum - Support Forums
HTML https://support.createaforum.com
---------------------------------------------------------
*****************************************************
DIR Return to: Create a Forum Codes and Support
*****************************************************
#Post#: 1056--------------------------------------------------
[code] Auto-resize large images
DIR By: celebrus
Date: October 7, 2010, 2:35 am
---------------------------------------------------------
This will resize any images posted by users that are above a
certain threshold while preserving the aspect ratio. (preview
HTML http://celebrus.createaforum.com/scripts/auto-resize-large-images/)
This code utilizes jQuery, please use the latest version found
in this thread:
HTML http://support.createaforum.com/5/jquery-v1-8-update/
Then place this in your headers/footers:
--- Code ---
<style type="text/css">
div.resized_image p {
margin: 2px;
margin-top: 0;
font-size: 8px;
/* Awesome icon from here:
HTML http://www.famfamfam.com/lab/icons/silk/
*/
background:
url(
HTML http://i242.photobucket.com/albums/ff244/9861_omikron/error.png)<br
/>no-repeat;
padding-left: 20px;
color: #333;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
(
function(maxht, maxwt, minht, minwt) {
var imgs = $(".post_wrapper img.bbc_img");
// Image resizing function
var resize_image = function(img, newht, newwt) {
img.height = newht;
img.width = newwt;
$(img).wrap('<table><tr><td class="plainbox"><div
class="resized_image"><a href="' + img.src + '"
target="_blank"></a><></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"><a
href="
HTML http://vikhyat.net/code/resize_large_images_js/">Image<br
/>Resizing Script</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>
--- End Code ---
#Post#: 1708--------------------------------------------------
Re: [code] Auto-resize large images
DIR By: Rude
Date: June 18, 2011, 11:19 pm
---------------------------------------------------------
thank you...this is beautiful.
#Post#: 8827--------------------------------------------------
Re: [code] Auto-resize large images
DIR By: JEV
Date: March 15, 2013, 10:18 am
---------------------------------------------------------
Sorry to bring this to life, but I thought it would be better to
pose the question here instead of creating a new thread about
it. This code is simply amazing, thank you to whoever did it! I
just have a question. After I have it, there's this tiny image
and not saying the image was resized and to view it in full
size, we need to click on it. Also, under the image it also says
"Image Resizing Script <>". Isn't there a way to keep the
feature but to delete these notes?
Thanks.
#Post#: 8950--------------------------------------------------
Re: [code] Auto-resize large images
DIR By: KirbyFan91
Date: March 21, 2013, 11:45 am
---------------------------------------------------------
--- Quote from: JEV link ---
>
> Sorry to bring this to life, but I thought it would be better
to pose the question here instead of creating a new thread about
it. This code is simply amazing, thank you to whoever did it! I
just have a question. After I have it, there's this tiny image
and not saying the image was resized and to view it in full
size, we need to click on it. Also, under the image it also says
"Image Resizing Script <>". Isn't there a way to keep the
feature but to delete these notes?
>
>
> Thanks.
>
--- End Quote ---
UNTESTED CODE W/O NOTES
--- Code ---
<style type="text/css">
div.resized_image p {
margin: 2px;
margin-top: 0;
font-size: 8px;
/* Awesome icon from here:
HTML http://www.famfamfam.com/lab/icons/silk/
*/
background:
url(
HTML http://i242.photobucket.com/albums/ff244/9861_omikron/error.png)<br
/>no-repeat;
padding-left: 20px;
color: #333;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
(
function(maxht, maxwt, minht, minwt) {
var imgs = $(".post_wrapper img.bbc_img");
// Image resizing function
var resize_image = function(img, newht, newwt) {
img.height = newht;
img.width = newwt;
$(img).wrap('<table><tr><td class="plainbox"><div
class="resized_image"><a href="' + img.src + '"
target="_blank"></a><></td></tr></table>');
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>
--- End Code ---
#Post#: 9034--------------------------------------------------
Re: [code] Auto-resize large images
DIR By: JEV
Date: March 27, 2013, 6:08 am
---------------------------------------------------------
Thanks! I'll try it!
#Post#: 9845--------------------------------------------------
Re: [code] Auto-resize large images
DIR By: evzkhii123
Date: May 16, 2013, 10:54 am
---------------------------------------------------------
It doesnt work in my theme. Can you specifically show me where i
should place it?
*****************************************************
Page 1 of 1