1
Mods & Plugins (Requests & Discussions) / Re: Restrict thumbnail image size?
« on: August 26, 2008, 01:44:47 AM »
SOLVED MY OWN PROBLEM
FOR PEOPLE USING 4IMAGES AS A VIDEO SITE, THIS IS CRUCIAL. LET PEOPLE UPLOAD THE VIDEOS AND THE THUMBNAILS
THEN USE CSS TO RESIZE THE THUMBNAILS, EASY.
files to be edited
templates/{yourtemplate}/thumbnail_bit.html
templates/{yourtemplate}/random_image.html ----- if you still use the random image
templates/{yourtemplate}/style.css
BACKUP YOUR STUFF
open up thumbnail_bit and look for
Now wrap it in div tags like this
give the div an id of anything you want, im gonna call this "resize"
go to random_image.html and look for {thumbnail} then place it in the same div id as before
save and close the files, now go to style.css and add this at the bottom
change your height and width change it to whatever you use.
max-height, max-width(the last two lines of css are crucial) this is the part that does the resize.
ive tested this in :
firefox
safari
opera
IE6
works perfectly,
WARNING: this hack will not resize porportionally, it is not gd2 or imagemagick , its only css, it will resize every thumbnail you have, BUT NOT PERMANENTLY.
FOR PEOPLE USING 4IMAGES AS A VIDEO SITE, THIS IS CRUCIAL. LET PEOPLE UPLOAD THE VIDEOS AND THE THUMBNAILS
THEN USE CSS TO RESIZE THE THUMBNAILS, EASY.
files to be edited
templates/{yourtemplate}/thumbnail_bit.html
templates/{yourtemplate}/random_image.html ----- if you still use the random image
templates/{yourtemplate}/style.css
BACKUP YOUR STUFF
open up thumbnail_bit and look for
Code: [Select]
{thumbnail}
Now wrap it in div tags like this
Code: [Select]
<div>{thumbnail}</div>
give the div an id of anything you want, im gonna call this "resize"
Code: [Select]
<div id="resize">{thumbnail}</div>
go to random_image.html and look for {thumbnail} then place it in the same div id as before
Code: [Select]
<div id="resize">{thumbnail}</div>
save and close the files, now go to style.css and add this at the bottom
Code: [Select]
#resize {
height:135px;
overflow: hidden;
width: 135px;
}#resize img {
height:135px;
overflow: hidden;
width: 135px;
max-height:135px;
max-width:135;
}
change your height and width change it to whatever you use.
max-height, max-width(the last two lines of css are crucial) this is the part that does the resize.
ive tested this in :
firefox
safari
opera
IE6
works perfectly,
WARNING: this hack will not resize porportionally, it is not gd2 or imagemagick , its only css, it will resize every thumbnail you have, BUT NOT PERMANENTLY.