What i did was to write some jquery to handle the image width.
If the width is lower than the max. width it scales the images.
//Ensure images allways are 500 px wide.
function scaleImagesInContent() {
$('.contentContainer span img').each(function() {
var maxWidth = 500; // Max width for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if(width < maxWidth){
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
}
});
}
Thanks for the code, it got me to thinking how I would accomplish this on my site. In case anyone is interested, I did the following to set the image max width in my content area:
/*adjust any resized images in the content area*/
$("#divContentContainer section article img").each(function(){
if($(this).height() == 500 || $(this).width() == 500){ //check for resized images
$(this).css({"height":"auto","width":"auto"});
if($(this).width() > 612){ //check for images over the new maximum width
$(this).css({"width":"612px"});
}
}
});
Images are scaled in RTE umbraco 7
Hi,
When i insert an image into the RTE of umbraco 7 of size 500 x 300 (landscape), the size are saved correct.
But when i insert an image of size 500 x 573 (Portrait) it is downscaled to 436px × 500px.
In version 4 you could specify 'Maximum default size of inserted images' in the RTE datatype.
Is there somewhere i can control this setting to avoid the downscaling?
Having the same problem.
Is the config moved or is it just not implemented yet?
Is there an issue about this?
Hi,
Didnt hear anything from anybody.
What i did was to write some jquery to handle the image width.
If the width is lower than the max. width it scales the images.
//Ensure images allways are 500 px wide. function scaleImagesInContent() { $('.contentContainer span img').each(function() { var maxWidth = 500; // Max width for the image var ratio = 0; // Used for aspect ratio var width = $(this).width(); // Current image width var height = $(this).height(); // Current image height // Check if the current width is larger than the max if(width < maxWidth){ ratio = maxWidth / width; // get ratio for scaling image $(this).css("width", maxWidth); // Set new width $(this).css("height", height * ratio); // Scale height based on ratio height = height * ratio; // Reset height to match scaled image } }); }
Hi Peter,
Thanks for the code, it got me to thinking how I would accomplish this on my site. In case anyone is interested, I did the following to set the image max width in my content area:
/*adjust any resized images in the content area*/ $("#divContentContainer section article img").each(function(){ if($(this).height() == 500 || $(this).width() == 500){ //check for resized images $(this).css({"height":"auto","width":"auto"}); if($(this).width() > 612){ //check for images over the new maximum width $(this).css({"width":"612px"}); } } });Is this a bug? Your solutions works great but it still look like bad in the RTE.
Whom are you asking a question?
Theres been some discussions abput it in the issue tracker: http://issues.umbraco.org/issue/U4-4729 http://issues.umbraco.org/issue/U4-4718 http://issues.umbraco.org/issue/U4-3933
etc.
Comment author was deleted
Ran across this today. Good work gents. The hack worked.
All, please vote: http://issues.umbraco.org/issue/U4-4729
is working on a reply...