The other day I was setting up a new website and I had everything working except for 1 thing. The images weren't cropping when rendered on the website.
The DevOps release pipelines, the environments and the blob storage were all setup but I just couldn't work out what the issue was.
This was on an Umbraco 8 site so I quickly had a look at the documentation on Our Umbraco and double checked everything.
I had the 2 packages installed, but I uninstalled and reinstalled them to see if I had missed something.
I checked all my settings within the config files and everything looked great but my images still weren't cropping correctly when deployed to Azure. They were working fine locally so that got me thinking. It must be an issue with the blob containers. But what?
I tested that the images were being saved in to blob storage and they were but crops weren't working.
The fix, which will work for other versions of Umbraco as it's not an Umbraco issue, was simple, once I found it!
I opened up Azure Storage Explorer so that I could connect to my blob storage then I expanded my Blob containers -
Here you can see my 3 blob containers - media, media-dev and media-uat. I right click on each container and in the popout menu, I click on "Set Public Access Level".
The default setting was no public access.
Once I changed the permission to "Public read access for blobs only" my images started to render correctly with all the crops applied!
I hope this helps someone in the future. :)
Published on: 21 March 2023