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:
Locked Topic
[ C ] Resize for quoted images
Topic Started: May 13 2013, 05:49 PM (312 Views)
Azza Neko
Member
[ *  * ]
Board Software: ZetaBoards
Description: I need to make the following logic work:

Code:
 
If the width of an image within [quote] tag is bigger than 150px, resize it to 150px. Otherwise leave as it is.

Ideally I'd like the function to find the bigger of 2 dimensions and then apply the resize to it. Aspect ratio has to be kept.

I really need to find a way to let people quote images and keep the board readable at the same time. If you can help me with this, huge thank you in advance.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Admin CP Posted Image Themes Posted Image Board Template Posted Image Below the Board
Code:
 
<script type="text/javascript">
//<![CDATA[
$('img[alt="Posted Image"]').each(function () {
var img = $(this).width();
$(this).hide();
var container = $(this).parent().width();
$(this).show();

if (img > container) {
$(this).width(container);
}
});
//]]>
</script>
Offline Profile Goto Top
 
Azza Neko
Member
[ *  * ]
Uh. That was fast. I'm a bit slow this morning though. Where do I specify the width I want to end up when image is quoted?
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
If you wanted to specify a specific width, you could just use CSS:
Code:
 
blockquote img[alt="Posted Image"] {
max-width: 150px;
}
The code above is resolution-friendly and will work on all posted images. If the image is larger than the container it is within then the image will be resized to the containers width.
Offline Profile Goto Top
 
Azza Neko
Member
[ *  * ]
Code:
 
blockquote img[alt="Posted Image"] {
max-width: 150px;
max-height: 150px;
}

This does all I wanted it to do, including idealistic scenario. I don't know why I haven't thought of that myself but at the moment you are my favorite person on the planet. Thank you!
Offline Profile Goto Top
 
Eccentric Feline
Member Avatar
梦想
[ *  *  *  *  *  *  *  * ]
Completed!

Your request has been completed. If you have any questions or concerns regarding the state of your request, please feel free to contact me via PM.
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Closed Requests · Next Topic »
Locked Topic