{% js %} var $instance = Craft.PreviewFileModal.openInstance; var containerHeight = Garnish.$win.height() * 0.66; var containerWidth = Math.min(containerHeight / 3 * 4, Garnish.$win.width() - $instance.settings.minGutter * 2); containerHeight = containerWidth / 4 * 3; if (startingWidth && startingHeight) { var ratio = startingWidth / startingHeight; containerWidth = Math.min(startingWidth, Garnish.$win.width() - $instance.settings.minGutter * 2); containerHeight = Math.min(containerWidth / ratio, Garnish.$win.height() - $instance.settings.minGutter * 2); containerWidth = containerHeight * ratio; // This might actually have put width over the viewport limits, so doublecheck if (containerWidth > Math.min(startingWidth, Garnish.$win.width() - $instance.settings.minGutter * 2)) { containerWidth = Math.min(startingWidth, Garnish.$win.width() - $instance.settings.minGutter * 2); containerHeight = containerWidth / ratio; } } $instance.find('img').css({ width: containerWidth, height: containerHeight }); var $img = $instance.find('img'); if ($instance.loaded && $img.length) { // Make sure we maintain the ratio var maxWidth = $img.data('maxwidth'), maxHeight = $img.data('maxheight'), imageRatio = maxWidth / maxHeight, desiredWidth = $instance.desiredWidth ? $instance.desiredWidth : $instance.width(), desiredHeight = $instance.desiredHeight ? $instance.desiredHeight : $instance.height(), width = Math.min(desiredWidth, maxWidth), height = Math.round(Math.min(maxHeight, width / imageRatio)); width = Math.round(height * imageRatio); $img.css({'width': width, 'height': height}); $instance._resizeContainer(width, height); $instance.desiredWidth = width; $instance.desiredHeight = height; } $instance.base(); if ($instance.loaded && $img.length) { // Correct anomalities var containerWidth = Math.round(Math.min(Math.max($img.height() * imageRatio), Garnish.$win.width() - ($instance.settings.minGutter * 2))), containerHeight = Math.round(Math.min(Math.max(containerWidth / imageRatio), Garnish.$win.height() - ($instance.settings.minGutter * 2))); containerWidth = Math.round(containerHeight * imageRatio); // This might actually have put width over the viewport limits, so doublecheck that if (containerWidth > Math.min(containerWidth, Garnish.$win.width() - $instance.settings.minGutter * 2)) { containerWidth = Math.min(containerWidth, Garnish.$win.width() - $instance.settings.minGutter * 2); containerHeight = containerWidth / imageRatio; } $instance._resizeContainer(containerWidth, containerHeight); $img.css({'width': containerWidth, 'height': containerHeight}); } {% endjs %}