Hi
I am working on an existing Umbraco site, I'm fairly new to umbraco. The site seems to automatically crop the images but the client is asking if we can change how the images crop.
From searching through the site. I can see that in the image.generated.cs cropping is mentioned here
///<summary>
/// Upload image
///</summary>
[ImplementPropertyType("umbracoFile")]
public Umbraco.Web.Models.ImageCropDataSet UmbracoFile
{
get { return this.GetPropertyValue<Umbraco.Web.Models.ImageCropDataSet>("umbracoFile"); }
}
Can anyone advise where I would look to find the crop settings? I'm not really understanding how it all works.
Thanks for your help.
Tara
So, there are 4 parts to your question and I'll try and address them in, what I hope is a logical, order.
Where are crops defined?
Based on the snippet you've shared above, I suspect you are using the default image cropper data type. So in Umbraco if you go to the, I think, Settings (it could be Developer) section, there is an item in the menu tree called "Data Types". In there you should find a "Image Cropper" type defined. Most likely your explicit crops are defined on there. However, it's possible that they are located directly in templates, but we will re-visit that a bit later.
Assuming the crops are defined on the Image Cropper data type, if you want to keep the dimension but change which parts of the image are used how do you do this?
This is done on your images in the media section, on each image you should be able to click on a crop and then adjust the area that is used for the crop (you can't change a crops dimensions).
How does Umbraco render out the crops?
To understand this, you need to look into your templates and partial view files (cshtml files). In these you will most likely see calls to GetCropUrl. What this call is doing is telling the rendering which crop configuration to append to the image query string in order to trigger the cropping. There are different ways this can be called, the first is by passing in the alias/name of the crop you want to display, assuming it is defined already on the Image Cropper data type, (mentioned in point 1). The other (and this is the alternative way of crops being defined), is that GetCropUrl is having a height/width and other configuration information passed directly to it. Although uncommon, this is still used in various situations.
How does Umbraco actually crop the images?
Cropping in Umbraco is powered by a package called ImageProcessor. This, as I understand it, uses a HttpHandler to hook into the web request pipeline and check for any URLs to images and examine their query string. If it finds a valid cropper query string, it will then process the raw image based on the data passed in and return (and cache) the cropped version.
I hope that this explanation helps answer your question?
Understanding automated image cropping
Hi I am working on an existing Umbraco site, I'm fairly new to umbraco. The site seems to automatically crop the images but the client is asking if we can change how the images crop.
From searching through the site. I can see that in the image.generated.cs cropping is mentioned here
Can anyone advise where I would look to find the crop settings? I'm not really understanding how it all works. Thanks for your help. Tara
Hi Tara,
So, there are 4 parts to your question and I'll try and address them in, what I hope is a logical, order.
Where are crops defined?
Based on the snippet you've shared above, I suspect you are using the default image cropper data type. So in Umbraco if you go to the, I think, Settings (it could be Developer) section, there is an item in the menu tree called "Data Types". In there you should find a "Image Cropper" type defined. Most likely your explicit crops are defined on there. However, it's possible that they are located directly in templates, but we will re-visit that a bit later.
Assuming the crops are defined on the Image Cropper data type, if you want to keep the dimension but change which parts of the image are used how do you do this?
This is done on your images in the media section, on each image you should be able to click on a crop and then adjust the area that is used for the crop (you can't change a crops dimensions).
How does Umbraco render out the crops?
To understand this, you need to look into your templates and partial view files (cshtml files). In these you will most likely see calls to
GetCropUrl. What this call is doing is telling the rendering which crop configuration to append to the image query string in order to trigger the cropping. There are different ways this can be called, the first is by passing in the alias/name of the crop you want to display, assuming it is defined already on the Image Cropper data type, (mentioned in point 1). The other (and this is the alternative way of crops being defined), is thatGetCropUrlis having a height/width and other configuration information passed directly to it. Although uncommon, this is still used in various situations.How does Umbraco actually crop the images?
Cropping in Umbraco is powered by a package called ImageProcessor. This, as I understand it, uses a HttpHandler to hook into the web request pipeline and check for any URLs to images and examine their query string. If it finds a valid cropper query string, it will then process the raw image based on the data passed in and return (and cache) the cropped version.
I hope that this explanation helps answer your question?
Thanks
Nik
Hi again Once I have set the focal points on the images. Do I need to do something to update the new focal point across the site? Thanks
Thanks so much Nik for taking the time to explain this thoroughly. It's really helpful.
is working on a reply...