Changed hard-coded processed images URLs in back-office to use configured image URL generation.
This commit is contained in:
Andy Butland
@@ -409,6 +409,7 @@ function mediaHelper(umbRequestHelper, $http, $log) {
|
||||
* @param {object} options Object describing image generation parameters:
|
||||
* {
|
||||
* animationProcessMode: <string>
|
||||
* cacheBusterValue: <string>
|
||||
* focalPoint: {
|
||||
* left: <int>
|
||||
* top: <int>
|
||||
@@ -433,6 +434,7 @@ function mediaHelper(umbRequestHelper, $http, $log) {
|
||||
{
|
||||
imagePath,
|
||||
animationProcessMode: options.animationProcessMode,
|
||||
cacheBusterValue: options.cacheBusterValue,
|
||||
focalPoint: options.focalPoint,
|
||||
height: options.height,
|
||||
mode: options.mode,
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
* A service containing all logic for all of the Umbraco TinyMCE plugins
|
||||
*/
|
||||
function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, stylesheetResource, macroResource, macroService,
|
||||
$routeParams, umbRequestHelper, angularHelper, userService, editorService, entityResource, eventsService, localStorageService) {
|
||||
$routeParams, umbRequestHelper, angularHelper, userService, editorService, entityResource, eventsService, localStorageService, mediaHelper) {
|
||||
|
||||
//These are absolutely required in order for the macros to render inline
|
||||
//we put these as extended elements because they get merged on top of the normal allowed elements by tiny mce
|
||||
@@ -298,15 +298,20 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
|
||||
if (editor.settings.maxImageSize && editor.settings.maxImageSize !== 0) {
|
||||
var newSize = imageHelper.scaleToMaxSize(editor.settings.maxImageSize, size.w, size.h);
|
||||
|
||||
|
||||
editor.dom.setAttrib(imageDomElement, 'width', newSize.width);
|
||||
editor.dom.setAttrib(imageDomElement, 'height', newSize.height);
|
||||
|
||||
// Images inserted via Media Picker will have a URL we can use for ImageResizer QueryStrings
|
||||
// Images pasted/dragged in are not persisted to media until saved & thus will need to be added
|
||||
if(imgUrl){
|
||||
var src = imgUrl + "?width=" + newSize.width + "&height=" + newSize.height;
|
||||
editor.dom.setAttrib(imageDomElement, 'data-mce-src', src);
|
||||
if (imgUrl) {
|
||||
mediaHelper.getProcessedImageUrl(imgUrl,
|
||||
{
|
||||
height: newSize.height,
|
||||
width: newSize.width
|
||||
})
|
||||
.then(function (resizedImgUrl) {
|
||||
editor.dom.setAttrib(imageDomElement, 'data-mce-src', resizedImgUrl);
|
||||
});
|
||||
}
|
||||
|
||||
editor.execCommand("mceAutoResize", false, null, null);
|
||||
@@ -1495,10 +1500,17 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
|
||||
});
|
||||
|
||||
args.editor.on('ObjectResized', function (e) {
|
||||
var qs = "?width=" + e.width + "&height=" + e.height + "&mode=max";
|
||||
var srcAttr = $(e.target).attr("src");
|
||||
var path = srcAttr.split("?")[0];
|
||||
$(e.target).attr("data-mce-src", path + qs);
|
||||
mediaHelper.getProcessedImageUrl(path,
|
||||
{
|
||||
height: e.height,
|
||||
moded: "max",
|
||||
width: e.width
|
||||
})
|
||||
.then(function (resizedPath) {
|
||||
$(e.target).attr("data-mce-src", resizedPath);
|
||||
});
|
||||
|
||||
syncContent();
|
||||
});
|
||||
|
||||
@@ -44,15 +44,22 @@
|
||||
.controller('Umbraco.PropertyEditors.FileUploadController', fileUploadController)
|
||||
.run(function (mediaHelper, umbRequestHelper, assetsService) {
|
||||
if (mediaHelper && mediaHelper.registerFileResolver) {
|
||||
|
||||
//NOTE: The 'entity' can be either a normal media entity or an "entity" returned from the entityResource
|
||||
// NOTE: The 'entity' can be either a normal media entity or an "entity" returned from the entityResource
|
||||
// they contain different data structures so if we need to query against it we need to be aware of this.
|
||||
mediaHelper.registerFileResolver("Umbraco.UploadField", function (property, entity, thumbnail) {
|
||||
if (thumbnail) {
|
||||
if (mediaHelper.detectIfImageByExtension(property.value)) {
|
||||
//get default big thumbnail from image processor
|
||||
var thumbnailUrl = property.value + "?rnd=" + moment(entity.updateDate).format("YYYYMMDDHHmmss") + "&width=500&animationprocessmode=first";
|
||||
return thumbnailUrl;
|
||||
|
||||
// Get default big thumbnail from image processor
|
||||
return mediaHelper.getProcessedImageUrl(property.value,
|
||||
{
|
||||
animationprocessmode: "first",
|
||||
cacheBusterValue: moment(entity.updateDate).format("YYYYMMDDHHmmss"),
|
||||
width: 500
|
||||
})
|
||||
.then(function (url) {
|
||||
return url;
|
||||
});
|
||||
}
|
||||
else {
|
||||
return null;
|
||||
|
||||
@@ -1,90 +1,97 @@
|
||||
angular.module("umbraco")
|
||||
.controller("Umbraco.PropertyEditors.Grid.MediaController",
|
||||
function ($scope, $timeout, userService, editorService) {
|
||||
|
||||
|
||||
$scope.thumbnailUrl = getThumbnailUrl();
|
||||
|
||||
|
||||
if (!$scope.model.config.startNodeId) {
|
||||
if ($scope.model.config.ignoreUserStartNodes === true) {
|
||||
$scope.model.config.startNodeId = -1;
|
||||
$scope.model.config.startNodeIsVirtual = true;
|
||||
function ($scope, userService, editorService, mediaHelper) {
|
||||
|
||||
} else {
|
||||
userService.getCurrentUser().then(function (userData) {
|
||||
$scope.model.config.startNodeId = userData.startMediaIds.length !== 1 ? -1 : userData.startMediaIds[0];
|
||||
$scope.model.config.startNodeIsVirtual = userData.startMediaIds.length !== 1;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
$scope.setImage = function(){
|
||||
var startNodeId = $scope.model.config && $scope.model.config.startNodeId ? $scope.model.config.startNodeId : undefined;
|
||||
var startNodeIsVirtual = startNodeId ? $scope.model.config.startNodeIsVirtual : undefined;
|
||||
$scope.thumbnailUrl = getThumbnailUrl();
|
||||
|
||||
var mediaPicker = {
|
||||
startNodeId: startNodeId,
|
||||
startNodeIsVirtual: startNodeIsVirtual,
|
||||
cropSize: $scope.control.editor.config && $scope.control.editor.config.size ? $scope.control.editor.config.size : undefined,
|
||||
showDetails: true,
|
||||
disableFolderSelect: true,
|
||||
onlyImages: true,
|
||||
dataTypeKey: $scope.model.dataTypeKey,
|
||||
submit: function(model) {
|
||||
var selectedImage = model.selection[0];
|
||||
|
||||
$scope.control.value = {
|
||||
focalPoint: selectedImage.focalPoint,
|
||||
id: selectedImage.id,
|
||||
udi: selectedImage.udi,
|
||||
image: selectedImage.image,
|
||||
caption: selectedImage.altText
|
||||
};
|
||||
|
||||
editorService.close();
|
||||
},
|
||||
close: function() {
|
||||
editorService.close();
|
||||
if (!$scope.model.config.startNodeId) {
|
||||
if ($scope.model.config.ignoreUserStartNodes === true) {
|
||||
$scope.model.config.startNodeId = -1;
|
||||
$scope.model.config.startNodeIsVirtual = true;
|
||||
|
||||
} else {
|
||||
userService.getCurrentUser().then(function (userData) {
|
||||
$scope.model.config.startNodeId = userData.startMediaIds.length !== 1 ? -1 : userData.startMediaIds[0];
|
||||
$scope.model.config.startNodeIsVirtual = userData.startMediaIds.length !== 1;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
editorService.mediaPicker(mediaPicker);
|
||||
};
|
||||
|
||||
$scope.$watch('control.value', function(newValue, oldValue) {
|
||||
if(angular.equals(newValue, oldValue)){
|
||||
return; // simply skip that
|
||||
}
|
||||
|
||||
$scope.thumbnailUrl = getThumbnailUrl();
|
||||
}, true);
|
||||
|
||||
function getThumbnailUrl() {
|
||||
|
||||
if($scope.control.value && $scope.control.value.image) {
|
||||
var url = $scope.control.value.image;
|
||||
$scope.setImage = function () {
|
||||
var startNodeId = $scope.model.config && $scope.model.config.startNodeId ? $scope.model.config.startNodeId : undefined;
|
||||
var startNodeIsVirtual = startNodeId ? $scope.model.config.startNodeIsVirtual : undefined;
|
||||
|
||||
if($scope.control.editor.config && $scope.control.editor.config.size){
|
||||
url += "?width=" + $scope.control.editor.config.size.width;
|
||||
url += "&height=" + $scope.control.editor.config.size.height;
|
||||
url += "&animationprocessmode=first";
|
||||
var mediaPicker = {
|
||||
startNodeId: startNodeId,
|
||||
startNodeIsVirtual: startNodeIsVirtual,
|
||||
cropSize: $scope.control.editor.config && $scope.control.editor.config.size ? $scope.control.editor.config.size : undefined,
|
||||
showDetails: true,
|
||||
disableFolderSelect: true,
|
||||
onlyImages: true,
|
||||
dataTypeKey: $scope.model.dataTypeKey,
|
||||
submit: function (model) {
|
||||
var selectedImage = model.selection[0];
|
||||
|
||||
if($scope.control.value.focalPoint){
|
||||
url += "¢er=" + $scope.control.value.focalPoint.top +"," + $scope.control.value.focalPoint.left;
|
||||
url += "&mode=crop";
|
||||
$scope.control.value = {
|
||||
focalPoint: selectedImage.focalPoint,
|
||||
id: selectedImage.id,
|
||||
udi: selectedImage.udi,
|
||||
image: selectedImage.image,
|
||||
caption: selectedImage.altText
|
||||
};
|
||||
|
||||
editorService.close();
|
||||
},
|
||||
close: function () {
|
||||
editorService.close();
|
||||
}
|
||||
}
|
||||
|
||||
// set default size if no crop present (moved from the view)
|
||||
if (url.indexOf('?') == -1)
|
||||
{
|
||||
url += "?width=800&upscale=false&animationprocessmode=false"
|
||||
}
|
||||
return url;
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
editorService.mediaPicker(mediaPicker);
|
||||
};
|
||||
|
||||
});
|
||||
$scope.$watch('control.value', function (newValue, oldValue) {
|
||||
if (angular.equals(newValue, oldValue)) {
|
||||
return; // simply skip that
|
||||
}
|
||||
|
||||
$scope.thumbnailUrl = getThumbnailUrl();
|
||||
}, true);
|
||||
|
||||
function getThumbnailUrl() {
|
||||
if ($scope.control.value && $scope.control.value.image) {
|
||||
|
||||
var imageOptions;
|
||||
if (url.indexOf('?') == -1) {
|
||||
// set default size if no crop present (moved from the view)
|
||||
imageOptions = {
|
||||
animationprocessmode : false,
|
||||
width: 800
|
||||
}
|
||||
}
|
||||
else {
|
||||
imageOptions = {
|
||||
animationprocessmode: "first",
|
||||
height: $scope.control.editor.config.size.height,
|
||||
width: $scope.control.editor.config.size.width
|
||||
};
|
||||
|
||||
if ($scope.control.value.focalPoint) {
|
||||
imageOptions.focalPoint = {
|
||||
left: $scope.control.value.focalPoint.left,
|
||||
top: $scope.control.value.focalPoint.top
|
||||
}
|
||||
imageOptions.mode = "crop";
|
||||
}
|
||||
}
|
||||
|
||||
return mediaHelper.getProcessedImageUrl($scope.control.value.image, imageOptions)
|
||||
.then(function (url) {
|
||||
return url;
|
||||
});
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
@@ -222,9 +222,17 @@ angular.module('umbraco')
|
||||
// they contain different data structures so if we need to query against it we need to be aware of this.
|
||||
mediaHelper.registerFileResolver("Umbraco.ImageCropper", function (property, entity, thumbnail) {
|
||||
if (property.value && property.value.src) {
|
||||
|
||||
if (thumbnail === true) {
|
||||
return property.value.src + "?width=500&mode=max&animationprocessmode=first";
|
||||
return mediaHelper.getProcessedImageUrl(property.value.src,
|
||||
{
|
||||
animationprocessmode: "first",
|
||||
mode: "max",
|
||||
width: 500
|
||||
})
|
||||
.then(function (url) {
|
||||
return url;
|
||||
});
|
||||
|
||||
}
|
||||
else {
|
||||
return property.value.src;
|
||||
|
||||
Reference in New Issue
Block a user