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:
Add Reply
  • Pages:
  • 1
Prevent Posted Images from Stretching Board
Topic Started: Jul 3 2010, 02:56 PM (6,466 Views)
Reid
Member Avatar
È una trappola!

Place this in Admin CP -> Board Template -> Below the Board:
Code:
 
<script type='text/javascript'>
$('td.c_post img[alt=Posted Image]').css('max-width', '1px').css('max-width', $('td.c_post:first').width() + 'px');
</script>
It will make the maximum width of images the same as post widths. Note that unlike other codes, this code scales based on resolution.

To link all resized images to their source, use this code instead, same placement:
Code:
 
<script type='text/javascript'>
(function () {
$('td.c_post img[alt=Posted Image]').css('width', '1px');
var m_width = $('td.c_post:first').width();
$('td.c_post img[alt=Posted Image]').each(function () {
$(this).css('width', '');
if ($(this).width() > m_width) {
$(this).wrap("".link(this.src)).after("<br /><small>This image has been resized to prevent stretching the screen. Click to view it at its full size.").css({ cursor: 'pointer', width: m_width + 'px' });
}
});
})();
</script>
Offline Profile Quote Post Goto Top
 
Pando
Member Avatar
Member
[ *  *  *  *  *  * ]
The code is awesome! Thanks!


Question though, what about if there is a giant piece of text that stretches it, what will happen to the images then?

Unfortunately it goes past the blockquotes though.
Offline Profile Quote Post Goto Top
 
Reid
Member Avatar
È una trappola!

Furahasaurus
Jul 3 2010, 03:18 PM
The code is awesome! Thanks!


Question though, what about if there is a giant piece of text that stretches it, what will happen to the images then?

Unfortunately it goes past the blockquotes though.
The code does exactly what it says: images will not stretch the board. Other types of stretching the board, such as long pieces of text, are not covered by this code. :P
Offline Profile Quote Post Goto Top
 
Jameswgw
Member Avatar
Member
[ *  *  *  * ]
Awesome code, works like a charm. Thanks Reid.
Offline Profile Quote Post Goto Top
 
Pando
Member Avatar
Member
[ *  *  *  *  *  * ]
I removed it, because it is super glitchy. When I added it, every page I visited had the page stretched. I removed it, and every new page I visited didn't stretch anymore.
Offline Profile Quote Post Goto Top
 
IF User (P)
Member
[ * ]
I love this one! :) Thanks Reid
Offline Profile Quote Post Goto Top
 
Nicolas-ZNR
Member Avatar
Member
[ *  *  *  *  *  *  * ]
Reid
Jul 3 2010, 02:56 PM
To link all resized images to their source, use this code instead, same placement:
Code:
 
<script type='text/javascript'>
(function () {
$('td.c_post img[alt=Posted Image]').css('width', '1px');
var m_width = $('td.c_post:first').width();
$('td.c_post img[alt=Posted Image]').each(function () {
$(this).css('width', '');
if ($(this).width() > m_width) {
$(this).wrap("".link(this.src)).after("<br /><small>This image has been resized to prevent stretching the screen. Click to view it at its full size.").css({ cursor: 'pointer', width: m_width + 'px' });
}
});
})();
</script>
Any chance that can work with images in spoilers, too? :r
Offline Profile Quote Post Goto Top
 
justifin
Member
[ *  * ]
Furahasaurus
Jul 3 2010, 08:02 PM
I removed it, because it is super glitchy. When I added it, every page I visited had the page stretched. I removed it, and every new page I visited didn't stretch anymore.
same issue as him
Offline Profile Quote Post Goto Top
 
Reid
Member Avatar
È una trappola!

Which code were you using - first or second? The second was added as an afterthought and not tested extensively.
Offline Profile Quote Post Goto Top
 
Pando
Member Avatar
Member
[ *  *  *  *  *  * ]
The first code.
Offline Profile Quote Post Goto Top
 
justifin
Member
[ *  * ]
also the first code
Offline Profile Quote Post Goto Top
 
Deleted User
Deleted User

Any chance of getting this code fixed?
It's really handy but as the other guys said, when you view a topic you haven't viewed before the theme is stretched.
If you refresh the page then it works fine, however refreshing each page you visit so it looks as it should cost a lot of clicks when you have ad-removal.

Not sure how i got this, but it seems to work with the code on this page, to me they seem to do the same.
Though when i remove either of them, nothing happens at all goes to javascript.
Why doesn't ZB have this function by default anyway?
I don't know anyone who would want their theme to be stretched in a ugly manner.

Code:
 

<style type="text/css">
.c_post img,#topic_review img {
max-width:100%;
}
</style>



Code:
 
<script type='text/javascript'>
(function () {
$('td.c_post img[alt=Posted Image], blockquote img[alt=Posted Image]').css('width', '1px');
var m_width = $('td.c_post:first, blockquote').width();
$('td.c_post img[alt=Posted Image], blockquote img[alt=Posted Image]').each(function () {
$(this).css('width', '');
if ($(this).width() > m_width) {
$(this).wrap("".link(this.src)).after("<br /><small>This image has been resized to prevent stretching the screen. Click to view it at its full size.").css({ cursor: 'pointer', width: m_width + 'px' });
}
});
})();
</script>

Quote Post Goto Top
 
Nyokou
Member
[ * ]
Works perfectly for me but just one issue, it doesn't provide a link to the actual sized image.
Offline Profile Quote Post Goto Top
 
Skrew
Member
[ *  * ]
Nyokou
Mar 12 2011, 08:54 AM
Works perfectly for me but just one issue, it doesn't provide a link to the actual sized image.
needs to do this, otherwise its perfect
Offline Profile Quote Post Goto Top
 
Luck Gandor
Member Avatar
Member
[ * ]
It works perfectly for me.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · ZetaBoards Codes & Modifications · Next Topic »
Add Reply
  • Pages:
  • 1