Welcome Guest [Log In] [Register]
We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Multiquote (on) Multiquote (off)
Add Reply
Reducing Pic size?
Topic Started: Jan 10 2009, 03:26 PM (571 Views)
Peace Keeper
Member
[ * ]
Sometimes people post pics that are larger then they should be and it cuts off sections for the post, in addition it removes the options on the top of that post (i.e edit,delete buttons)

So how do I set up my board to automatically reduce the size of posted pics to 60% of there original size like I have scene on other forums/posts?

Thanks in advance.................
Offline Profile Quote Post Goto Top
 
Viral.
Member Avatar
Member
[ *  *  *  *  *  * ]
Find the following in your CSS and change the 90% to 60%. If you need any extra help, please ask :) .

Code: HTML
 
.c_post img,#topic_review img {
max-width:90%;
}
Offline Profile Quote Post Goto Top
 
obxbiker
Member Avatar
USMCR
[ *  *  *  * ]
Thats how we have been doing it but others have said to use a fixed px size instead of a %
Offline Profile Quote Post Goto Top
 
Nicolas
Member Avatar
"PLES RING IF AN RNSER IS REQIRD."

To the best of my understanding from reading a post by Nicola, Firefox renders the images first (stretching the page) then applies the percent restrictions based off the stretched page.
Which is why pixel values are more recommended. :)
Offline Profile Quote Post Goto Top
 
Nicola-ZNS
.....
[ *  *  *  *  *  *  *  *  * ]
Oops, forgot to give an update on this: Seth and I looked at it, and it's declared that it's going to have to be pixels, not percentages. No clue how to fix it (which sucks!)

However I do have a script of niftyness, though...which I have passed along to Brandon. I might just post it and hope it gets added to the normal JS, though:
Code:
 
<script type="text/javascript">
//<![CDATA[
$(function() {
$("td.c_post img[alt='Posted Image']").each(function() {
if (this.width >= 800) {
$(this).wrap("<a href='" + this.src + "'></a>");
$(this).after("<br /><small><a href='" + this.src + "' class='view_full'>View Full Image</a></small>");
}
});
});
//]]>
</script>
That makes the image clickable if its over 800px wide (that can easily be adjusted), and adds a link to it underneath it. Seth wrote it ^_^ I helped with the idea of making it width specific (because you don't want a 'view full image' under everything), and the link also has a class, so you can style it.
You can see it in action, here: http://s1.zetaboards.com/Testing/single/?p=62263&t=988291

I'll ask Seth if he wants to post it later, or if he wants me to. People keep mentioning it, and its perfectly reasonable, it makes total sense =)
Offline Profile Quote Post Goto Top
 
Peace Keeper
Member
[ * ]
Nicola I'm a little (a lot really) computer illiterate.
So the Code you just posted where exactly do I post it and please talk me through it.
Thanks................
Offline Profile Quote Post Goto Top
 
obxbiker
Member Avatar
USMCR
[ *  *  *  * ]
I added it ABOVE THE COPYRIGHT and it works great there !!

Is there a way for it to show the original pic size in a new window ?
Edited by obxbiker, Jan 10 2009, 07:44 PM.
Offline Profile Quote Post Goto Top
 
Viral.
Member Avatar
Member
[ *  *  *  *  *  * ]
Nicola, you left out the opening < in your code :) .

obx, if you want it to open in a new window, use this code:

Code: HTML
 
<script type="text/javascript">
//<![CDATA[
$(function() {
$("td.c_post img[alt='Posted Image']").each(function() {
if (this.width >= 800) {
$(this).wrap("<a href='" + this.src + "'></a>");
$(this).after("<br /><small><a href='" + this.src + "' target='_blank' class='view_full'>View Full Image</a></small>");
}
});
});
//]]>
</script>
Offline Profile Quote Post Goto Top
 
obxbiker
Member Avatar
USMCR
[ *  *  *  * ]
Viral just tried that one and its still the same window.

Now its working...


Edited by obxbiker, Jan 10 2009, 09:24 PM.
Offline Profile Quote Post Goto Top
 
Nicola-ZNS
.....
[ *  *  *  *  *  *  *  *  * ]
Viral.
Jan 10 2009, 07:52 PM
Nicola, you left out the opening < in your code :) .
I realised that when I was testing it XD but forgot to correct. Oops :$ I was copying it from a PM I sent to Brian last weekend.
Offline Profile Quote Post Goto Top
 
Peace Keeper
Member
[ * ]
So how do I do this?
Offline Profile Quote Post Goto Top
 
obxbiker
Member Avatar
USMCR
[ *  *  *  * ]
obxbiker
Jan 10 2009, 07:36 PM
I added it ABOVE THE COPYRIGHT and it works great there !!

as posted
Offline Profile Quote Post Goto Top
 
Amanda
Member Avatar
Love, Reign O'er Me
[ *  *  *  * ]
I tried this and it doesn't seem to work in FF on my board, but it works in IE.
Shame because it's a great code.

edit: fixed after following Nicola's instructions here :
http://if.invisionfree.com/topic/5035662

:)
Edited by Amanda, Jan 11 2009, 12:03 PM.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · ZetaBoards Support · Next Topic »
Add Reply